JavaScript 循环

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

JavaScript 中不同类型的循环

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

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

在接下来的部分中，我们将详细讨论这些循环语句。

while 循环

这是 JavaScript 提供的最简单的循环语句。

只要指定条件的计算结果为真，while 循环就会遍历一段代码。 一旦条件失败，循环就会停止。 while 循环的通用语法是：

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

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

do...while 循环

do-while 循环是 while 循环的变体，它在每次循环迭代结束时评估条件。 使用 do-while 循环，代码块执行一次，然后评估条件，如果条件为真，只要指定的条件评估为真，语句就会重复。 do-while 循环的通用语法是：

以下示例中的 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 循环，要评估的条件在每次循环迭代开始时进行测试，因此如果条件表达式的计算结果为 false，则永远不会执行循环。

另一方面，对于 do-while 循环，即使条件表达式的计算结果为 false，循环也将始终执行一次，因为与 while 循环不同，条件是在循环迭代结束而不是开始时计算的。

for 循环

只要满足某个条件，for 循环就会重复一段代码。 它通常用于执行一段代码一定次数。 它的语法是：

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 数组 的每个项目或元素。

// 包含一些元素的数组
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// 循环遍历数组中的所有元素
for(var i=0; i<fruits.length; i++) {
    document.write("<p>" + fruits[i] + "</p>");
}

for...in 循环

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

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

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

// 具有某些属性的对象
var person = {"name": "Clark", "surname": "Kent", "age": "36"};
 
// 循环遍历对象中的所有属性
for(var prop in person) {  
    document.write("<p>" + prop + " = " + person[prop] + "</p>"); 
}

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

// 包含一些元素的数组
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// 循环遍历数组中的所有元素
for(var i in fruits) {  
    document.write("<p>" + fruits[i] + "</p>");
}

for...of 循环 ES6

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

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

// 遍历数组
let letters = ["a", "b", "c", "d", "e", "f"];

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

// 遍历字符串
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 功能 章节。