JavaScript forEach 方法
最后修改于 2025 年 4 月 4 日
在本文中，我们将展示如何使用 JavaScript 中的 forEach 方法遍历数组。
数组迭代
forEach 方法为数组中的每个元素执行一次提供的函数。 当处理数组时，它比传统的 for 循环更简洁。 该方法不返回值，并且无法链接。
与 map 或 filter 不同，forEach 用于其副作用，而不是转换数据。 它提供了一种简单的方法来对每个元素执行操作，而无需创建新数组。
传递给 forEach 的回调函数接收三个参数：当前元素、其索引和正在遍历的数组。 仅需要元素值；其他参数是可选的。
基本 forEach 示例
以下示例演示了 forEach 方法的基本用法。
const fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(function(fruit) {
console.log(fruit);
});
我们创建一个水果数组，并使用 forEach 记录每一个水果。 回调函数依次接收每个元素。 这是 forEach 用法的最简单形式。
$ node main.js apple banana cherry
使用索引参数
forEach 回调可以访问当前元素的索引。
const colors = ['red', 'green', 'blue'];
colors.forEach(function(color, index) {
console.log(`Color at position ${index} is ${color}`);
});
我们记录了颜色及其在数组中的索引。 回调函数的第二个参数提供当前索引。 当您需要知道元素的位置时，这很有用。
$ node main.js Color at position 0 is red Color at position 1 is green Color at position 2 is blue
修改数组元素
forEach 可用于就地修改数组元素。
const numbers = [1, 2, 3, 4];
numbers.forEach(function(num, index, arr) {
arr[index] = num * 2;
});
console.log(numbers);
我们通过数组引用访问数组中的每个数字，使其翻倍。 第三个参数提供了对原始数组的访问权限。 请注意，我们直接修改了原始数组。
$ node main.js [ 2, 4, 6, 8 ]
使用箭头函数
箭头函数为 forEach 回调提供简洁的语法。
const languages = ['JavaScript', 'Python', 'Ruby'];
languages.forEach(lang => {
console.log(`${lang} has ${lang.length} letters`);
});
我们使用箭头函数来记录每种语言及其字符数。 箭头函数对于简单操作来说特别简洁。 它们从周围的上下文中继承 this。
$ node main.js JavaScript has 10 letters Python has 6 letters Ruby has 4 letters
中断 forEach 迭代
与 for 循环不同，forEach 无法使用 break 中断。
const data = [1, 2, 3, 4, 5];
let sum = 0;
data.forEach(num => {
if (sum >= 6) return; // Can't break, but can skip
sum += num;
});
console.log(sum);
我们演示了 forEach 迭代不能提前停止。 虽然 return 退出当前回调，但它不会停止整个循环。 对于提前终止，请考虑使用 for...of 或 some。
$ node main.js 6
来源
在本文中，我们演示了如何使用 forEach() 方法在 JavaScript 中遍历数组。
作者
列出 所有 JS 数组函数。