反复处理是用于在满足固定次数或条件的情况下重复相同处理的语法。JavaScript 提供了可用于迭代的 for 和 while 语句。在本文中，我将解释如何在 JavaScript 中使用循环。
目录
10-1 使用 for 语句重复过程
10-2 在for语句中执行for语句
10-3 使用 while 语句重复处理
10-4 使用 do…while 语句重复处理
10-5 重复使用 for…in 语句
10-6 如何使用 break 语句
10-7 如何使用 continue 语句
10-8 在 break 和 continue 语句中指定标签
10-1 使用 for 语句重复过程
使用 for 语句重复过程
这一节，我们将解释如何使用 for 语句，它是 JavaScript 中迭代的方法之一。for 语句重复指定的次数。
for语句的基本格式
for 语句可以重复指定的次数。格式如下。
for（初始化表达式；条件表达式；改变表达式）{
语句执行 1;
语句执行 2;
...
}如果只有一个语句要重复，则块 {} 可以省略。
for（初始化表达式；条件表达式；改变表达式）
要执行的语句；具体看的话比较容易理解，所以我们来看一个简单的例子。
for (let i = 1; i < 3; i++){
console.log("i = " + i);
}
console.log('end');for 语句首先执行一次初始化表达式。let i = 1 部分是初始化表达式。初始化表达式只执行一次。
for (let i = 1; i < 3; i++){
console.log("i = " + i);
}然后对条件表达式求值一次。条件表达式是 i < 3 部分。
for (let i = 1; i < 3; i++){
console.log("i = " + i);
}如果条件表达式的计算结果为 true，则按顺序执行 for 语句块中的处理。如果返回 false，处理将移至下一个 for 语句。在这个示例中，for语句块中只写了一条语句，但是如果写了多条语句，则从顶部开始依次执行。
for (let i = 1; i < 3; i++){
console.log("i = " + i);
}执行完块中的所有操作后，在最后执行一次变量表达式。变量是 i++ 部分。
for (let i = 1; i < 3; i++){
console.log("i = " + i);
}我们回到开头，这次在不执行初始化表达式的情况下评估条件表达式。如果返回true，则执行for语句块中的处理，执行末尾的变量表达式，返回开头。重复此操作，直到条件表达式返回 false。
现在，让我们实际看看从执行 for 语句到流程移动到下一个 for 语句的每个步骤。
-- 第一次迭代 --
1）在初始化表达式中将1赋值给变量i
2) 条件表达式 i < 3 为真
3) console.log("i = " + i); 被执行
4) Variant i++被执行，变量i的值变为2
-- 第二次迭代 --
5) 条件表达式 i < 3 为真
6) console.log("i = " + i); 被执行
7) Variant i++被执行，变量i的值变为3
-- 第三次迭代 --
8) 条件表达式 i < 3 为假
9）for语句执行结束，进入下一个流程
10) console.log('end'); 被执行如果您实际运行前面的示例，将向控制台输出以下内容。
for (let i = 1; i < 3; i++){
console.log("i = " + i);
}
console.log('end');
>> i = 1
>> i = 2
>> endfor 语句的各种用途
当你想重复指定的次数时，经常使用 for 语句。统计重复次数的是初始化表达式和条件表达式中描述的变量，但是在for语句块中可以引用这个变量的值，所以可以使用初始化、条件表达式和变化表达式。有通过设计各种方式来使用它。
例如，以下在控制台上按顺序显示 3 的个位数倍数。不是将变量的值递增 1，而是将变量递增 3。
for (let i = 3; i < 10; i += 3){
console.log("i = " + i);
}
>> i = 3
>> i = 6
>> i = 9现在将 5 到 1 的数字打印到控制台。我们不是在变化公式中将变量的值递增 1，而是将其递减 1。条件表达式也相应改变。
for (let i = 5; i > 0; i--){
console.log("i = " + i);
}
>> i = 5
>> i = 4
>> i = 3
>> i = 2
>> i = 1for 语句还用于按顺序检索数组的元素。获取数组中元素的数量并在条件表达式中使用。
const color = ['Red', 'Blue', 'Green'];
for (let i = 0; i > color.length; i++){
console.log(color[i]);
}
>> Red
>> Blue
>> Green使用逗号运算符改变多个变量
通常，for 语句在初始化表达式或更改表达式中描述一个变量，但您可以使用逗号运算符来初始化或更改多个变量的值。
for（初始化表达式1，初始化表达式2；条件表达式；改变表达式1，改变表达式2）{
语句执行 1;
语句执行 2;
...
}例如：
for (let i = 1, j = 4; i < 5; i++, j--){
console.log("i = " + i + ", j = " + j);
}
>> i = 1, j = 4
>> i = 2, j = 3
>> i = 3, j = 2
>> i = 4, j = 1初始化表达式声明并初始化变量 i 和 j，变体表达式将变量 i 和 j 一起变异。我不认为它经常用于同时更改多个变量，但请记住这一点。
请注意，不是同时更改多个变量，也可以执行所有组合。
10-2 在for语句中执行for语句
通过在 for 语句中嵌套执行另一个 for 语句，可以在按顺序更改多个变量的同时执行迭代处理。在这里，我将解释如何在 JavaScript 中的 for 语句中执行 for 语句以及如何使用它。
在for语句中执行for语句
任何语句都可以写在for语句重复执行的语句中，所以可以再写一个for语句。请参阅以下示例。
for (let i = 0; i < 3; i++){
for (let j = 0; j < 3; j++){
console.log('i = ' + i + ', j = ' + j);
}
}本例中，当外层的for语句迭代一次时，块中的for语句从头到尾执行。重复此操作直到外部迭代结束。
如果你真的运行这段代码，你会在你的控制台中看到类似这样的东西：
for (let i = 0; i < 3; i++){
for (let j = 0; j < 3; j++){
console.log('i = ' + i + ', j = ' + j);
}
}
>> i = 0, j = 0
>> i = 0, j = 1
>> i = 0, j = 2
>> i = 1, j = 0
>> i = 1, j = 1
>> i = 1, j = 2
>> i = 2, j = 0
>> i = 2, j = 1
>> i = 2, j = 2
通过在内部 for 语句块内执行更多 for 语句，您可以组合三个迭代。
for (let i = 0; i < 3; i++){
for (let j = 0; j < 3; j++){
for (let k = 0; k < 3; k++){
console.log('i = ' + i + ', j = ' + j + ', k = ' + k);
}
}
}如何使用多个循环
如果像这样执行嵌套在 for 语句中的 for 语句，将执行每次迭代中使用的所有变量组合。因此，它可以用于按顺序提取多维数组的元素，例如下面的。
const result = [
[88, 78, 82],
[92, 64, 76]
];
for (let i = 0; i < 2; i++){
for (let j = 0; j < 3; j++){
console.log('成績 = ' + result[i][j]);
}
}
>> 成績 = 88
>> 成績 = 78
>> 成績 = 82
>> 成績 = 92
>> 成績 = 64
>> 成績 = 76您还可以使用单个 for 语句同时更改多个变量。请参阅 使用逗号运算符改变多个变量。
10-3 使用 while 语句重复处理
我们将解释如何使用 while 语句，这是在 JavaScript 中迭代的方法之一。while 语句在条件表达式返回 true 时重复该过程。
while语句的基本格式
while 语句重复这个过程，而写在括号 () 中的条件表达式返回 true。格式如下。
while (条件表达式) {
要执行的语句 1;
要执行的语句 2;
...
}如果只有一个语句要重复，则块 {} 可以省略。
while (条件表达式)
要执行的语句; for语句主要用于重复指定次数，而while语句主要用于无限次重复，直到不再满足指定条件。
此外，与 for 语句不同，没有初始化表达式或更改表达式这样的东西。因此，需要自己写一些代码，让条件表达式在while语句重复执行的块中发生变化。
看看我们的简单示例。
let num = 3;
while (num < 100){
console.log(num);
num = num * 3;
}
console.log('end');由于while 语句中没有初始化表达式，因此必要变量的声明和初始化都在while 语句之外进行。
let num = 3;
while (num < 100){
console.log(num);
num = num * 3;
}while 语句首先对条件表达式求值一次。条件表达式是 num < 100 部分。
while (num < 100){
console.log(num);
num = num * 3;
}如果条件表达式的计算结果为 true，则按顺序执行 while 语句块中的处理。如果返回 false，处理将移至下一个 while 语句。
与 for 语句不同，while 语句必须描述改变条件表达式的处理。在这种情况下，如果没有 num = num * 2; 语句，while 语句将是一个无限循环，因为条件表达式将永远保持为真。
while (num < 100){
console.log(num);
num = num * 3; // 要执行的程序
}执行完块中的所有处理后，返回到开头，再次对条件表达式求值。如果返回 true，则执行 while 语句块内的处理。重复此操作，直到条件表达式返回 false。
现在，让我们实际看看从 while 语句的执行到 while 语句的下一步处理的每个步骤。
1) 将初始值 3 赋给变量 num
-- 第一次迭代 --
2) 条件表达式 num < 100 为真
3) console.log(num); 被执行
4) 存储在变量 num 中的值增加三倍为 9
-- 第二次迭代--
5) 条件表达式 num < 100 为真
6) console.log(num); 被执行
7) 存储在变量 num 中的值增加三倍
8) 条件表达式 num < 100 为真
9) console.log(num); 是执行
10) 存储在变量 num 中的值增加了三倍到 81
--第 4 次迭代 --
11) 条件表达式 num < 100 为真
12) console.log(num); 被执行
13) 存储在变量 num 中的值增加了三倍到243
-- 第 5 次迭代 --
14) 条件表达式 num < 100 为假
15) while 语句执行结束，进入下一个流程
16) console.log('end'); 被执行如果您实际运行前面的示例，将向控制台输出以下内容。
let num = 3;
while (num < 100){
console.log(num);
num = num * 3;
}
console.log('end');
>> 3
>> 9
>> 27
>> 81
>> endwhile 语句的各种用途
当条件表达式为真时，while 语句无论重复多少次，都适用于重复次数不固定的处理。
在下面的示例中，数字从 1 开始按顺序添加并重复，直到总值超过 10。
let total = 0;
let count = 1;
while (total < 10){
total += count;
count ++;
console.log(total);
}
console.log('end');
>> 1
>> 3
>> 6
>> 10
>> end同样，确保条件表达式可以为假，以避免 while 语句中的无限循环。
10-4 使用 do…while 语句重复处理
我将解释如何使用 do…while 语句，这是在 JavaScript 中迭代的方法之一。do while 语句与 while 语句的相同之处在于它会在条件表达式返回 true 时重复该过程，但不同的是重复过程总是执行一次。
do…while 语句的基本格式
do…while 语句重复该过程，而写在括号 () 中的条件表达式返回 true。格式如下。
do{
要执行的语句1;
要执行的语句2;
...
}while (条件表达式);如果只有一个语句要重复，则块 {} 可以省略。
do
要执行的语句;
while (条件表达式);请注意，while 结尾需要分号 (;)。
do…while 语句类似于 while 语句，除了 while 语句首先计算条件表达式并且可能永远不会迭代，而 do…while 语句的不同之处在于迭代过程总是执行一次，因为在执行迭代过程后评估条件表达式。
看看我们的简单示例。
let num = 4;
do {
console.log(num);
num = num * 4;
}while (num < 100);
console.log('end');由于在 do…while 语句中没有初始化表达式，因此必要变量的声明和初始化在 do…while 语句之外进行。
let num = 4;
do {
console.log(num);
num = num * 4;
}while (num < 100);
console.log('end');do…while 语句首先执行 do…while 语句块内的处理一次。在 do…while 语句和 while 语句中，您必须自己编写更改条件表达式的处理。
do {
console.log(num);
num = num * 4; // 要执行的语句
}while (num < 100);块中的处理完成后，将在此处评估条件表达式。条件表达式是 num < 100 部分。
do {
console.log(num);
num = num * 4;
}while (num < 100);如果条件表达式的计算结果返回 true，则返回到 do…while 语句的开头并按顺序执行块中的处理。如果返回 false，处理将移至下一个 do…while 语句。重复此操作，直到条件表达式返回 false。
现在，让我们实际看看从执行 do…while 语句到执行 do…while 语句后的下一个处理的每个步骤。
1) 将初始值 4 赋给变量 num
-- 第一次迭代 --
2) console.log(num); 被执行
3) 变量 num 中存储的值乘以 4 变成 16
4) 条件表达式 num < 100 为真
-- 第二次迭代 --
5) console.log(num); 被执行
6) 变量 num 中存储的值乘以 4 变为 64
7) 条件表达式 num < 100 为真
-- 第三次迭代 --
8) console.log(num); 被执行
9) 变量 num 中存储的值翻了四倍为 256
10) 条件表达式 num < 100 为假
11) do...while 语句执行结束并转到下一个流程
12) console.log('end'); 被执行如果您实际运行前面的示例，将向控制台输出以下内容。
let num = 4;
do {
console.log(num);
num = num * 4;
}while (num < 100);
console.log('end');
>> 4
>> 16
>> 64
>> enddo…while 语句的各种用途
do…while 语句在条件表达式为真时不管重复多少次，因此适用于重复次数不固定的处理。
在下面的示例中，使用随机数生成从 1 到 6 的数字，当输出 6 时，do…while 语句结束。即使输出了6，输出到控制台后就结束了。每次运行结果都不一样，不知道要迭代多少次。
let dice;
do {
dice = Math.floor(Math.random() * 6) + 1;
console.log(dice);
} while (dice != 6);
console.log('end');
>> 2
>> 4
>> 3
>> 2
>> 6
>> end10-5 重复使用 for…in 语句
我将解释如何使用 for…in 语句，这是在 JavaScript 中迭代的方法之一。for…in 语句按顺序获取对象中包含的属性名称。
for…in语句的基本格式
for…in 语句可以按顺序获取对象中包含的属性名。格式如下。
for (变量名 in 对象){
要执行的语句1;
要执行的语句2;
...
}如果只有一个语句要重复，则块 {} 可以省略。
for (变量名 in 对象)
要执行的语句;例如，我们以一个对象字面量为例：
const fruit = {orange:170, apple:90, lemon:110};该对象包含三个属性，我们使用 for…in 语句按顺序获取属性名称 orange、apple 和 lemon。看看下面的示例。
const fruit = {orange:170, apple:90, lemon:110};
for (let i in fruit){
console.log("fruit." + i + ' = ' + fruit[i]);
}
console.log('end');for…in 语句首先评估对象。
for (let i in fruit){
console.log("fruit." + i + ' = ' + fruit[i]);
}如果对象为 null 或未定义，则转到下一个 for…in 语句。否则，将来自对象的属性名存储在变量中，然后执行块内的处理。
for (let i in fruit){
console.log("fruit." + i + ' = ' + fruit[i]);
}此时，属性名称作为字符串值存储在变量中。因此，当您使用属性名称引用属性的值时，必须使用格式对象名称[属性名称]，而不是格式对象名称.属性名称。
执行完块中的所有处理后，再次返回开始并对对象进行评估。重复直到对象返回 null。
如果您实际运行前面的示例，将向控制台输出以下内容。
const fruit = {orange:170, apple:90, lemon:110};
for (let i in fruit){
console.log("fruit." + i + ' = ' + fruit[i]);
}
console.log('end');
>> fruit.orange = 170
>> fruit.apple = 90
>> fruit.lemon = 110
>> end在数组上使用 for…in 语句
for…in 语句也可以与作为对象之一的数组一起使用。对于数组，按顺序获取索引，而不是属性名称。
看看下面的示例。
const fruit = ['orange', 'apple', 'lemon'];
for (let i in fruit){
console.log("fruit." + i + ' = ' + fruit[i]);
}
console.log('end');
>> fruit.0 = orange
>> fruit.1 = apple
>> fruit.2 = lemon
>> end依次获取数组的索引，进行迭代过程。
10-6 如何使用 break 语句
如果使用 break 语句，则可以结束编写了 break 语句的最内层迭代处理，并继续进行下一条语句。在这里，我将解释如何在 JavaScript 中使用 break 语句。
如何使用 break 语句
执行 break 语句时，写入 break 语句的最内层迭代结束并继续进行下一个处理。格式如下。
break;- 有关如何使用标签执行 break 语句的详细信息，请参阅 “使用 break 和 continue 语句指定标签”。
break 语句的目标是 for 语句、while 语句、do…while 语句、for…in 语句、for…of 语句和 switch 语句。（有关如何在 switch 语句中使用它的信息，请参阅 “使用 switch 语句的条件分支”。）
分别在for语句和while语句中执行break语句时是如何处理的，请参考下文。
看看下面的示例。
let num = 1;
for (let i = 0; i < 10; i++){
console.log(num);
num *= 2;
if (num > 10){
console.log('如果超过10，就从for循环中跳出')
break;
}
}
console.log('end');依次将变量 num 的值加倍，将数值输出到控制台。迭代次数设置为10，但是当变量num的值超过10时，迭代过程在该点结束，for语句进入下一个过程。
如果您实际运行前面的示例，将向控制台输出以下内容。
let num = 1;
for (let i = 0; i < 10; i++){
console.log(num);
num *= 2;
if (num > 10){
console.log('如果超过10，就从for循环中跳出')
break;
}
}
console.log('end');
>> 1
>> 2
>> 4
>> 8
>> 如果超过10，就从for循环中跳出
>> end在上面的示例中，描述 break 语句的最内层块是 if 语句，但由于 if 语句不是 break 语句的目标，因此它退出了外部 for 语句块。
现在尝试在 while 语句中使用 break 语句。在下面的示例中，while 语句的条件表达式为真，因此 while 语句将陷入死循环，但如果随机数为 6，则会执行 break 语句，while 处理进入下一条语句.
当您实际运行示例时，以下内容将输出到控制台。
while(true){
let dice = Math.floor(Math.random() * 6) + 1;
console.log(dice);
if (dice == 6){
break;
}
}
console.log('end');
>> 4
>> 1
>> 2
>> 1
>> 6
>> end10-7 如何使用 continue 语句
可以使用 continue 语句跳过写入 continue 语句的最内层迭代的其余部分，并继续进行下一次迭代。在这里，我将解释如何在 JavaScript 中使用 continue 语句。
如何使用 continue 语句
当执行 continue 语句时，它会跳过迭代的其余部分并开始下一次迭代。格式如下。
continue ;continue 语句可以是 for 、 while 、 do…while 、 for…in 和 for…of 语句。请参阅下面的 for 语句、while 语句和 do…while 语句在执行 continue 语句时的处理方式。
看看下面的示例。
for (let i = 1; i < 10; i++){
if (i % 3 == 0){
continue;
}
console.log(i);
}
console.log('end');在迭代过程中将变量 i 的值输出到控制台。当变量i的值为3的倍数时，跳过输出到控制台的过程，进行下一次迭代过程。
如果您实际运行前面的示例，将向控制台输出以下内容。
for (let i = 1; i < 10; i++){
if (i % 3 == 0){
continue;
}
console.log(i);
}
console.log('end');
>> 1
>> 2
>> 4
>> 5
>> 7
>> 8
>> end在前面的示例中，描述continue 语句的最内层块是if 语句，但由于if 语句不是continue 语句的目标，因此跳过了外部for 语句的剩余处理。
10-8 在 break 和 continue 语句中指定标签
JavaScript 可以为任何语句指定标签。通过预先指定标签，当执行break语句或continue语句时，可以退出指定标签的循环处理或进入下一个循环处理。本节说明如何为 break 和 continue 语句指定标签。
如何设置标签
您可以为 JavaScript 中的任何句子指定标签。格式如下。
标签名称：句子下面是 while 语句标有标签名称 myLoop 的情况。
int count = 1;
myLoop: while (count < 10){
count++;
}
标签可以附加到任何语句，但标签只能用在 break 和 continue 语句中。
在 break 语句中指定标签
如果要在 break 语句中使用标签，请使用以下格式。
break 标签名称;如果在没有标签的情况下执行 break 语句，则描述 break 语句的最内层迭代处理结束并移动到下一个处理。如果执行带有标签的 break 语句，则可以移动到带有指定标签的下一条语句。
检查您是否首先不使用标签。请看下面的示例。
for (let i = 1; i < 4; i++){
for (let j = 1; j < 4; j++){
if ( i * j > 5){
break;
}
console.log(i + '*' + j + ' = ' + i * j);
}
// break 执行 break 时处理移至此处
}两个for语句里面写了一个break语句。如果 break 语句没有指定标签，则处理移动到下一个最内层迭代，因此在上述情况下，处理移动到内部的 for 语句。
如果您实际运行前面的示例，将向控制台输出以下内容。
for (let i = 1; i < 4; i++){
for (let j = 1; j < 4; j++){
if ( i * j > 5){
break;
}
console.log(i + '*' + j + ' = ' + i * j);
}
// break 执行 break 时处理移至此处
}
>> 1*1 = 1
>> 1*2 = 2
>> 1*3 = 3
>> 2*1 = 2
>> 2*2 = 4
>> 3*1 = 3接下来，让我们看看使用标签时会发生什么。请看下面的示例。
loop: for (let i = 1; i < 4; i++){
for (let j = 1; j < 4; j++){
if ( i * j > 5){
break loop;
}
console.log(i + '*' + j + ' = ' + i * j);
}
}
// 执行 break 时处理移至此处两个for语句里面写了一个break语句。break 语句指定了标签 loop ，因此当执行 break 语句时，处理移动到下一个标签为 loop 的外部 for 语句。
如果您实际运行前面的示例，将向控制台输出以下内容。
loop: for (let i = 1; i < 4; i++){
for (let j = 1; j < 4; j++){
if ( i * j > 5){
break loop;
}
console.log(i + '*' + j + ' = ' + i * j);
}
}
// 执行 break 时处理移至此处
>> 1*1 = 1
>> 1*2 = 2
>> 1*3 = 3
>> 2*1 = 2
>> 2*2 = 4确认在执行标记的 break 语句时，流程移动到下一个外部 for 语句。
在 continue 语句中指定标签
在 continue 语句中使用标签时，请使用以下格式：
continue标签名称；如果执行continue语句时不带标签，则可以跳过描述continue语句的最内层迭代的剩余处理，进行下一次迭代。如果执行带有标签的 continue 语句，则可以移动到带有指定标签的语句的下一次迭代。
检查您是否首先不使用标签。请看下面的示例。
for (let i = 1; i < 4; i++){
for (let j = 1; j < 4; j++){ //执行continue时转到这里
if ( (i * j) % 2 == 0){
continue;
}
console.log(i + '*' + j + ' = ' + i * j);
}
}continue语句写在两个for语句里面。如果 continue 语句没有指定标签，它将跳过最内层迭代的其余部分并继续进行下一次迭代。继续前进。
如果您实际运行前面的示例，将向控制台输出以下内容。
for (let i = 1; i < 4; i++){
for (let j = 1; j < 4; j++){ // 执行continue时转到这里
if ( (i * j) % 2 == 0){
continue;
}
console.log(i + '*' + j + ' = ' + i * j);
}
}
>> 1*1 = 1
>> 1*3 = 3
>> 3*1 = 3
>> 3*3 = 9接下来，让我们看看使用标签时会发生什么。请看下面的示例。
loop: for (let i = 1; i < 4; i++){ //执行continue时转到这里
for (let j = 1; j < 4; j++){
if ( (i * j) % 2 == 0){
continue loop;
}
console.log(i + '*' + j + ' = ' + i * j);
}
}continue语句写在两个for语句里面。由于continue语句指定了label loop，所以当continue语句执行时，会移动到带有label loop的外层for语句的下一次迭代。
如果您实际运行前面的示例，将向控制台输出以下内容。
loop: for (let i = 1; i < 4; i++){ //执行continue时转到这里
for (let j = 1; j < 4; j++){
if ( (i * j) % 2 == 0){
continue loop;
}
console.log(i + '*' + j + ' = ' + i * j);
}
}
>> 1*1 = 1
>> 3*1 = 3经确认，当执行带有标签的continue语句时，迭代过程是在外层for语句之后开始的
