Map、Reduce 和 Filter：JS 数组方法深解

2023-12-12 08:05:26

欢迎来到 JavaScript 数组方法的奇妙世界！今天，我们将探索 map、reduce 和 filter 这三个超级好用的方法，它们将帮助您轻松实现数据转换、聚合和过滤。准备好了吗？那就让我们开始吧！

Map：逐个转换

首先，让我们从 map 方法开始。map 方法就像一个神奇的传送带，它可以将数组中的每个值都送入一个转换函数，然后返回一个包含所有转换结果的新数组。这个转换函数可以根据您的需要进行自定义，让您随心所欲地改变数组中的值。

举个例子，假设您有一个包含学生成绩的数组：[85, 90, 75, 95, 80]。您想把这些分数都转换成对应的评级，比如 A、B、C、D、E。这时候，map 方法就派上用场了。

您可以使用以下代码来实现：

const grades = [85, 90, 75, 95, 80];
const ratings = grades.map(grade => {
  if (grade >= 90) {
    return 'A';
  } else if (grade >= 80) {
    return 'B';
  } else if (grade >= 70) {
    return 'C';
  } else if (grade >= 60) {
    return 'D';
  } else {
    return 'E';
  }
});

console.log(ratings); // 输出：[ 'B', 'A', 'C', 'A', 'B' ]

是不是很简单？通过 map 方法，您就可以轻松地将数组中的每个分数都转换成对应的评级，并存储在一个新数组中。

Reduce：聚合计算

接下来，让我们看看 reduce 方法。reduce 方法就像一个超级计算器，它可以将数组中的所有值聚合为一个单一的返回值。这个返回值可以是数组、对象、字符串或任何您想要的数据类型。

举个例子，假设您有一个包含销售额的数组：[100, 200, 300, 400, 500]。您想计算出这些销售额的总和。这时候，reduce 方法就派上用场了。

您可以使用以下代码来实现：

const sales = [100, 200, 300, 400, 500];
const totalSales = sales.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(totalSales); // 输出：1500

通过 reduce 方法，您就可以轻松地计算出数组中所有销售额的总和。

Filter：条件过滤

最后，让我们来看看 filter 方法。filter 方法就像一个精明的筛选器，它可以根据您指定的条件，从数组中过滤出符合条件的值，并返回一个包含这些值的数组。

举个例子，假设您有一个包含学生信息的数组，其中包含姓名、年龄和性别等信息。您想过滤出所有年龄大于 18 岁的学生。这时候，filter 方法就派上用场了。

您可以使用以下代码来实现：

const students = [
  { name: 'John', age: 18, gender: 'male' },
  { name: 'Mary', age: 20, gender: 'female' },
  { name: 'Bob', age: 16, gender: 'male' },
  { name: 'Alice', age: 22, gender: 'female' }
];

const adultStudents = students.filter(student => {
  return student.age > 18;
});

console.log(adultStudents);
// 输出：[
//   { name: 'John', age: 18, gender: 'male' },
//   { name: 'Mary', age: 20, gender: 'female' },
//   { name: 'Alice', age: 22, gender: 'female' }
// ]