数组13— forEach() ：遍历数组元素

在上节，我们学习如何使用 JavaScript Array map() 方法来转换数组中的元素，错过的小伙伴可以点击文章《 【JavaScript 教程】第六章 数组12— map() ：转换数组元素》进行学习。

那么，在今天的教程中，我们一起来学习如何使用 JavaScript Array forEach()方法对数组中的每个元素执行函数。

JavaScript Array forEach()方法介绍

通常，当我们想对数组的每个元素执行一个函数时，我们可以使用for循环语句。

例如，以下代码向控制台显示数组的每个元素：

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

输出：

ABC

JavaScript Array 提供了 forEach() 方法，允许您在每个元素上运行一个函数。

以下代码使用与上面代码等效的 forEach() 方法：

let ranks = ['A', 'B', 'C'];
ranks.forEach(function (e) {    console.log(e);});

输出：

ABC

forEach() 方法迭代数组中的元素并为每个元素执行一次预定义函数。

下面说明了 forEach() 方法的语法。

Array.forEach(callback [, thisArg]);

forEach() 方法有两个参数：

1) 回调

forEach() 方法用于在每个元素上执行的回调函数。

回调接受以下参数：

• currentElement：是当前正在处理的数组元素。

• index：当前元素在数组中的索引。

• array：调用 forEach() 方法的数组。

索引和数组是可选的。

2) thisArg

thisArg 是执行回调时用作 this 的值。

请注意，forEach() 函数返回 undefined，因此，它不像filter()、map()、some()、every() 和 sort()方法一样可链接：。

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

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

更多 JavaScript Array 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;        }    }}

此示例显示如何将计数器对象传递给 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); // 6console.log(counter.current()); // 3

它们是怎么运行的。

• 首先，创建一个新的 Counter 对象。

• 接下来，定义一个由三个数字组成的数组。

• 然后，声明一个变量 sum 并将其赋值为零。

• 之后，在 numbers 数组上调用 forEach() 方法。在回调函数中，将元素添加到 sum 变量中，并调用 counter 对象的 increase() 方法。请注意，counter对象this在回调函数中被引用。

• 最后，在 Web 控制台中记录计数器的总和值和当前值。

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

今天的内容就到这里了。