JavaScript 循环

Created: October-14, 2018

在本教程中，你将学习如何使用 JavaScript 中的循环重复一系列操作。

JavaScript 中不同类型的循环

循环用于一次又一次地执行相同的代码块，直到满足某个条件。循环背后的基本思想是自动化程序中的重复任务以节省时间和精力。JavaScript 现在支持五种不同类型的循环：

while - 循环遍历代码块，直到条件评估为 true。
do … while - 遍历一段代码; 然后评估条件。如果条件为真，则只要指定的条件为真，就会重复该语句。
for - 循环遍历代码块，直到计数器达到指定的数字。
for … in - 循环遍历对象的属性。
for … of - 循环遍历可迭代对象，例如数组，字符串等。

在以下部分中，我们将详细讨论每个循环语句。

`while` 循环

在 while 直到指定的条件评估为真时，循环将一直循环代码块。一旦条件失败，循环就会停止。 while 循环的通用语法是：

while(condition) {
    // Code to be executed
}

以下示例定义了一个循环，只要变量 i 小于或等于 5，该循环将继续运行。 i 每次循环运行时，变量将增加 1：

var i = 1;
while(i <= 5) {    
    document.write("<p>The number is " + i + "</p>");
    i++;
}

注意： 确保循环中指定的条件最终变为 false。否则，循环将永远不会停止迭代，这称为无限循环。一个常见的错误是忘记增加计数器变量（在我们的例子中是变量 i）。

`do...while` 循环

do-while 循环是的变型 while 循环，其在每次循环迭代的结束后计算判断条件。使用 do-while 循环执行一次代码块，然后计算条件，如果条件为真，则只要指定的条件求值为真，就重复该语句。 do...while 循环的通用语法是：

do {
    // Code to be executed
}
while(condition);

以下示例中的 JavaScript 代码定义了一个以 i=1 开头的循环。然后它将打印输出并将变量 i 值增加 1.之后评估条件，只要变量 i 小于或等于 5，循环就会继续运行。

var i = 1;
do {
    document.write("<p>The number is " + i + "</p>");
    i++;
}
while(i <= 5);

`while` 和 `do...while` 循环的区别

上面所讲的 while 循环不同于 do-while 的一个重要却别是，一个 while 循环，待评估的条件在每次循环迭代的开始时进行评估，因此，如果条件表达式评估为假，该循环将永远不会被执行。

而另一方面 do-while 循环会至少被执行一次，即使条件表达式的值为 false，同 while 循环不同的是，条件是在循环迭代结束而不是在循环开始时评估的。

`for` 循环

for 循环在直到特定条件被满足时是循环重复的代码块。它通常用于执行特定次数的代码块。它的语法是：

for(initialization; condition; increment) {
    // Code to be executed
}

for 循环语句的参数具有以下含义：

initialization - 它用于初始化计数器变量，并在第一次执行循环体之前无条件地进行一次计算。
condition - 在每次迭代开始时进行评估。如果计算结果为 true ，则执行循环语句。如果计算结果为 false ，则循环的执行结束。
increment - 每次循环运行时，它会使用新值更新循环计数器。

以下示例定义了一个以 i=1 开头的循环。循环将持续到变量 i 值小于或等于 5。 i 每次循环运行时变量将增加 1：

for(var i=1; i<=5; i++) {
    document.write("<p>The number is " + i + "</p>");
}

for 循环对迭代数组特别有用。以下示例将向你展示如何打印 JavaScript 数组的每个项目或元素。

// An array with some elements
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Loop through all the elements in the array 
for(var i=0; i<fruits.length; i++) {
    document.write("<p>" + fruits[i] + "</p>");
}

`for...in` 循环

for-in 循环是一种特殊类型的循环，它遍历对象的属性，或数组的元素。 for-in 循环的通用语法是：

for ( variable in object ) { // Code to be executed }

循环计数器即 for-in 循环的 variable 的是一个字符串，而不是数字。它包含当前属性的名称或当前数组元素的索引。

以下示例将向你展示如何遍历 JavaScript 对象的所有属性。

// An object with some properties 
var person = {"name": "Clark", "surname": "Kent", "age": "36"};
 
// Loop through all the properties in the object  
for(var prop in person) {  
    document.write("<p>" + prop + " = " + person[prop] + "</p>"); 
}

同样，你可以循环遍历数组的元素，如下所示：

// An array with some elements
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Loop through all the elements in the array 
for(var i in fruits) {  
    document.write("<p>" + fruits[i] + "</p>");
}

注意： for-in 循环不应该被用在你也需要索引数字时的数组遍历。你最好使用带有数字索引的 for 循环。

`for...of` 循环 (ES6)

ES6 引入了一个新的 for-of 循环，它允许我们非常容易地迭代数组或其他可迭代对象（例如字符串）。此外，循环内的代码是针对可迭代对象的每个元素执行的。

以下示例将向你展示如何使用此循环遍历数组和字符串。

// Iterating over array
let letters = ["a", "b", "c", "d", "e", "f"];

for(let letter of letters) {
    console.log(letter); // a,b,c,d,e,f
}

// Iterating over string
let greet = "Hello World!";

for(let character of greet) {
    console.log(character); // H,e,l,l,o, ,W,o,r,l,d,!
}

要了解其他 ES6 功能，请查看 JavaScript ES6 功能章节。

注： for...of 循环不能用于对象，因为它们不是可迭代的。如果要迭代对象的属性，可以使用 for-in 循环。

JavaScript 中不同类型的循环

while 循环

do...while 循环

while 和 do...while 循环的区别

for 循环

for...in 循环

for...of 循环 (ES6)