了解 Javascript 中的 .map()、.filter() 和 .reduce() 数组方法。

数组是 JavaScript 中最常用的数据结构之一，从代码中存储基本数据到 API 调用获取结果，都离不开它。JavaScript 开发人员经常使用数组并对其进行某种形式的操作。

.map()、.reduce() 和 .filter() 是 ES6 中发布的一些鲜为人知的数组方法，它们使用更实用、更清晰的方法来执行数组操作。

在本文中，我们将详细介绍这些数组方法的工作原理以及如何使用它们执行一些基本操作。

概述

首先简单看一下这些数组方法的作用。

.map()方法返回一个新数组，其中每个元素都经过某种操作。

.filter()方法返回一个新数组，其中仅包含通过特定条件的数组元素。

.reduce()方法将原始中的所有元素减少为单个值。

这些数组方法是高阶函数，这意味着它们将回调函数作为参数。

.map() 方法

.map()方法返回一个新数组，其中包含对每个原始数组元素应用操作的结果。

.map方法接受一个回调函数作为参数，回调函数的一个重要参数是element参数，element参数被回调函数处理后返回一个元素到新数组中。

.map() 方法的语法

Array.map(function (element) {
    //operation on element
})

//using arrow function
Array.map(element => {
    //operation on element
})

使用 .map() 方法

let numbers = [24, 11, 8, 13]

const double = numbers.map(number=> score * 2)
console.log(double) 
// outputs [ 48, 22, 16, 26 ]

当我们运行上面的代码时，.map()函数循环遍历 numbers 数组，将迭代中的当前元素赋值为number，执行number * 2操作，最后将这个新值插入到新数组中。

请注意，.map()方法将始终返回与原始数组长度相同的数组。

在本教程的其余部分，我们将使用一个对象数组，其中包含一组员工的姓名、职业和分数。

const employees = [
  {
    name: "Peter",
    score: 25,
    occupation: "Engineer"
  },
  {
    name: "Judy",
    score: 30,
    occupation: "Banker"
  },
  {
    name: "Jarvis",
    score: 40,
    occupation: "Doctor"
  },
  {
    name: "Paul",
    score: 65,
    occupation: "Engineer"
  }
]

.map() 方法还可用于从数组中提取特定数据。
使用.map()方法，我们可以将所有员工的姓名获取到一个新数组中。

const names = employees.map(person => person.name)
console.log(names) 
//returns ["Peter","Judy","Jarvis","Paul"]

更多回调参数

.map ()回调函数可以采用更多参数，在执行数组操作时您可能会发现这些参数很有用。

Array.map((element, index, array) {operation})

元素参数用于访问迭代中的当前元素。

索引返回迭代中当前元素的索引

该数组返回完整的原始数组。

我个人还没有看到过数组参数的任何用例。如果你见过，请在下方评论。

.filter() 方法

.filter() 返回一个新数组，其中仅包含通过回调函数传递的条件的元素。

.filter() 方法的语法

Array.filter(element => {
    //condition
})

let numbers = [24, 11, 8, 13]

const filter =  numbers.filter(number => number > 10)
console.log(filter)  
// output [24,11,13]

当我们运行上面的代码时，.filter()方法会循环遍历数字数组，并检查当前数字是否大于 10，如果为真，则将该数字添加到新数组中。

使用 .filter() 方法

我们可以使用 .filter() 方法从上面的数据中获取工程师员工数组。

const allEngineers = people.filter(person => person.occupation === "Engineer")
console.log(allEngineers)
//Outputs 

[
  {
    name: "Peter",
    score: 25,
    occupation: "Engineer"
  },
{
    name: "Paul",
    score: 65,
    occupation: "Engineer"
  }
]

可选回调参数

.filter ()回调函数与 .map() 类似，也可以接受元素参数以外的参数，并且它们也具有相同的用途。

Array.filter((element, index, array) {condition})  

.reduce() 方法。

.reduce()方法用于组合数组中的所有元素以获取一个值。它计算数组中的所有元素并返回单个值。

.reduce()方法比上面提到的另外两个方法稍微复杂一些，因为它的回调函数需要一个称为“累加器”的特定参数，该参数用于保存操作期间的总值，并在操作完成后返回。这个“累加器”参数在 Reducer 函数中使用。

.reduce()方法的语法

Array.reduce((accumulator, element) {
    //reducer
}, initial value)

使用 .reduce 方法获取数字的总和。

let numbers= [24, 11, 8, 13]

const sum =  numbers.reduce((sum, number) => {
  return sum + number
}, 0)

console.log(sum)  
// outputs 56

当上面的代码运行时，.reduce()方法首先将sum的值设置为0（作为初始值），然后循环遍历数组，在每次迭代中，它将数字添加到sum的值中，并且在最后一个元素之后返回sum，在我们的例子中为 56。

虽然初始值可能是可选的，但始终建议指定它，以避免在空数组的情况下引发TypeError 。我们收到下面的错误消息。

未捕获的类型错误：减少没有初始值的空数组

链接方法

使用这些数组方法的优点之一是可以将它们串联起来。由于与.forEach()方法不同，这些数组方法会返回一个新数组，因此我们可以将它们串联起来，形成一个组合方法。

链接是组合数组方法以对它们执行操作并获取最终返回值。

使用链接我们可以获得得分高于 35 的员工的姓名。

const passed= people.filter(person => person.score > 35)
  .map(person => person.name)

console.log(passed)
 // outputs ["Judy","Jarvis","Paul"]

在上面的代码中，首先对数组执行 .filter() 操作，返回分数高于 35 的员工数组，然后 .map() 方法返回他们的姓名作为操作的最终值。

我们还可以仅得到工程师得分的总和。

const engineersScore= people.filter(person => person.occupation === "Engineer") //return an array of engineers only
    .map(person => person.score) //returns the array of engineers score
    .reduce((sum, element) => sum + element) //sums up the score.

console.log(engineersScore)
//outputs 90

结论

掌握新概念的最好方法是运用它们。尽可能使用这些方法代替.forEach() 。

如果您有任何反馈，请随时在下面发表评论，并与其他 Javascript 开发人员分享。

在Twitter上联系我们

我使用的资源

MDN