开始使用 ES6 数组方法 .filter()、.map() 和 .reduce()

JavaScript 数组探索器

ES6 带来了许多新功能，其中就包括一些非常实用的Array函数。日常使用中最常用的函数是.filter()、.map、.reduce()。在本文中，我将先通过示例来介绍每个函数，先介绍“旧”用法，然后再介绍这些新功能。

本文假设你了解箭头函数。如果你不知道它是什么，别担心。阅读我关于数组函数的博客文章的第一章，你应该就能理解这里发生了什么。

他们的共同点

所有这三个函数都是在 ES6（ECMAScript 2015）中引入的，并且是应用于 的Array函数。

另外，它们都被称为高阶函数。这意味着它们要么返回一个函数作为结果，要么接受其他函数作为参数。在本例中，是后者。理解这一点对于本课来说非常重要。

在内部，这些函数运行 forEach 循环，然后以某种方式将传递的函数应用于它正在迭代的数据。

。筛选（）

对我来说最容易理解的是，.filter()它的作用正如它的名字——获取现有数组并返回该数组的一部分，可能会跳过某些值。或者换句话说：取出我们不想要的项目。

拥有以下年龄的人群。

const people = [
    { name: 'John', age: 32},
    { name: 'Isabelle', age: 18},
    { name: 'Steve', age: 17},
    { name: 'Winston', age: 10},
    { name: 'Agnes', age: 82}
]

现在我们只想找到那些已成年的用户，或者换句话说，过滤掉未成年人。假设我们所在的国家/地区将18岁及以上视为成年。

如果我们不使用.filter()函数来编写此语句，它将是这样的：

let adults = []
people.forEach(person => {
    if(person.age >= 18) {
        adults.push(person)
    }
})

使用 ES6.filter()函数 if 看起来会像这样：

const adults = people.filter(person => person.age >= 18)

// Will outout the objects for John, Isabelle and Agnes...
console.log(adults)

让我们来分析一下...

• 作为参数，我们传递一个函数
• 该函数（对于此示例）采用一个参数（此处person：）
• 该参数指的是在 filter() 的 forEach 中迭代的当前元素。
• 我们传递的函数返回一个布尔值。该布尔值表示当前元素是否被过滤掉（true= 表示保留在数组中，false= 表示被跳过）。
• 作为此布尔值的条件，我们知道此人的年龄是否高于或等于 18 岁。

注意！为了简化这篇博文，我不会解释所有可以传递的参数。有关可选参数的更多详细信息，请参阅MDN 文档 filter()。

。地图（）

.map()也返回一个数组作为结果。但这次我们不会过滤任何内容，而是用根据原始数组计算出的数据填充新数组。

假设我们有一个以摄氏度为单位的数组：

const celsiusArray = [ 21.5, 33.5, -7.1, 12.6 ]

如果我们将其转换为相同的数组，但使用华氏度，我们可以按照传统方式进行操作：

let fahrenheitArray = []
celsiusArray.forEach(celsius => {
    fahrenheitArray.push((celsius * 9/5) + 32)
})

如果我们想使用 写同样的东西.map()，它看起来会像这样：

const fahrenheitArray = celsiusArray.map(celsius => (celsius * 9/5) + 32)

请注意，与.filter()示例不同，当我们使用该函数时，原始数组和输出数组的数组大小始终相同.map()。

让我们分析一下这里发生了什么……

• 作为参数，我们传递一个函数
• 该函数（对于此示例）采用一个参数（此处celsius：）
• 该参数指的是在 filter() 的 forEach 中迭代的当前元素。
• 我们传递的函数返回我们想要的任何类型的值
• 该值就是将插入到新数组中的值。

注意！为了简化这篇博文，我不会解释所有可以传递的参数。有关可选参数的更多详细信息，请参阅MDN 文档 map()。

。减少（）

此函数是三个函数中唯一一个不返回数组的函数。相反，它返回单个值。

这意味着，函数使用数组中的信息并进行计算。计算结果完全取决于我们传入的函数。

假设餐厅里消费的产品有以下几种：

const foodOrder = [
    { name: 'Pizza Diavola', price: 15.9 },
    { name: 'Sparkling Water', price: 2.9 },
    { name: 'Tiramisu', price: 6.5 }
]

如果我们想计算顾客票据上显示的食品总额（包括 17% 的增值税），如果我们不知道 .reduce() 函数，我们会执行以下操作：

let sum = 0
foodOrder.forEach(food => {
    sum += food.price
})

它.reduce()看起来是这样的：

const total = foodOrder.reduce(( accumulator, food ) => accumulator + food.price, 0);

请注意，除非像其他两个函数一样，.reduce()否则不会返回数组，而是返回单个值。

那么上面的例子中发生了什么？

• .reduce()遍历我们的数组，并对每个食物项调用我们的函数
• 第一项accumulator是循环到目前为止计算出的当前“总”值
• food是当前正在迭代的项目
• 我们传递的函数的返回值是我们想要做的任何计算，使用accumulator和currentValue（在本例中将两者相加）
• 只有一个小问题：大多数情况下，这种计算必须有一个初始值。幸运的是，ES6 为我们提供了一个可选参数（.reduce()函数中的第二个参数）。

注意！为了简化本文，我不会解释所有可以传递的参数。有关可选参数的更多详细信息，请参阅MDN 文档中关于 reduce() 的内容。