对于许多开发者来说,JavaScript是函数式编程范式的入门。如果你以前没有遇到过回调函数,那么每个函数的JavaScript可能看起来有点滑稽。
在这篇快速文章中,我们将看到如何使用JavaScript的forEach函数来迭代一个数组的数据。我们将看看调用它的不同方法,并讨论何时使用它与传统的for循环。
使用每个函数的JavaScript
在JavaScript中,数组对象包含一个forEach 方法。这意味着在任何数组上,我们都可以像这样调用forEach 。
let fruits = ['apples', 'oranges', 'bananas'];
fruits.forEach(function (item, index) {
console.log(item, index)
})
这应该会打印出以下结果。
apples 0
oranges 1
bananas 2
让我们解释一下这是如何工作的。
- 我们向
forEach方法传递一个匿名函数。 - 在这个匿名函数中,我们包含了一些参数,以获得对当前
item和该项目所代表的数组中的数字index的访问。
我们提供给forEach 的函数有三个参数(其中两个是可选的)。
- (必填)当前元素 - 代表当前元素
- (可选)索引 - 返回当前索引
- (可选)数组--返回每个循环的整个数组
调用的替代方法
选项1:一个匿名函数
调用该函数的另一种方式中的第一种是利用匿名函数。这就是我们刚才看到的。
arr.forEach(function (item) { // Anonymous function
// Write what you'd like to happen here
})
选项2:使用箭头函数
第二个选择是利用箭头函数。
arr.forEach((item, index) => console.log(item, index))
试试这个。它允许你在单行上写循环。
选项3:一个回调函数
最后一个选择是利用一个回调函数,这实际上只是一个单独定义的函数,我们把它作为参数传给forEach 。
let fruits = ['apples', 'oranges', 'bananas'];
function printPretty (item, index) {
console.log(`${index} - ${item}`)
}
fruits.forEach(printPretty);
这应该打印出以下内容。
0 - apples
1 - oranges
2 - bananas
什么时候使用for循环与for循环
我们中的大多数人都是以传统的方式来学习循环的--你知道,就是那种带有计数器的循环,会被递增的。像这样。
let fruits = ['apples', 'oranges', 'bananas'];
for (let index = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
事实是,你可以使用传统的for循环或forEach 循环。这并不重要。
然而,使用forEach 循环的结果是,代码看起来更有声明性,更容易阅读,特别是当你处理嵌套循环时(我选择首先尽量避免)。