while 是 JavaScript 里最简单的循环结构，只有一个条件表达式，条件为真就一直执行循环体。和 for 相比它把计数器的声明和推进都交给了我们自己管，所以更适合「不知道要循环多少次，只知道什么时候该停」的场景：读队列直到空、轮询直到状态就绪、按条件反复折半查找。反过来说，需要固定次数遍历时用 for 更紧凑，因为它把初始化和递增都收进了头部一行。

这篇过一遍 while 的执行顺序、和 do...while 的差别，以及 break / continue / return 三种中断方式在 while 里的实际表现。

作用

while 语句可以在某个条件表达式为真的前提下，循环执行指定的一段代码，直到那个表达式不为真时结束循环。

条件在每轮循环体执行之前求值，所以如果第一次判断就是假，循环体一次都不会执行。条件表达式不要求返回布尔值，任何值都会按真值规则转换，0、''、null、undefined、NaN 这几个假值会让循环停下。

示例

下面这段输出 1,2,3 而不是 0,1,2，因为 n++ 写在 console.log 前面，打印时 n 已经加过了。这也是 while 和 for 的一个实际差别：for 的自增在循环体之后自动执行，while 里我们把它放在哪，输出就跟着变。

let n = 0;

while (n < 3) {
  n++;
  console.log(n);
}
// 输出 1,2,3

do...while：至少执行一次

有个变体是 do...while，它把条件判断挪到了循环体之后，所以循环体保证至少执行一次。需要「先做一次，再看要不要继续」时用它最合适，比如先发一次请求再根据结果决定是否重试。注意结尾的分号是语法要求的。

let n = 10;

do {
  console.log(n); // 输出 10，虽然条件一开始就不满足
  n++;
} while (n < 3);

同样的逻辑换成 while (n < 3) 会一行都不打印，因为进门那次判断就没通过。

避免死循环

while 最常见的事故是忘记推进条件里用到的变量，导致条件永远为真，页面直接卡死。写的时候养成习惯：写完 while (...) 立刻确认循环体里有一处改变了条件的结果。

let n = 0;

while (n < 3) {
  console.log(n); // 少了 n++，条件永远成立，死循环
}

如果循环的终止依赖外部状态（比如等某个标志位翻转），最好再加一道次数上限兜底，避免状态永远不变时整个页面失去响应：

let tries = 0;

while (!ready && tries < 100) {
  tries++;
  // ...
}

中断循环

和 for 一样，while 里可以用 break、continue、return 改变流程，但 continue 在 while 中有个特别需要留意的点，下面分别看。

使用 break

break 直接结束整个循环。下面这段在 n 等于 3 时跳出，所以只打印了 1 和 2。

let n = 0;

while (n < 5) {
  n++;
  if (n === 3) {
    break;
  }
  console.log(n);
}

下图是控制台输出，只有 1、2 两行。n 增到 3 那轮在 console.log 之前就 break 了，后面的 4、5 也不会再有机会执行。

使用 continue

continue 只跳过当前这一轮剩下的语句。这里要特别注意：n++ 写在 continue 之前，所以计数器照样推进了，循环能正常结束。如果把 n++ 挪到 continue 之后，n 停在 3 就再也不变，会变成死循环——这是 while 配 continue 时最典型的坑，for 因为自增在头部不受影响。

let n = 0;

while (n < 5) {
  n++;
  if (n === 3) {
    continue;
  }
  console.log(n);
}

输出如下图：1、2、4、5，只缺了 3。和上一张 break 的图对比，这里 4 和 5 都打出来了，说明循环没有被终止，只是漏掉了 n 等于 3 的那次打印。

使用 return

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

return 是函数级的控制流，写在函数外会报语法错误。它比 break 更彻底：不仅跳出循环，整个函数都结束，循环之后的代码也不会执行。

function test() {
  let n = 0;

  while (n < 5) {
    n++;
    if (n === 3) {
      return;
    }
    console.log(n);
  }
}

test();

下图的输出是 1、2，末尾多了一行 undefined。那行 undefined 是控制台在显示 test() 的返回值，return 没跟具体值时函数返回 undefined。它正好体现了 return 和 break 的分界：break 之后函数还会继续执行循环后面的语句，return 则是当场把函数结束并交出返回值。实际开发里这个特性很好用，在循环中找到目标就 return 出去，不用再额外维护一个标志变量。