映射、过滤和减少

原文：https://medium.com/hackernoon/map-filter-and-reduce-67d408e06107

JavaScript 是一种具有许多功能的语言。解决一个问题没有单一的具体方法，你有以任何你想要的方式去解决它的自由。有许多方法可以进行异步调用和处理响应，有许多方法可以处理事件，也有许多方法可以处理数组操作。在本文中，我们将重点关注数组，以及它的原型上的内置方法如何让我们的生活变得更加轻松。

我们最常做的一件事就是迭代数组。也许我们要在人员列表中寻找某个人，或者我们要计算所有订单的总数。我经常要做的事情是从对象列表中只提取某些属性。当大多数开发人员需要一个工具来解决这样的任务时，他们会使用循环。

这里我们有一个平凡且完全真实的操作，将数组中的所有数字乘以 2，并将它们存储在一个新的数组中。注意这看起来有多不愉快。如果我们需要对数字进行条件检查，情况会变得更糟:

幸运的是，我们可以使用内置的 map、filter 和 reduce 高阶函数来简化这些代码，并将这些操作写在一行中，从而提高我们的整体代码质量。在我们开始之前——高阶函数是 JavaScript 中常见的术语。这些函数接受输入或返回另一个函数。您已经在事件回调或请求中使用了它们，但是知道这个术语是有好处的。Map、filter 和 reduce 都是特设的，因为它们将函数作为参数，正如您将看到的那样。

地图

Map 是数组对象原型上的一个函数，它接受单个输入—一个回调函数。map 所做的是遍历数组中被调用的每个元素，并执行该函数。回调被传递给我们当前映射的元素，这样我们就可以进行任何我们需要的转换或计算。在我们遍历每个元素之后，map 将返回一个包含映射结果的新数组。

Map 一开始可能会有一点误导，但是一旦你习惯了它，你就会更喜欢它而不是 loops。这与我们在文章前面提到的例子相同，但是只用了一行代码。我们正在利用 ES6 箭头函数来尽可能地简化我们的代码。我们省略了输入 x 周围的括号，因为它是单个输入，我们也可以省略 return 语句。在较旧的语法中，该函数如下所示:

尽管如此，还是很干净，比循环要好，但我个人的偏好是尽可能使用箭头函数。

过滤器

Filter 是 Array 对象原型上的另一个函数，它接受一个回调函数作为单个输入。Filter 将遍历数组中的所有值，它将执行回调函数并返回一个新数组，该数组只包含我们决定传递的值。

我们如何定义过滤规则？我们传递给 filter 的函数将访问它当前正在迭代的变量，并且必须返回 true 或 false。如果返回值为真，它将把它添加到结果数组中，如果为假，它将跳过它。

你看到这比我们之前的循环例子简单多了吗？回调函数中的表达式将返回 true 或 false，这对我们的函数来说已经足够了，我们甚至不需要 if 语句。

减少

Reduce 是这三个函数中最强大的，也是最难理解的一个。你可以用 reduce 做很多事情，你甚至可以用它来代替贴图和滤镜。在数组上再次调用它，它会将数组简化为一个变量。理解 reduce 最简单的例子是计算一个数字数组的总和。

reduce 和其他两个之间的另一个区别是，这里你必须在回调中使用两个变量。其中一个是我们正在迭代的当前值，另一个是持久值。在这个特殊的例子中，累加器变量将保存总数。为了清楚起见，我使用了更长的示例，但是也可以在一行中使用箭头函数来完成:

关于 reduce 的主要概念是，它将在完成后返回一个值——它在整个迭代过程中累积的值。与 map 和 filter 不同，reduce 除了接受回调函数之外，还接受第二个参数。它还接受一个初始累加器值，这意味着我们可以用它来做其他事情，而不仅仅是数学运算。我们甚至可以使用数组或对象作为初始值。一个激发你创造力的有趣例子是计算某个元素在列表中出现的次数。

链接

这些功能本身确实很强大，但是通过一起使用它们，我们可以充分利用它们。如上所述，这些函数中的每一个都返回一个新的数组，而不是修改现有的数组。因此，我们可以一个接一个地使用它们，下一个总是返回前一个操作的结果。让我们来看一个更高级的例子，在这个例子中，我们将方法链接起来并使用命名函数:

摘要

理解 map、filter 和 reduce 将极大地提高你编写的代码的质量。为了方便阅读，这些例子过于简单，当然您可以使用任何类型的集合。请记住，使用这些函数不会改变你调用它们的数组，它们将返回一个全新的值，如果你不存储它或对它做些什么，它将会丢失。还要记住 reduce 中的函数输入顺序。如果你把它混合起来，你会得到意想不到的有趣的结果。

谢谢你的阅读！