JavaScript while 与 do-while 循环

程序经常要做重复的事情。比如把 1 加到 100，写一百行加法不现实。循环就是让一段代码反复执行的结构。这篇讲 while 和 do-while 两个循环，下一篇讲最常见的 for 循环。

判断一个条件是否成立靠的是布尔值，循环和上一篇的 if 都依赖条件判断，只不过 if 只判断一次，循环会反复判断直到条件不成立。

while 循环

while 的流程是先判断条件，为 true 就执行循环体，执行完再判断，直到条件为 false 才停下来。

while (条件) {
  // 反复执行的代码
}

一个循环要能正常工作需要三个要素，初始值、循环条件、条件的更新。以 1 加到 100 为例

let sum = 0;        // 存总和
let i = 1;          // 初始值，从 1 开始加

while (i <= 100) {  // 循环条件，i 不超过 100 就继续
  sum = sum + i;    // 把 i 累加进 sum
  i = i + 1;        // 更新，i 自增 1
}

console.log(sum);   // 输出 5050

i 从 1 开始，每轮加进 sum 后自增 1，加到 101 时条件 101 <= 100 为 false，循环结束。sum 和 i 都需要重新赋值，所以用 let 声明。

条件更新非常重要。如果漏掉 i = i + 1，i 永远是 1，条件永远为 true，循环永远不会结束。

无限循环

条件永远为 true 且循环变量不更新，循环就停不下来，这叫无限循环。浏览器里会一直卡住，页面失去响应，只能关掉页面。

// 危险示例，千万不要运行
while (true) {
  console.log('停不下来');
}

写循环时想清楚三要素，特别是更新语句，确认每次循环条件都会往 false 靠近。不确定时可以先用小数字测试，或者配合下面的 break 控制退出。

do-while 循环

do-while 和 while 只有一个区别。它先执行一次循环体，再判断条件。所以无论条件是否成立，循环体至少执行一次。

do {
  // 先执行一次的代码
} while (条件);

对比看差别。同样的代码 while 可能一次都不执行，do-while 必定执行一次。

let a = 10;
while (a < 5) {
  console.log('while 执行了');
}
// 条件为 false，一次都不执行

let b = 10;
do {
  console.log('do-while 执行了');
} while (b < 5);
// 先执行一次再判断，所以输出一次

do-while 适合至少要执行一次的场景。比如让用户输入数字，无论第一次输入什么都要先读一次，判断不对再继续读。

// 模拟一次输入，真实场景中从输入框读取
let input = '';

do {
  input = 'hello';        // 用户输入了内容
  console.log('读到内容 ' + input);
} while (input === '');   // 输入为空就继续读

这里先执行读取再判断。模拟输入不为空，判断条件为 false，循环只执行一次就结束。如果用户没输入，条件成立，会继续循环直到读到内容。

break 提前跳出

循环里可以用 break 立刻结束整个循环，后面的循环体不再执行。适合找到目标就收工的场景。比如在 1 到 100 里找第一个能被 7 整除的数。

let n = 1;

while (true) {
  if (n % 7 === 0) {
    console.log('找到了 ' + n); // 输出 找到了 7
    break;                      // 跳出循环
  }
  n = n + 1;
}

这个例子故意把条件写成 true，靠循环体内的 break 控制退出。while(true) 加 break 是常见的写法，退出时机由内部判断决定，也不容易漏掉更新语句。

小结

while 先判断后执行，条件为 false 时一次都不执行，循环三要素是初始值、条件、更新。
do-while 先执行后判断，至少执行一次，适合必须执行一次的输入验证场景。
忘记更新循环变量会产生无限循环，卡死页面，务必确认条件最终会变为 false。
break 可以立即结束整个循环，用于提前找到目标就退出的场景。

JavaScript switch 语句

JavaScript for 循环