forEach

撰写时间：2024-03-05

最新修订：2024-03-09

forEach

遍历数组。遍历过程中不会直接改变数组元素。

原型

undefinedforEach

functioncallbackFn
*[]thisArg

参数

callbackFn

回调函数。该回调函数接受3个参数。其原型如下：

undefinedcallbackFn

*element
numberindex
*[]array

element: 当前遍历到的数组元素。

index: 当前遍历到的数组索引值。

array: 调用forEach方法的数组实例。

回调函数callbackFn返回undefined。

thisArg: 调用forEach方法的数组实例。可选。

返回值

返回undefined。

说明

forEach方法通过调用回调函数来遍历数组元素。该方法被设计为不会直接修改数组元素。

例子

普通遍历

let arr = [5, 10, 15]; arr.forEach((element, index) => { console.log(`${index}: ${element}`); });

显示：

0: 5 1: 10 2: 15

普通遍历不会改变数组元素

let arr = [5, 10, 15]; arr.forEach((element, index) => { element += 1; console.log(element); }); console.log(arr);

显示：

6 11 16 [5, 10, 15]

虽然我们在回调函数中将数组各个元素的值都加1，但退出回调函数后，原来的arr数组并未改变。

从回调函数的原型中我们看出，它不需要返回数值，也即这种回调是单向的。这是为何forEach方法在普通遍历中不会直接改变原来数组的原因之一。

在遍历中改变数组元素

若要改变数组元素，可通过利用回调函数的第3个参数来实现。

let arr = [5, 10, 15]; arr.forEach((element, index, array) => { array[index] += 1; }); console.log(arr);

显示：

[6, 11, 16]

第1个参数element是JavaScript引擎将数组各个元素的值复制后再传来的，因此改变该参数的值，不会导致原来的数组产生变化。而第3个参数array则是变量arr的引用，它与后者都同时指向了内存中的同一区域。通过该参数，配合第2个参数index来定位各个数组元素，即可达到修改数组各个元素的值的目的。

而如果数组元素是对象，则可在遍历中修改数组元素的值。

let arr = [ {value: 5}, {value: 10}, {value: 15} ]; arr.forEach(element => { element.value += 1; }); console.log(arr);

显示：

[ {value: 6}, {value: 11}, {value: 16} ]

这是因为对象作为函数参数是传址的。因此，若要在forEach函数中修改所遍历的数组元素的值，首先得判断数组元素的类型是否基本数据类型。如果是基本数据类型，则通过回调函数的array参数来修改；如果不是基本数据类型，则可直接修改。

参见

参考资源

ECMA 262: Array Objects