JavaScript 循环结构详解：for、while、do...while 及 break/continue 用法

循环结构概述

大家好，在前文介绍条件分支的基础上，今天我们继续学习循环结构。所谓循环，即重复执行相同的操作。正常的循环由程序逻辑控制，若出现死循环则属于代码 Bug。因此，学会调试 Bug 至关重要。在基础语法讲解完毕后，后续章节将专门介绍浏览器调试工具的使用，从而让程序运行完全处于掌控之中。

JavaScript 中的循环结构主要包括 for、while 和 do...while。其中，for 循环有两种形式：一种是通过数字变量的变化来控制循环次数，另一种是 for...in 形式，用于遍历属性或下标。虽然 for...in 并非核心，但其作用类似于 C# 语言中的 foreach，后续将详细展开。

for 循环详解

下面从 for 循环开始讲解。

for(var i = 0;i<10;i++){
  console.log(i);
}

此处涉及一个新的运算符，即前文未提及的小于运算符（<），其运算结果为布尔值（true 或 false）。

上述代码成功打印了 1 到 9 之间的数字。观察执行步骤：第一步（声明变量）仅执行一次；第二步判断条件是否成立（与 if 后的条件类型一致），若成立则执行第三步（循环体内容）；第三步执行完毕后，执行第四步使变量发生变化，随后再次回到第二步判断条件。循环即通过这种交替方式持续进行。

注：解释第四步中的 i++，可理解为 i = i + 1。此前声明 i = 0，执行 i = i + 1 即重新赋值使 i 变化。例如 i 从 0 变为 1，第一圈打印 0，i 变为 1；第二圈打印 1，i 变为 2……第十圈打印 9，i 变为 10。当再次判断 i < 10（即 10 < 10）时，返回 false，条件不成立，循环终止。

上述控制完全按意图执行了 10 次。若需在中途跳出循环，是否可行？答案是肯定的，这需要用到关键字 break。请看示例代码。

for(var i = 0;i<10;i++){
  console.log(i);
  //当i等于5的时候，我们就跳出循环
  if(i == 5){
    break;
  }
}

如代码所示，只要满足特定条件，即可在任意时刻强制跳出循环，从而中断后续步骤的执行。

既然有强制打断，是否存在强制继续循环的机制？答案是肯定的，这需要用到另一个关键字：continue。

for(var i = 0;i<10;i++){
  //当i小于5的时候，我们强制循环
  if(i < 5){
    continue;
  }
  console.log(i);
}

这是否达到了预期效果？当 i 小于 5 时，循环被强制继续，后续的打印语句未执行即进入下一次循环；当 i 大于或等于 5 时，才打印 i 的值。

for...in 与数组遍历

接下来讲解 for...in。在此之前，需先了解一种数据类型：数组。前文未深入讲解是因为此时理解尚有难度，现仅介绍一维数组，暂不涉及二维或多维数组。请看示例代码。

//声明一个数组，用中括号包含，组里面的内容单位用逗号分隔，数组可以包含各种类型的值
var arr = [1,2,"abc","MrDream",true,false,null];

//数组取值就是用下标来获取，在程序中，第一个值的下标就是0，第二个才是1，后面的以此类推
//在这里 arr 数组里面，我们放了7个值进去，所以最大的下标就是6

接下来，我们演示如何获取数组中的单个值。

arr[0] // 1
arr[1] // 2
arr[2] // "abc"
arr[3] // "MrDream"
arr[4] // true
arr[5] // false
arr[6] // null

执行上述代码，验证结果是否符合预期。

结果与预想一致。

通过上述示例，我们可以获取并打印数组中的值。但每次手动编写是否繁琐？答案是肯定的，此时可以使用循环来简化操作。

var arr = [1,2,"abc","MrDream",true,false,null];

for(var i = 0;i<7;i++){
  console.log(arr[i]);
}

可以看到循环的便捷之处。这里使用一个变量来模拟下标，下面我将演示如何使用 for...in 进行循环。

var arr = [1,2,"abc","MrDream",true,false,null];

for(var i in arr){
  console.log(arr[i]);
}

在 JavaScript 中，for...in 用于循环数组的下标和对象的属性。对象相关内容后续再讲，此处仅讨论数组。for...in 的执行步骤如下：var i 声明一个变量作为下标（针对数组），in 指定遍历的集合，依次获取下标。若数组为空，循环将直接终止。此理解较为抽象，建议多写几次代码以加深印象。

现在验证在数组中获取的变量是否确实为下标。

从示例可见，获取的变量确实为下标。

while 与 do...while 循环

接下来讲解另一种新的循环方式：while。

while(条件){
  //执行
}

此时“条件”一词不再陌生，其类型与 if 后的条件相同。仍以售票为例进行说明。

var tickets = 10;//车票总数量

//条件，当车票数量大于0时，就执行售票行为
while(tickets > 0){
  console.log("目前还有"+ tickets +"张可售车票，下一位");//这里我们用到了字符串拼接
  tickets --; //卖出一张车票，我们就减少一张
}

注：此处接触到一个前文未提及的运算符 --，即变量自减 1；其用法与前述 ++ 相同。

此处恰好执行了 10 次售票动作，这种循环方式是否简单？其逻辑为：首先判断条件是否成立，若成立则执行循环体内的行为，直到条件不成立为止。读者可能会疑惑，这种循环与 for 循环类似，都是先满足条件再执行内容。那么，是否存在一种先执行一次循环体内容，再判断条件是否成立的循环？这种研究精神值得肯定，JavaScript 确实提供了这样的循环，即 do...while。先看语法。

do{
  //执行
}while(条件)

此处先执行一次循环体内容，再判断条件是否成立。若条件成立，则再次执行前面的内容。

下面以“人生励志赚钱”为例进行讲解：路人甲想娶媳妇，但仅有 10 万元存款，而娶媳妇需要 50 万。如何办到？唯有努力工作，当存款足够时，即可开心娶妻。

var money = 100000; //路人甲有10万元存款

do{
  console.log("辛苦工作1年，存下了10万"); 
  money += 100000; //工作后，有钱了，就修改一次变量
}while(money < 500000); //条件是，存款不足50万，又继续执行工作行为

如代码所示，没钱时先努力赚钱。路人甲经过 4 年不懈努力，最终存够了 50 万（因已有 10 万元），成功娶妻，过上幸福生活。我们也应努力。

这样讲解，是否让大家立刻理解了 do...while 循环的方式？

总结一下，今天讲解了循环，包括 4 种循环方式：for、for...in、while、do...while。大家是否已学会？看一遍不过瘾，可反复观看。今日内容理解上略有难度，但多写多练，自然能熟练运用。