点此查看所有教程、项目、源码导航文章目录1. 背景2. while 语句格式3. while 语句实例4. 更多实战示例5. 小结1. 背景上一篇我们理解了循环的意义计算机最擅长重复劳动循环结构就是用来告诉程序反复执行一段逻辑。我们已经知道循环包含两个核心部分需要重复执行的循环体以及控制循环什么时候停下来的终止条件。如果想要精准控制循环执行多少次最经典的思路就是借助一个计数器变量。我们给计数器设置初始值每完成一次循环计数器自增当计数器达到边界值时条件不再成立循环停止。while 循环就是基于这套思想设计出来的基础循环语法也是我们接触的第一种 JS 循环。while 的特点非常纯粹先判断条件条件为真就执行循环体条件为假直接退出循环。2. while 语句格式while 的基础语法格式如下while(条件){循环体语句;}while 的执行顺序非常关键先判断后执行。执行流程判断条件成立 → 执行大括号内的循环体 → 再次回到条件判断 → 成立继续执行…… 直到条件判断结果为 false循环直接结束程序继续往下运行循环后面的代码。这里有一个必须重视的问题循环体内部一定要有能够改变条件结果的代码。如果条件永远为 true循环会无休止运行也就是死循环。死循环会持续占用 CPU 资源严重时造成页面卡死是开发中需要规避的问题。3. while 语句实例我们先看基础案例在控制台连续输出 10 次 hello。vari1;while(i10){console.log(hello);i;}我们一步步拆解完整执行流程初始化计数器i 1判断i 10110 结果为 true进入循环打印 hello然后执行ii 变成 2再次判断i 10210 成立继续打印i 自增为 3这个过程不断重复i 依次增加直到 i 等于 10 的时候条件依旧成立执行打印i 变成 11再次判断i 101110 结果为 false循环终止。很多新手容易把i写在循环外面或者忘记写i计数器 i 永远等于 1条件一直成立直接形成死循环这是 while 循环最高频的错误。4. 更多实战示例循环的灵活之处就是可以在循环体内部搭配我们之前学过的选择结构 if实现筛选、累加、计数等逻辑。下面几个例子是循环最经典的基础练习建议大家手动敲一遍不要直接复制。第一个示例输出 1~100 之间所有偶数vari1;while(i100){if(i%20){console.log(i);}i;}思路计数器从 1 遍历到 100每一轮都用取模运算符判断当前数字是不是偶数满足条件才打印无论是否打印计数器都要自增。第二个示例计算 1 到 1000 所有数字的累加和vari1;varsum0;// sum用来保存累加的总和初始值为0while(i1000){sumsumi;i;}console.log(sum);思路我们额外定义一个累加变量 sum每一轮循环都把当前 i 的值加到 sum 里面。累加变量初始值必须设置为 0如果初始值写错最终求和结果就会出错。第三个示例统计 0~9999 里面可以被 3 整除的数字一共有多少个vari0;varcount0;// count作为计数器用来记录符合条件的数量while(i10000){if(i%30){count;}i;}console.log(count);思路这是计数类循环的标准写法。count 只在满足条件的时候才增加而遍历变量 i 是每一轮都自增二者作用完全不一样不要混淆。5. 小结while 是入门循环的绝佳选择逻辑直白核心就是先判断条件条件成立才执行循环体。我们记住几个核心要点while 是先判断后执行如果一开始条件就是 false循环体一次都不会执行循环内部一定要有修改条件的代码比如 i防止死循环循环可以和 if 选择结构组合实现筛选、求和、计数区分两种变量遍历计数器用来控制循环次数累加 / 计数变量用来保存业务结果。从循环开始三种程序结构顺序、选择、循环就全部汇合了代码逻辑复杂度会明显上升光看懂不够一定要动手敲代码调试观察每一步变量的变化。