for 是 JavaScript 里最基础也最灵活的循环语句。虽然日常写数组遍历我们更常用 forEach、map 或者 for...of，但 for 仍然有它不可替代的位置：需要控制步长、需要倒序、需要在循环中途 break、或者对性能敏感的热点代码，for 都是最直接的选择。

这篇把它的语法结构、三个表达式各自可以省略到什么程度、以及 break / continue / return 三种中断方式的实际差别过一遍。理解了头部三个表达式的执行时机，后面那些看起来奇怪的写法就都能推出来了。

for 的作用

for 语句用于创建一个循环，它包含了三个可选的表达式，这三个表达式被包围在圆括号之中，使用分号分隔，后跟一个用于在循环中执行的语句

三个表达式的分工和执行时机是这样的：

初始化（var i = 0）：只在进入循环前执行一次，通常用来声明计数器。
条件判断（i < 3）：每轮迭代开始前求值，为真才执行循环体，为假就跳出。所以条件为假时循环体一次都不会执行。
迭代表达式（i++）：每轮循环体执行完之后才执行，然后回到第 2 步。

顺序记成「初始化 → 判断 → 循环体 → 迭代 → 判断 → …」就不会错。下面这个例子里 i++ 是在 console.log(i) 之后才跑的，这也是为什么输出从 0 开始而不是 1。

示例

for (var i = 0; i < 3; i++) {
  console.log(i);
}
// 输出 0，1，2

for 语句头部圆括号中的所有三个表达式都是可选的。

可选的意思是可以留空，但两个分号必须保留——for 靠分号来确定哪个位置是哪个表达式，少一个就是语法错误。下面按省略的位置逐个看。

初始化块中的表达式没有被指定

计数器在循环外面就已经声明好了，这种写法的好处是循环结束后 i 仍然可用，可以拿到它最终的值。

var i = 0;
for (; i < 3; i++) {
  console.log(i);
}
// 输出 0，1，2

条件块没有被指定 如果省略此表达式，则必须确保在循环体内跳出，以防创建死循环

条件位置留空时，规范规定它按 true 处理，等于永远满足。下面这个例子输出到 4 才停，注意 break 写在 console.log 后面：i 等于 4 这轮先打印了 4，才判断 i > 3 成立跳出。判断语句放在打印之前还是之后，结果就差一个值，这是省略条件表达式时最容易数错的地方。

for (var i = 0; ; i++) {
  console.log(i);
  if (i > 3) break;
}
// 输出 0，1，2，3，4

忽略所有的表达式

for (;;) 是最纯粹的无限循环形式，计数器声明、终止判断、自增全都搬进了循环体。它和 while (true) 完全等价，选哪个纯看习惯。对比上一个例子可以看出判断位置的影响：这里 if (i > 3) break 写在 console.log 之前，i 等于 4 时还没来得及打印就跳出了，所以只输出到 3。

var i = 0;

for (;;) {
  if (i > 3) break;
  console.log(i);
  i++;
}
// 输出 0，1，2，3

中断循环

有三个关键字能改变循环的正常流程，作用范围各不相同：break 结束整个循环，continue 只跳过当前这一轮，return 直接结束所在的函数。下面用同一个循环结构分别试一遍，看控制台输出的差别。

使用 break

条件满足时 break 立刻跳出循环，后面的迭代一次都不会再执行。

for (var i = 0; i < 5; i++) {
  if (i == 3) {
    break;
  }
  console.log(i);
}

下图是这段代码的控制台输出。只有 0、1、2 三行，i 等于 3 那轮在 console.log 之前就跳出了，3 和 4 都没有打印。

使用 continue

continue 只是结束当前这一轮，跳过它后面的语句，然后照常执行迭代表达式 i++ 进入下一轮。循环该跑多少次还是多少次。

for (var i = 0; i < 5; i++) {
  if (i == 3) {
    continue;
  }
  console.log(i);
}

输出如下图，0、1、2、4 四行，只缺了 3。对比上一张图，关键差别在于 4 打出来了：循环并没有终止，只是漏掉了 i 等于 3 的那次打印。

for 循环中使用 continue 的控制台输出，打印了 0、1、2、4，跳过了 3

使用 return

return 不能直接中断循环，必须放在函数中

return 属于函数级别的控制流，写在函数体外会直接报语法错误。放在函数里时它比 break 更彻底：不只跳出循环，整个函数都结束了，循环后面的代码也不会执行。

function test() {
  for (var i = 0; i < 5; i++) {
    if (i == 3) {
      return;
    }
    console.log(i);
  }
}

test();

输出和 break 那次一样是 0、1、2，但下图末尾多了一行 undefined，那是控制台在显示 test() 的返回值——return 后面没跟值，函数返回 undefined。这行输出正说明了两者的区别：break 只是跳出循环、函数继续往下走，return 是把函数整个结束掉并交出返回值。