JavaScript forEach 方法详解:原数组会被改变吗?

196 阅读2分钟

1. 什么是 forEach

forEach 是JavaScript数组的一个内置方法,用于对数组中的每个元素执行指定的函数。它的基本语法如下:

array.forEach(callback(currentValue, index, array), thisArg);
  • callback: 要执行的函数,接收三个参数:当前元素的值、当前元素的索引和原数组。
  • thisArg: 可选,执行回调时使用的 this 值。

2. forEach 的基本用法

以下是一个简单的 forEach 示例:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number) => {
    console.log(number);
});

在这个例子中,forEach 遍历了 numbers 数组,并打印了每个元素的值。

3. forEach 是否会修改原数组?

forEach 本身并不会自动修改原数组。它只是遍历数组并执行回调函数。如果在回调函数中对数组的元素进行了修改,那么原数组的值将会被改变。

4. 示例:forEach 修改数组的情况

让我们看一个示例,展示如何在 forEach 中修改数组的元素:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((value, index, array) => {
    array[index] = value * 2; // 修改原数组
});

console.log(numbers); // 输出: [2, 4, 6, 8, 10]

在这个例子中,我们在 forEach 的回调函数中修改了原数组的值,将每个元素乘以2。最终,numbers 数组的值被改变了。

5. 其他数组方法与 forEach 的比较

forEach 类似的数组方法还有 mapfilterreduce。这些方法的行为各不相同:

  • map: 返回一个新数组,包含对原数组每个元素调用回调函数的结果。不会修改原数组。
  • filter: 返回一个新数组,包含所有通过测试的元素。不会修改原数组。
  • reduce: 返回一个单一值,累积所有元素的结果。不会修改原数组。

示例对比

const numbers = [1, 2, 3, 4, 5];

// 使用 map
const doubled = numbers.map((value) => value * 2);
console.log(doubled); // 输出: [2, 4, 6, 8, 10]
console.log(numbers); // 输出: [1, 2, 3, 4, 5] (原数组未修改)

// 使用 filter
const evenNumbers = numbers.filter((value) => value % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4]
console.log(numbers); // 输出: [1, 2, 3, 4, 5] (原数组未修改)

// 使用 reduce
const sum = numbers.reduce((acc, value) => acc + value, 0);
console.log(sum); // 输出: 15
console.log(numbers); // 输出: [1, 2, 3, 4, 5] (原数组未修改)

6. 总结

forEach 方法本身不会修改原数组,但如果在回调函数中对数组元素进行了修改,那么原数组的值将会被改变。在需要返回新数组的场景中,建议使用 mapfilterreduce 等方法。


如果你喜欢本教程,记得点赞+收藏!关注我获取更多JavaScript开发干货。