如何在 JavaScript 中遍历数组：forEach、for...of 及其他方法

为什么“遍历数组”是必须牢记的基础知识

想象一下：你有一个学生名单、一个购物车或一组数字。你需要对每个元素执行某些操作：输出姓名、计算总和、只筛选出成年人。在 JavaScript 中，有几种方法可以实现这一点，其中最流行的是 forEach 循环。

Stack Overflow 上的问题“Loop (for each) over an array in JavaScript”获得了数千次浏览。这意味着即使是经验丰富的开发人员有时也会在细节上感到困惑。我们将逐一梳理：从经典的 for 循环到现代的 for...of 循环以及强大的 forEach 方法。您将了解何时使用哪种方法，并从此不再害怕数组。

方法 1：经典 for 循环——所有遍历方法的鼻祖

这是最古老且最容易理解的方法。您可以自己控制计数器和退出条件。当需要提前中断循环或跳过多个元素时，这是理想的选择。

const fruits = ['苹果', '香蕉', '橙子'];
for (let i = 0; i < fruits.length; i++) {
    console.log(`水果 №${i + 1}: ${fruits[i]}`);
}

优点：完全控制，可以使用 break 和 continue。
\n缺点：代码冗长，容易在索引上出错。

何时使用经典 for 循环

\n
• 需要提前停止遍历（例如，在查找元素时）。
\n
• 需要访问索引（而不仅仅是值）。
\n
• 处理多维数组时。
\n

方法 2：forEach——JavaScript 中的遍历之王

在 90% 的情况下，这个方法就是“Loop (for each) over an array in JavaScript”这个问题的答案。它直接在数组上调用，并接受一个回调函数（callback），该函数会为每个元素执行。

const fruits = ['苹果', '香蕉', '橙子'];
fruits.forEach(function(fruit, index) {
    console.log(`水果 №${index + 1}: ${fruit}`);
});

// 使用箭头函数实现相同功能（现代风格）：
fruits.forEach((fruit, index) => {
    console.log(`水果 №${index + 1}: ${fruit}`);
});

重要提示：forEach 不会返回新数组（与 map 不同）。它只是为每个元素执行一个操作。另外，break 和 continue 在这里不起作用——如果需要中断循环，请使用 for...of 或经典的 for 循环。

forEach 回调函数的参数

\n
• 第一个参数——数组的当前元素（必需）。
\n
• 第二个参数——元素的索引（可选）。
\n
• 第三个参数——数组本身（很少需要）。
\n

[10, 20, 30].forEach((value, index, array) => {
    console.log(`元素 ${value} 在位置 ${index} 的数组 [${array}] 中`);
});

方法 3：for...of——现代且优雅

它出现在 ES6（2015）中，并立即受到开发人员的喜爱。它不仅适用于数组，还适用于任何可迭代对象（字符串、Set、Map）。

const fruits = ['苹果', '香蕉', '橙子'];
for (const fruit of fruits) {
    console.log(`水果: ${fruit}`);
}

主要优点：可以使用 break 和 continue。而且代码看起来干净且可读性强。

如何在 for...of 中获取索引

如果需要索引，请使用 entries() 方法：

for (const [index, fruit] of fruits.entries()) {
    console.log(`水果 №${index + 1}: ${fruit}`);
}

方法 4：map——当需要创建新数组时

如果您不仅想遍历，还想转换每个元素并获得一个长度相同的新数组，请使用 m