何时使用哪个数组函数？

为每个现有条目返回一个新条目：map()

返回仅包含部分现有条目的新数组：filter()

仅返回一个新事物：reduce()

对每个数组值执行某些操作但不返回任何内容：forEach()

最后说明

有时候，人们会大声喧哗，说“你应该多用 reduce”，或者“你不需要 filter，用 map 就行”，或者“For？为什么不用 forEach？”

事实是，数组及其所有迭代器函数可能会让初学者感到困惑，所以我将尝试通过从最后提出问题来为每个人简化事情：您想要得到什么？

简短版本

• 为每个现有事物返回一个事物：map()
• 仅返回一些现有的事物：filter()
• 仅返回一个新事物：reduce()
• 不返回任何东西，但对每个现有的东西做一些事情：forEach()

我将为您简要介绍一下每一个，然后使用较旧的非箭头函数语法以及较新的箭头函数语法提供示例。

为每个现有条目返回一个新条目：map()

如果你有一个数组，并且想对数组中的每个元素进行一些操作，并返回一个包含新值的新数组，那么这个方法map()就很适合你。这里有一个简单的函数，它接受一个数组，并将每个元素的值翻倍：

const originalArray = [1, 2, 3];
const newArray = originalArray.map(function(item) {
  return item * 2;
});
console.log(newArray); // -> [2, 4, 6]

使用较新的语法可以实现相同的效果：

const originalArray = [1, 2, 3];
const newArray = originalArray.map(item => item * 2);
console.log(newArray); // -> [2, 4, 6]

请注意，使用较新的箭头语法，我们无需使用 function 关键字、return 关键字或花括号。这是因为箭头函数为像这样的“简单”函数提供了隐式返回。您可以在此处阅读Wes Bos 撰写的有关箭头函数的更多信息。

返回仅包含部分现有条目的新数组：filter()

Filter 可能是最容易理解的数组函数，因为它的名字很贴切。Filter 接受一个数组值，对每个值执行函数或比较，然后返回一个新数组，其中包含通过测试的值（我们称之为“真值”）。

下面是一个示例，它接受一个数字数组并返回大于 5 的数字：

const originalArray = [1, 9, 4, 2, 42];
const newArray = originalArray.filter(function(item) {
  return item > 5;
});
console.log(newArray); // -> [9, 42]

这是带有箭头函数的过滤器部分：

const newArray = originalArray.filter(item => item > 5);

仅返回一个新事物：reduce()

有时你有一个数组，只想从中返回一个新值。Reduce 会接受一个数组，对每个值执行函数或比较，然后对所谓的“累加器”执行一些操作。这是一个更容易用例子来描述的函数，因为描述它的术语和函数本身一样令人困惑！

假设您有一个名称数组，并且想要计算名称“Bob”出现的次数：

const originalArray = ["Alice", "Bob", "Charlie", "Bob", "Bob", "Charlie"];
const numberOfBobs = originalArray.reduce(function(accumulator, item) {
  if (item === "Bob") {
    return accumulator + 1;
  } else {
    return accumulator;
  }
}, 0);
console.log(numberOfBobs); // -> 3

再次用箭头表示：

const numberOfBobs = originalArray.reduce((accumulator, item) => {
  if (item === "Bob") {
    return accumulator + 1;
  } else {
    return accumulator;
  }
}, 0);

如您所见，箭头函数这次并没有为我们节省太多的输入，因为我们必须向函数提供两个参数，然后在返回之前有逻辑，所以我们仍然需要花括号。

Reduce 函数末尾的 0 是累加器初始值，如果遇到的值为“Bob”，则加 1；否则，返回当前的累加器值。如果没有返回任何值，那么下次运行该函数时，累加器的值将为undefined。

对每个数组值执行某些操作但不返回任何内容：forEach()

有时你会想对一个数组中的值进行一些操作，但又不需要跟踪每次函数调用的返回值。这就是它forEach()的用途。

const originalArray = [1, 2, 3];
originalArray.forEach(function(item) {
  doSomething(item);
});

再次用箭头表示：

originalArray.forEach( item => doSomething(item); );

最后说明

简单又实用。以下是我为每个函数想出的最简单的用例，旨在尽可能让你轻松理解何时应该使用它们。这些函数可以完成大量任务，而且每个函数都有一个“高级”形式，可以显示当前索引：

arr.map((item, index) => {})
arr.filter((item, index) => {})
arr.reduce((accumulator, item, index) => {})
arr.forEach((item, index) => {})

如果你需要它，就使用它！