JavaScript中的For循环、For...Of循环和For...In循环

介绍

Loops 用于编程以自动执行重复性任务。 JavaScript 中使用的最基本的循环类型是 while 和 do...while 语句，您可以在“如何在 JavaScript 中构造 While 和 Do...While 循环] 中查看这些语句。 ”

因为 while 和 do...while 语句是有条件地基于，它们在给定语句返回为 true 的计算结果时执行。类似于它们也是基于条件的，for 语句还包括额外的功能，例如 循环计数器 ，允许您预先设置循环的迭代次数。

在本教程中，我们将了解 for 语句，包括 for...of 和 for...in 语句，它们是 JavaScript 编程语言的基本元素。

循环

for 语句是一种循环类型，它将使用最多三个可选表达式来实现代码块的重复执行。

让我们看一个例子来说明这意味着什么。

for (initialization; condition; final expression) {
    // code to be executed
}

在上面的语法中，for 语句中包含三个表达式：初始化、条件和最终表达式，也称为增量。

让我们使用一个基本示例来演示每个语句的作用。

forExample.js

// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
    // Print each iteration to the console
    console.log(i);
}

当我们运行上面的代码时，我们将收到以下输出：

Output0
1
2
3

在上面的例子中，我们用 let i = 0 初始化了 for 循环，它从 0 开始循环。我们将条件设置为 i < 4，这意味着只要 i 的计算结果小于 4，循环就会继续运行。 i++ 的最终表达式在循环中的每次迭代中递增计数。 console.log(i) 打印出数字，从 0 开始，并在 i 被评估为 4 时立即停止。

如果不使用循环，我们可以使用以下代码实现相同的输出。

noLoop.js

// Set initial variable to 0
let i = 0;

// Manually increment variable by 1 four times
console.log(i++);
console.log(i++);
console.log(i++);
console.log(i++);

如果没有适当的循环，代码块是重复的并且包含更多行。如果我们需要增加更多的数字，我们就需要编写更多的代码行。

让我们回顾一下循环中的每个表达式以完全理解它们。

初始化

我们的第一个表达式是 初始化 。这就是它的样子。

let i = 0;

我们使用 let 关键字（也可以使用关键字 var）声明一个名为 i 的变量，并为其赋值 0。虽然变量可以命名为任何名称，但最常用的是 i。变量i代表i迭代，是一致的，保持代码紧凑。

健康）状况

正如我们在 while 和 do...while 循环中看到的，for 循环通常包含条件。这是我们的条件语句。

i < 4;

我们已经确定我们的迭代变量 i 代表 0 开始。现在我们说条件是 true，只要在这个例子中 i 小于 4。

最终表达

final 表达式 是在每个循环结束时执行的语句。它最常用于增加或减少一个值，但它可以用于任何目的。

i++

在我们的示例中，我们使用 i++ 将变量加一。这与运行 i = i + 1 相同。

与初始化和条件表达式不同，最终表达式不以分号结尾。

把它放在一起

现在我们已经查看了包含在 for 循环中的三个表达式，我们可以再次查看完整的循环。

// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
    console.log(i);
}

首先，我们声明 i 并将其设置为 0。然后，我们设置循环运行的条件，直到 i 小于 4。最后，我们每次迭代将 i 递增 1。我们的代码块将 i 的值打印到控制台，因此我们的结果是 0、1、2 和 3 为输出。

可选表达式

for 循环中的所有三个表达式都是可选的。例如，我们可以通过在循环外初始化变量来编写相同的 for 语句而无需初始化表达式。

// Declare variable outside the loop
let i = 0;

// Initialize the loop
for (; i < 4; i++) {
    console.log(i);
}

Output0
1
2
3

在这种情况下，第一个 ; 是必要的，以表示该语句是指初始化、条件还是最终表达式，即使它被省略。

下面，我们还可以从循环中删除条件。我们将使用 if 语句结合 break 来告诉循环在 i 大于 3 时停止运行，这与 [ X162X] 条件。

// Declare variable outside the loop
let i = 0;

// Omit initialization and condition
for (; ; i++) {
    if (i > 3) {
        break;
    }
    console.log(i);
}

Output0
1
2
3

Warning：如果省略条件，则必须包含 break 语句 ' ，否则循环将永远作为无限循环运行并可能崩溃浏览器。

最后，可以通过将最终表达式放在循环末尾来删除它。两个分号仍必须包含在内，否则循环将不起作用。

// Declare variable outside the loop
let i = 0;

// Omit all statements
for (; ;) {
    if (i > 3) {
        break;
    }
    console.log(i);
    i++;
}

Output0
1
2
3

从上面的例子中我们可以看出，包含所有三个语句通常会产生最简洁和可读的代码。但是，知道可以省略语句以防将来遇到它是有用的。

修改数组

我们可以使用 for 循环来修改 array。

在下一个示例中，我们将创建一个空数组并使用循环计数器变量填充它。

modifyArray.js

// Initialize empty array
let arrayExample = [];

// Initialize loop to run 3 times
for (let i = 0; i < 3; i++) {
    // Update array with variable value
    arrayExample.push(i);
    console.log(arrayExample);
}

运行上面的 JavaScript 代码将产生以下输出。

Output[ 0 ]
[ 0, 1 ]
[ 0, 1, 2 ]

我们设置了一个循环，直到 i < 3 不再是 true，并且我们告诉控制台在每次迭代结束时将 arrayExample 数组打印到控制台。使用此方法，我们可以看到数组如何使用新值进行更新。

数组的长度

有时，我们可能希望循环运行多次，但不确定迭代次数。我们可以使用数组的 length 属性来让循环运行与数组中的项目一样多的次数，而不是像在前面的示例中那样声明一个静态数字。

loopThroughArray.js

// Declare array with 3 items
let fish = [ "flounder", "salmon", "pike" ];

// Initalize for loop to run for the total length of an array
for (let i = 0; i < fish.length; i++) {
    // Print each item to the console
    console.log(fish[i]);
}

我们将收到以下输出。

Outputflounder
salmon
pike

在本例中，我们使用 fish[i] 递增数组的每个索引（例如循环将通过 fish[0]、fish[1] 等递增）。这会导致索引随着每次迭代而动态更新。

Mozilla 开发者网络上提供了有关 for 语句的更多详细信息。

对于…在循环中

for...in 语句迭代对象的属性。为了演示，我们将创建一个简单的 shark 对象，其中包含几个 name:value 对。

鲨鱼.js

const shark = {
    species: "great white",
    color: "white",
    numberOfTeeth: Infinity
}

使用 for...in 循环，我们可以轻松访问每个属性名称。

// Print property names of object
for (attribute in shark) {
    console.log(attribute);
}

Outputspecies
color
numberOfTeeth

我们还可以通过使用属性名称作为对象的索引值来访问每个属性的值。

// Print property values of object
for (attribute in shark) {
    console.log(shark[attribute]);
}

Outputgreat white
white
Infinity

将它们放在一起，我们可以访问对象的所有名称和值。

// Print names and values of object properties
for (attribute in shark) {
    console.log(`${attribute}`.toUpperCase() + `: ${shark[attribute]}`);
}

OutputSPECIES: great white
COLOR: white
NUMBEROFTEETH: Infinity

我们使用 toUpperCase() 方法来修改属性名称，并在其后添加属性值。 for...in 是一种非常有用的遍历对象属性的方法。

查看 Mozilla Developer Network 上的 for...in 以获取更多详细信息。

For...Of 循环

for...in 语句对于迭代对象属性很有用，但是要迭代像 arrays 和 strings 这样的可迭代对象，我们可以使用 for...of 语句. for...of 语句是 ECMAScript 6 的新功能。 ECMAScript（或 ES）是为标准化 JavaScript 而创建的脚本语言规范。

在这个 for...of 循环的示例中，我们将创建一个数组并将数组中的每个项目打印到控制台。

鲨鱼.js

// Initialize array of shark species
let sharks = [ "great white", "tiger", "hammerhead" ];

// Print out each type of shark
for (let shark of sharks) {
    console.log(shark);
}

我们将收到以下 for...of 语句的输出。

Outputgreat white
tiger
hammerhead

也可以使用 entries() 方法打印出与索引元素关联的索引。

鲨鱼.js

...
// Loop through both index and element
for (let [index, shark] of sharks.entries()) {
    console.log(index, shark);
}

Output0 'great white'
1 'tiger'
2 'hammerhead'

可以像数组一样迭代字符串。

鲨鱼字符串.js

// Assign string to a variable
let sharkString = "sharks";

// Iterate through each index in the string
for (let shark of sharkString) {
    console.log(shark);
}

Outputs
h
a
r
k
s

在这种情况下，我们遍历字符串中的每个字符，按顺序打印它们。

有关 for...in 和 for...of 之间差异的更详细说明，请阅读 Mozilla 开发人员网络上的 for...of 循环。

结论

在本教程中，我们学习了如何在 JavaScript 中构造 for 循环，由 for、for...of 和 for...in 语句组成。

循环是 JavaScript 编程不可或缺的一部分，用于自动执行重复性任务并使代码更加简洁和高效。