JavaScript 数组 forEach：对每个元素执行函数

摘要：在本教程中，您将学习如何使用 JavaScript 数组的 forEach() 方法对数组中的每个元素执行函数。

JavaScript 数组 forEach() 方法简介

通常，当您想要对 数组 的每个元素执行一个 函数 时，您会使用 for 循环语句。

例如，以下代码将数组中的每个元素显示到控制台

let ranks = ['A', 'B', 'C'];
for (let i = 0; i < ranks.length; i++) {
    console.log(ranks[i]);
}Code language: JavaScript (javascript)

输出

A
B
C

JavaScript 数组提供了 forEach() 方法，允许您对每个元素运行函数。

以下代码使用 forEach() 方法，它等效于上面的代码

let ranks = ['A', 'B', 'C'];

ranks.forEach(function (e) {
    console.log(e);
});Code language: JavaScript (javascript)

输出

A
B
C

forEach() 方法遍历数组中的元素，并对每个元素执行一次预定义的函数。

以下是 forEach() 方法语法的说明。

Array.forEach(callback [, thisArg]);Code language: CSS (css)

forEach() 方法接受两个参数

1) 回调函数

forEach() 方法用来对每个元素执行的 回调函数。

回调函数接受以下参数

• 当前元素：正在处理的当前数组元素。
• 索引：数组中 当前元素 的索引。
• 数组：调用 forEach() 方法的数组。

索引 和 数组 是可选的。

2) thisArg

thisArg 是一个值，用于在执行回调函数时用作 this。

请注意，forEach() 函数返回 undefined，因此它不像其他迭代方法那样可链接：filter(), map(), some(), every(), 和 sort().

与 for 循环相比，forEach() 方法的一个限制是您不能使用 break 或 continue 语句来控制循环。

要在 forEach() 方法中终止循环，您必须在 回调函数 函数中 抛出异常。

更多 JavaScript 数组 forEach() 方法示例

让我们来看一个使用 contextObject 的 forEach() 方法的示例。

以下是 Counter 构造函数的说明

function Counter() {
    this.count = 0;
    let self = this;
    return {
        increase: function () {
            self.count++;
        },
        current: function () {
            return self.count;
        },
        reset: function () {
            self.count = 0;
        }
    }
}Code language: PHP (php)

此示例演示了如何将计数器对象传递给 forEach() 方法。

var counter = new Counter();
var numbers = [1, 2, 3];
var sum = 0;
numbers.forEach(function (e) {
    sum += e;
    this.increase();
}, counter);

console.log(sum); // 6
console.log(counter.current()); // 3
Code language: JavaScript (javascript)

工作原理。

• 首先，创建一个新的 Counter 对象。
• 接下来，定义一个包含三个数字的数组。
• 然后，声明一个名为 sum 的变量并将其赋值为零。
• 之后，在 numbers 数组上调用 forEach() 方法。在回调函数中，将元素添加到 sum 变量，并调用 counter 对象的 increase() 方法。请注意，counter 对象在回调函数中被称为 this。
• 最后，将 sum 的值和计数器的当前值记录到网页控制台。

在本教程中，您学习了如何使用 JavaScript 数组的 forEach() 方法对数组的每个元素执行回调函数。