JavaScript 循环

在本教程中,你将学习如何使用 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);

whiledo...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 循环。