点此查看所有教程、项目、源码导航

1. 背景

上一篇我们学习了 while 循环，我们再来回顾两段之前写过的代码。

// 输出1-100以内的偶数vari=1;while(i<=100){if(i%2==0){//判断是否为偶数，只有是偶数的才输出console.log(i);}i++;}

//计算1-1000的和vari=1;varsum=0;// 存储和while(i<=1000){sum=sum+i;i++;}console.log(sum);

在 while 的写法里，控制循环的计数器i被拆成了三处：
初始化写在 while 循环外面，循环条件写在 while 后面的括号里，计数器自增写在循环体内部。

这三块代码是强绑定、缺一不可的。初始化决定循环从哪里开始，条件判断决定循环什么时候停下，自增语句保证条件最终可以变为 false，避免死循环。

当代码逻辑简单的时候，这种写法还好理解。但是循环体代码越来越长、里面嵌套很多 if 判断之后，我们很容易找不到i++的位置，甚至一不小心漏掉自增语句，直接写出死循环。
而 for 循环，就是 JS 为了解决这个痛点而设计的循环语法，它把这三块和计数器相关的代码收拢到一处。

2. for 循环语法与执行流程

for 循环把变量初始化、循环条件、变量更新三个部分统一放到()内部，用分号隔开，格式如下：

for(初始化表达式;条件表达式;更新表达式){// 循环体，需要重复执行的代码}

我们把刚才输出 1~100 偶数的例子改成 for 写法：

for(vari=1;i<=100;i++){if(i%2==0){//判断是否为偶数，只有是偶数的才输出console.log(i);}}

很多新手会误以为这三部分是同时执行的，这里我们把完整执行顺序拆解清楚，这个顺序非常固定：

1. 进入 for，仅执行一次初始化表达式：var i = 1，完成计数器声明和初始赋值；
2. 执行条件判断i <= 100，结果为 true，进入大括号执行循环体；
3. 循环体全部执行完毕之后，才执行更新表达式i++；
4. 再次回到条件判断，重复【判断→执行循环体→更新变量】这个流程；
5. 一旦条件表达式结果为 false，循环立刻终止，程序继续执行 for 循环后面的代码。

可以看到，这段 for 循环的最终效果，和前面 while 版本是完全等价的，只是代码组织形式发生了变化。

这里补充一个容易踩坑的细节：括号里面是两个分号，用来分割三块内容，不是逗号。哪怕某一块内容省略不写，分号也不能丢。比如for( ; ; )代表三个部分全部省略，条件永久为真，就是死循环。

3. for 循环的优势与编程思想

for 循环不只是换了一种写法，它背后是一种更清晰的编程思路：先规划循环的边界，再写循环内部的业务逻辑。

当我们准备写一段计数循环的时候，最先关心的三件事本来就是：循环从哪个数字开始、循环的终止边界是什么、每一轮计数器怎么变化。
for 语法刚好把这三件事收拢在一行，我们一眼就能看清整个循环的控制规则，不用分散到代码的不同位置去找。

对比 while：
while 是分散式管理。初始化在循环前面，更新语句藏在循环体里面。如果循环体代码很长，阅读代码时需要上下翻找计数器相关逻辑，维护成本更高。
for 是集中式管理。循环控制要素全部放在头部，关注点分离，控制逻辑和业务代码分开。

当然也要客观说明：for 不是万能碾压 while。
如果循环的次数不固定、终止条件和计数器无关（比如等待用户输入、等待某个状态变化），while 或者 do while 依然更加合适。
for 最擅长的场景，就是已知大概循环次数、依靠计数器遍历的场景，比如遍历数字、遍历数组下标，这也是开发中最高频的循环场景。

4. 补充实战示例

我们把之前的求和案例，也改写为 for 版本，方便大家对照理解：

// 计算1-1000的累加和varsum=0;for(vari=1;i<=1000;i++){sum=sum+i;}console.log(sum);

可以看到，求和变量 sum 属于业务结果，不属于循环控制逻辑，依旧写在循环外面。只有控制循环启停的 i 相关逻辑放到 for 头部。

5. 小结

while、do while、for 三种循环，底层本质都是重复执行代码块，依靠条件判断决定是否停止，它们之间很多场景是可以互相改写替换的。

但是三者有各自的定位：
while：适合不确定循环次数，先判断再执行；
do while：适合不确定循环次数，要求至少执行一次；
for：适合有明确计数器、循环次数可预估的遍历场景。

在实际开发里，计数器遍历场景占比非常高，所以 for 循环的使用频率远高于 while 和 do while，也是我们后续写数组遍历最常用的语法，大家一定要熟练掌握。