JavaScript 数组循环
最后修改于 2023 年 10 月 18 日
在本文中，我们将展示如何在 JavaScript 中循环遍历数组。我们可以使用 forEach 方法以及 for 和 while 语句来循环遍历元素。
数组是多个值的集合。数组项称为数组的元素。
可以使用以下方法在 JavaScript 中迭代数组的元素
- forEach 方法 - 遍历数组元素
- for in - 迭代数组索引
- for of - 迭代数组值
- 经典 for - 使用计数器遍历数组
- 经典 while 循环 - 使用计数器遍历数组
使用 forEach 的 JavaScript 数组循环
forEach 方法为每个数组元素执行一次提供的函数。
const words = ['pen', 'pencil', 'falcon', 'rock', 'sky', 'earth'];
words.forEach(e => console.log(e));
console.log('-------------------------');
words.forEach((e, idx) => console.log(`${e} has index ${idx}`));
我们有一个单词数组。使用forEach方法，我们遍历数组的元素并将它们打印到控制台。
words.forEach(e => console.log(e));
我们循环遍历数组的元素。
words.forEach((e, idx) => console.log(`${e} has index ${idx}`));
在这种形式中，我们可以使用一个元素及其索引。
$ node foreach.js pen pencil falcon rock sky earth ------------------------- pen has index 0 pencil has index 1 falcon has index 2 rock has index 3 sky has index 4 earth has index 5
在下面的示例中，我们使用数字。
let vals = [1, 2, 3, 4, 5];
vals.forEach(e => console.log(e * e))
console.dir(vals);
console.log('----------------');
let vals2 = vals.map(e => e * e);
vals2.forEach(e => console.log(e));
console.dir(vals2);
我们对数组值应用数值运算。
let vals = [1, 2, 3, 4, 5];
我们有一个值数组。
vals.forEach(e => console.log(e * e))
我们遍历数组并对所有元素求幂。
console.dir(vals);
数组的内容使用 console.dir 显示。
let vals2 = vals.map(e => e * e);
使用 map 函数，我们根据作为参数传递的函数创建一个新数组。
vals2.forEach(e => console.log(e));
我们遍历新创建的数组。
$ node foreach2.js 1 4 9 16 25 [ 1, 2, 3, 4, 5 ] ---------------- 1 4 9 16 25 [ 1, 4, 9, 16, 25 ]
使用 for in 的 JavaScript 数组循环
for in 结构用于迭代数组索引。
let words = ['pen', 'pencil', 'falcon', 'rock', 'sky', 'earth'];
for (let idx in words) {
console.log(`${words[idx]} has index ${idx}`);
}
该示例迭代单词数组的索引。它打印单词及其索引。
$ node for_in.js pen has index 0 pencil has index 1 falcon has index 2 rock has index 3 sky has index 4 earth has index 5
使用 for of 的 JavaScript 数组循环
使用 for of 结构，我们迭代数组的元素。
let words = ['pen', 'pencil', 'falcon', 'rock', 'sky', 'earth'];
for (let word of words) {
console.log(word);
}
该示例打印words数组中的所有单词。
使用经典 for 语句的 JavaScript 数组循环
JavaScript 支持经典的 C 风格 for 语句。它使用一个辅助计数器变量来遍历数组。
for 循环有三个阶段：初始化、条件和代码块执行，以及递增。
let words = ['pen', 'pencil', 'falcon', 'rock', 'sky', 'earth'];
for (let i=0; i<words.length; i++) {
console.log(words[i]);
}
该示例使用经典的 for 循环遍历单词数组。
for (let i=0; i<words.length; i++) {
i 变量是辅助计数器值。我们使用 length 属性确定数组的大小。
在第一阶段，我们将计数器 i 初始化为零。此阶段仅执行一次。接下来是条件。如果满足条件，则执行 for 块内的语句。在第三阶段，计数器递增。现在我们重复 2、3 阶段，直到条件不满足并且 for 循环退出。在我们的例子中，当计数器等于数组的大小时，for 循环停止执行。
使用 while 语句的 JavaScript 数组循环
while 语句是一种控制流语句，它允许根据给定的布尔条件重复执行代码。 while 关键字执行由大括号括起来的块内的语句。每次将表达式计算为 true 时，都会执行这些语句。
let words = ['pen', 'pencil', 'falcon', 'rock', 'sky', 'earth'];
let i = 0;
while (i < words.length) {
console.log(words[i]);
i++;
}
while 循环类似于 for 循环；我们有计数器变量，并且 while 循环有三个阶段。
来源
在本文中，我们介绍了在 JavaScript 中循环数组的几种方法。