[译] 图解 Map、Reduce 和 Filter 数组方法

• 原文地址：An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods
• 原文做者：Una Kravets
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：熊贤仁
• 校对者：Endone、Reaper622

map、reduce 和 filter 是三个很是实用的 JavaScript 数组方法，赋予了开发者四两拨千斤的能力。咱们直接进入正题，看看如何使用（并记住）这些超级好用的方法！

Array.map()

Array.map() 根据传递的转换函数，更新给定数组中的每一个值，并返回一个相同长度的新数组。它接受一个回调函数做为参数，用以执行转换过程。

let newArray = oldArray.map((value, index, array) => {
  ...
});
复制代码

一个帮助记住 map 的方法：Morph Array Piece-by-Piece（逐个改变数组）

你能够使用 map 代替 for-each 循环，来遍历并对每一个值应用转换函数。这个方法适用于当你想更新数组的同时保留原始值。它不会潜在地删除任何值（filter 方法会），也不会计算出一个新的输出（就像 reduce 那样）。map 容许你逐个改变数组。一块儿来看一个例子：

[1, 4, 6, 14, 32, 78].map(val => val * 10)
// the result is: [10, 40, 60, 140, 320, 780]
复制代码

上面的例子中，咱们使用一个初始数组（[1, 4, 6, 14, 32, 78]），映射每一个值到它本身的十倍（val * 10）。结果是一个新数组，初始数组的每一个值被这个等式转换：[10, 40, 60, 140, 320, 780]。

Array.filter()

当咱们想要过滤数组的值到另外一个数组，新数组中的每一个值都经过一个特定检查，Array.filter() 这个快捷实用的方法就派上用场了。

相似搜索过滤器，filter 基于传递的参数来过滤出值。

举个例子，假定有个数字数组，想要过滤出大于 10 的值，能够这样写：

[1, 4, 6, 14, 32, 78].filter(val => val > 10)
// the result is: [14, 32, 78]
复制代码

若是在这个数组上使用 map 方法，好比在上面这个例子，会返回一个带有 val > 10 判断的和原始数组长度相同的数组，其中每一个值都通过转换或者检查。若是原始值大于 10，会被转换为真值。就像这样：

[1, 4, 6, 14, 32, 78].map(val => val > 10)
// the result is: [false, false, false, true, true, true]
复制代码

可是 filter 方法，只返回真值。所以若是全部值都执行指定的检查的话，结果的长度会小于等于原始数组。

把 filter 想象成一个漏斗。部分混合物会从中穿过进入结果，而另外一部分则会被留下并抛弃。

假设宠物训练学校有一个四只狗的小班，学校里的全部狗都会通过各类挑战，而后参加一个分级期末考试。咱们用一个对象数组来表示这些狗狗：

const students = [
  {
    name: "Boops",
    finalGrade: 80
  },
  {
    name: "Kitten",
    finalGrade: 45
  },
  {
    name: "Taco",
    finalGrade: 100
  },
  {
    name: "Lucy",
    finalGrade: 60
  }
]
复制代码

若是狗狗们的期末考试成绩高于 70 分，它们会得到一个精美的证书；反之，它们就要去重修。为了知道证书打印的数量，要写一个方法来返回经过考试的狗狗。没必要写循环来遍历数组的每一个对象，咱们能够用 filter 简化代码！

const passingDogs = students.filter((student) => {
  return student.finalGrade >= 70
})

/* passingDogs = [ { name: "Boops", finalGrade: 80 }, { name: "Taco", finalGrade: 100 } ] */
复制代码

你也看到了，Boops 和 Taco 是好狗狗（其实全部狗都很不错），它们取得了经过课程的成就证书！利用箭头函数的隐式返回特性，一行代码就能实现。由于只有一个参数，因此能够删掉箭头函数的括号：

const passingDogs = students.filter(student => student.finalGrade >= 70)

/* passingDogs = [ { name: "Boops", finalGrade: 80 }, { name: "Taco", finalGrade: 100 } ] */
复制代码

Array.reduce()

reduce() 方法接受一个数组做为输入值并返回一个值。这点挺有趣的。reduce 接受一个回调函数，回调函数参数包括一个累计器（数组每一段的累加值，它会像雪球同样增加），当前值，和索引。reduce 也接受一个初始值做为第二个参数：

let finalVal = oldArray.reduce((accumulator, currentValue, currentIndex, array) => {
  ...
}), initalValue;
复制代码

来写一个炒菜函数和一个做料清单：

// our list of ingredients in an array
const ingredients = ['wine', 'tomato', 'onion', 'mushroom']

// a cooking function
const cook = (ingredient) => {
  return `cooked ${ingredient}`
}
复制代码

若是咱们想要把这些做料作成一个调味汁（开玩笑的），用 reduce() 来归约！

const wineReduction = ingredients.reduce((sauce, item) => {
  return sauce += cook(item) + ', '
}, '')

// wineReduction = "cooked wine, cooked tomato, cooked onion, cooked mushroom, "
复制代码

初始值（这个例子中的 ''）很重要，它决定了第一个做料可以进行烹饪。这里输出的结果不太靠谱，本身炒菜时要小心。下面的例子就是我要说到的状况：

const wineReduction = ingredients.reduce((sauce, item) => {
  return sauce += cook(item) + ', '
})

// wineReduction = "winecooked tomato, cooked onion, cooked mushroom, "
复制代码

最后，确保新字符串的末尾没有额外的空白，咱们能够传递索引和数组来执行转换：

const wineReduction = ingredients.reduce((sauce, item, index, array) => {
  sauce += cook(item)
  if (index < array.length - 1) {
    sauce += ', '
  }
  return sauce
}, '')

// wineReduction = "cooked wine, cooked tomato, cooked onion, cooked mushroom"
复制代码

能够用三目操做符、模板字符串和隐式返回，写的更简洁（一行搞定！）：

const wineReduction = ingredients.reduce((sauce, item, index, array) => {
  return (index < array.length - 1) ? sauce += `${cook(item)}, ` : sauce += `${cook(item)}`
}, '')

// wineReduction = "cooked wine, cooked tomato, cooked onion, cooked mushroom"
复制代码

记住这个方法的简单办法就是回想你怎么作调味汁：把多个做料归约到单个。

和我一块儿唱起来！

我想要用一首歌来结束这篇博文，给数组方法写了一个小调，来帮助大家记忆：

Video

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。