数组是一个单独的变量,用于存储不同数据类型的元素,这样就可以通过一个单独的变量访问它们。
它是一个有序的值列表,每个值都被称为一个元素,可以通过索引访问。
知道了这种单个变量包含了一个元素列表后,您可能希望创建一个这些元素的列表,以便可以使用它们执行单独的函数等等。这就是循环发挥作用的地方。
JavaScript中的循环是什么?
循环是一种计算机程序,它允许我们将特定的操作重复预定次数,而不必单独编写该操作。
例如,假设我们有一个数组,并且希望输出数组中的每个元素,而不是使用索引号逐个输出,那么我们可以简单地循环并执行此操作一次。
在 JavaScript 中有许多循环遍历数组的方法。在本文中,我们将介绍最常用的方法,以便您学习不同的方法并了解它们的工作原理。
我们将在本文中使用以下数组:
const scores = [22, 54, 76, 92, 43, 33];
如何在 JavaScript 中使用 While 循环遍历数组
您可以使用 while
循环来计算括在圆括号 ()
中的条件。如果条件为 true
,则执行 while
循环内的代码。如果为 false
,则终止循环。
如果我们想遍历一个数组,我们可以使用 length
属性来指定循环应该一直持续,直到到达数组的最后一个元素。
现在让我们使用 while
循环方法循环遍历数组:
let i = 0;
while (i < scores.length) {
console.log(scores[i]);
i++;
}
这将依次返回数组中的每个元素:
22
54
76
92
43
33
在上面的循环中,我们首先初始化索引编号,使其从 0
开始。然后编号会不断增加并输出每个元素,直到我们设置的条件返回false,表示我们已经到了数组的末尾。当 i = 6
时,条件将不再执行,因为数组的最后一个索引是 5
。
如何在 JavaScript 中使用 do...while
循环遍历数组
do...while
循环与 while
循环几乎相同,只是它先执行循环体,然后再计算后续执行的条件。这意味着循环体总是至少执行一次。
让我们用 do...while
循环执行相同的循环,看看它是如何工作的:
let i = 0;
do {
console.log(scores[i]);
i++;
} while (i < scores.length);
这将返回数组中的每个元素:
22
54
76
92
43
33
如前所述,这将始终在计算任何条件集之前运行一次。例如,如果我们将索引 i
设置为 6
,并且它不再小于 scores.length
,则循环体将首先运行,然后再检查条件:
let i = 6;
do {
console.log(scores[i]);
i++;
} while (i < scores.length);
这将返回一个 undefined,因为在数组中没有索引为 6 的元素,但正如您所看到的,它在停止之前运行了一次。
如何在 JavaScript 中使用 for
循环遍历数组
for 循环是一个迭代语句,它检查某些条件,然后只要满足这些条件就会重复执行一段代码。
在使用 for 循环方法时不需要先对索引进行初始化,因为初始化、条件、迭代都在括号中处理,如下所示:
for (let i = 0; i < scores.length; i++) {
console.log(scores[i]);
}
这将像其他方法一样返回所有元素:
22
54
76
92
43
33
如何在 JavaScript 中使用 for...in
循环遍历数组
for...in
循环是一种更简单的遍历数组方法,因为它为我们提供了键,我们现在可以使用该键以这种方式从数组中获取值:
for (i in scores) {
console.log(scores[i]);
}
这将输出我们数组中的所有元素:
22
54
76
92
43
33
如何在 JavaScript 中使用 for...of
循环遍历数组
for...of
循环遍历数组、集合、Map、字符串等可迭代对象。它具有与 for...in
循环相同的语法,但不是获取键,而是获取元素本身。
这是循环遍历数组的最简单方法之一,并在 JavaScript ES6 的更高版本中引入。
for (score of scores) {
console.log(score);
}
这将获取数组的每个元素,我们不再需要使用索引来获取数组的每个元素:
22
54
76
92
43
33
如何在 JavaScript 中使用 forEach
循环遍历数组
数组方法 forEach()
循环遍历任何数组,按升序索引顺序为每个数组元素执行一次提供的函数。此函数称为回调函数。
这是一种更高级的方法,它不仅可以简单地遍历每个元素,还可以做更多的事情,但您也可以使用它以这种方式进行循环:
scores.forEach((score) => {
console.log(score);
});
你可以这样写在一行中:
scores.forEach((score) => console.log(score));
这将为我们提供与之前所有方法相同的输出:
22
54
76
92
43
33
总结
在本文中,我们研究了六种不同的标准方法来循环数组。
了解所有这些方法,然后确定哪种方法更适合您、使用更清晰且更易于阅读,这一点至关重要。