【JavaScript 教程】第六章数组13— forEach() ：遍历数组元素

139 阅读 0 评论 92 点赞

我是靠谱客的博主可耐大白，这篇文章主要介绍【JavaScript 教程】第六章数组13— forEach() ：遍历数组元素，现在分享给大家，希望可以做个参考。

英文 | https://www.javascripttutorial.net/

译文 | 杨小爱

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

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

JavaScript Array forEach()方法介绍

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

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

复制代码

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

输出：

复制代码

1
2
3
A
B
C

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

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

复制代码

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

输出：

复制代码

1
2
3
A
B
C

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

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

复制代码

1
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 构造函数：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Counter() {
this.count = 0;
let self = this;
return {
increase: function () {
self.count++;
},
current: function () {
return self.count;
},
reset: function () {
self.count = 0;
}
}
}

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

复制代码

1
2
3
4
5
6
7
8
9
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

它们是怎么运行的。

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

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

今天的内容就到这里了。

如果您还想学习更多关于数组的内容，请点击下文链接进行学习。

【JavaScript 教程】第六章数组12— map() ：转换数组元素

【JavaScript 教程】第六章数组11— filter() ：过滤数组中的元素

【JavaScript 教程】第六章数组10— sort() ：对数组中的元素进行排序

【JavaScript 教程】第六章数组09— some() ：检查数组中是否至少有一个元素通过了测试

【JavaScript 教程】第六章数组08— every() ：检查数组中的每个元素是否都通过了测试

【JavaScript 教程】第六章数组07— index() ：在数组中定位一个元素

【JavaScript 教程】第六章数组06— slice() ：复制数组元素

【JavaScript 教程】第六章数组05— splice()：删除、插入和替换

【JavaScript 教程】第六章数组04— JavaScript 队列