Array.prototype.forEach()

forEach()方法对数组的每个元素执行一次提供的函数。

语法

arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);

参数

返回值

undefined。

描述

forEach()方法按升序为数组中含有效值的每一项执行一次callback函数，那些已删除或者未初始化的项将被跳过（例如在稀疏数组上）。

可依次向callback函数传入三个参数：

1. 数组当前项的值
2. 数组当前项的索引
3. 数组对象本身

如果thisArg参数有值，则每次callback函数被调用时，this都会指向thisArg参数。如果省略了thisArg参数，或者其值为null或undefined，this则指向全局对象。按照函数观察到this的常用规则，callback函数最终可观察到this值。

forEach()遍历的范围在第一次调用callback前就会确定。调用forEach后添加到数组中的项不会被callback访问到。如果已经存在的值被改变，则传递给callback的值是forEach()遍历到他们那一刻的值。已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了（例如使用shift()），之后的元素将被跳过——参见下面的示例。

forEach()为每个数组元素执行一次callback函数；与undefined值，并且不可链式调用。其典型用例是在一个调用链的最后执行副作用（side effects，函数式编程上，指函数进行返回结果值以外的操作）。

forEach()被调用时，不会改变原数组，也就是调用它的数组（尽管callback函数在被调用时可能会改变原数组）。（译注：此处说法可能不够明确，具体可参考EMCA语言规范：'forEach does not directly mutate the object on which it is called but the object may be mutated by the calls to callbackfn.'，即forEach不会直接改变调用它的对象，但是那个对象可能会被callback函数改变。）

注意：除了抛出异常以外，没有办法中止或跳出forEach()循环。如果你需要中止或跳出循环，forEach()方法不是应当使用的工具。

若你需要提前终止循环，你可以使用：

• 一个简单的 for 循环
• for...of / for...in 循环
• Array.prototype.every()
• Array.prototype.some()
• Array.prototype.find()
• Array.prototype.findIndex()

这些数组方法则可以对数组元素判断，以便确定是否需要继续遍历：

• every()
• some()
• find()
• findIndex()

译者注：只要条件允许，也可以使用filter()提前过滤出需要遍历的部分，再用forEach()处理。

示例

不对未初始化的值进行任何操作（稀疏数组）

如你所见，3和7之间空缺的数组单元未被forEach()调用callback函数，或进行任何其他操作。

const arraySparse = [1,3,,7];
let numCallbackRuns = 0;

arraySparse.forEach(function(element){
  console.log(element);
  numCallbackRuns++;
});

console.log("numCallbackRuns: ", numCallbackRuns);

// 1
// 3
// 7
// numCallbackRuns: 3

将 for 循环转换为 forEach

const items = ['item1', 'item2', 'item3'];
const copy = [];

// before
for (let i=0; i {
    if (Array.isArray(i))
      result.push(...flatten(i));
    else
      result.push(i);
  })
  
  return result;
}

// Usage
const problem = [1, 2, 3, [4, 5, [6, 7], 8, 9]];

flatten(problem); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

针对 promise 或 async 函数的使用备注

如果使用 promise 或 async 函数作为forEach()等类似方法的callback参数，最好对造成的执行顺序影响多加考虑，否则容易出现错误。

let ratings = [5, 4, 5];

let sum = 0;

let sumFunction = async function (a, b) {
    return a + b;
} 

ratings.forEach(async function(rating) {
    sum = await sumFunction(sum, rating);
})

console.log(sum);
// Expected output: 14
// Actual output: 0

Polyfill

forEach()是在第五版本里被添加到 ECMA-262 标准的；这样它可能在标准的其他实现中不存在，你可以在你调用forEach()之前插入下面的代码，在本地不支持的情况下使用forEach()。该算法是 ECMA-262 第5版中指定的算法。它假定Function.prototype.call()。

// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.io/#x15.4.4.18
if (!Array.prototype.forEach) {

  Array.prototype.forEach = function(callback, thisArg) {

    var T, k;

    if (this == null) {
      throw new TypeError(' this is null or not defined');
    }

    // 1. Let O be the result of calling toObject() passing the
    // |this| value as the argument.
    var O = Object(this);

    // 2. Let lenValue be the result of calling the Get() internal
    // method of O with the argument "length".
    // 3. Let len be toUint32(lenValue).
    var len = O.length >>> 0;

    // 4. If isCallable(callback) is false, throw a TypeError exception. 
    // See: http://es5.github.com/#x9.11
    if (typeof callback !== "function") {
      throw new TypeError(callback + ' is not a function');
    }

    // 5. If thisArg was supplied, let T be thisArg; else let
    // T be undefined.
    if (arguments.length > 1) {
      T = thisArg;
    }

    // 6. Let k be 0
    k = 0;

    // 7. Repeat, while k 

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com