JavaScript forEach | 在JS中通过数组循环操作

97 阅读2分钟

对于许多开发者来说,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

让我们解释一下这是如何工作的。

  1. 我们向forEach 方法传递一个匿名函数
  2. 在这个匿名函数中,我们包含了一些参数,以获得对当前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 循环的结果是,代码看起来更有声明性,更容易阅读,特别是当你处理嵌套循环时(我选择首先尽量避免)。