JS 中的 filter、map 和 reduce。何时何地使用？

介绍

在本文中，我们将介绍最常用的数组转换 JavaScript 方法：filter()、map()和reduce()。我们还将介绍在什么情况下应使用这些方法。

数组.filter()

顾名思义，filter 方法用于根据给定条件过滤数组中的元素。

条件成立的元素将被过滤并添加到一个新数组中，其他元素将被丢弃。最后，filter 方法将返回一个全新的数组。

句法

数组.过滤器((元素，索引，数组) => { ... } )

过滤器可以包含三个参数：当前过滤器element和index过滤器array本身。回调函数将根据我们的条件来过滤元素（您可以根据需要设置复杂的条件）。

我们通过一个例子来理解过滤方法。

假设你正在调用一个 API，该 API 返回包含某些详细信息的用户列表。你想根据各个用户的年龄来过滤此列表。

让我们编码...

const users = [
  {
    name: "Van Batchelder",
    city: "London",
    birthYear: 1998
  },
  {
    name: "Winter Rubino",
    city: "Madrid",
    birthYear: 1992
  },
  {
    name: "Yusuf Shea",
    city: "Paris",
    birthYear: 1990
  },
  {
    name: "Zion Shively",
    city: "Alabama",
    birthYear: 2002,
  }
];

const currentYear = new Date().getFullYear();
const filteredUsers = users.filter((user) => (currentYear - user.birthYear) > 25);

console.log(filteredUsers);
// [
//  {name: 'Winter Rubino', city: 'Madrid', birthYear: 1992},
//  {name: 'Yusuf Shea', city: 'Paris', birthYear: 1990}
// ]

你可能注意到了，回调函数返回布尔值true或false。根据这个返回值，元素会被添加或丢弃到新数组中。

这就是你需要了解的过滤方法。😊

数组.map()

map 方法用于迭代数组。在每次迭代中，它会对当前数组元素应用一个回调函数，最终返回一个全新的数组。

与过滤器不同，映射不会丢弃任何元素，而是操作元素的值。因此，您无法跳过任何元素。新数组的长度将与当前数组的长度相同。

句法

数组.map((元素，索引，数组) => { ... })

与过滤器相同，映射中可以包含三个参数。通常，我们需要一个元素值。🙂

让我们举一个容易理解的例子。假设你想将一串比特币价值转换为美元价值。🤩

所以一种方法是使用for循环。从零索引开始，直到数组的长度。在每个索引处将转换后的值赋值到新数组的相同位置。👇🏻

const bitcoinList = [1, 3, 5, 4, 2];
const dollarList = [];

const bitcoinValue = 62953.10; // It's not a constant check it later!! :)

for (let i=0; i<bitcoinList.length; i++) {
    dollarList[i] = bitcoinList[i]*bitcoinValue;
}

console.log(dollarList); // [62953.1, 188859.3, 314765.5, 251812.4, 125906.2]

但这就是地图的作用……

现在看看下面使用 map 编写的代码

const bitcoinList = [1, 3, 5, 4, 2];

const bitcoinValue = 62,858.20; // It changed :(

const dollarList = bitcoinList.map((bitcoin) => bitcoin * bitcoinValue);

console.log(dollarList); // [62953.1, 188859.3, 314765.5, 251812.4, 125906.2]

这里我使用了箭头函数的快捷方式，但你可以在最终返回修改后的元素之前做一些额外的工作。你可能已经注意到，回调函数返回了修改后的元素，该元素最终会被添加到新数组中。

所以这里我们将一个数组的值映射到另一个数组，这就是为什么这个方法被称为 map。

这就是你需要了解的 map 方法。欢迎在评论区补充你对 map 方法的任何其他了解。💬

数组.reduce()

与 filter 和 map 相比，它是最少使用的数组方法（但相信我，它很重要！）。原因可能是这个方法比较难理解（不过读完这篇文章之后就好理解了😉）。

顾名思义，reduce用于减少数组🙄

句法

reduce((上一个，当前，索引，数组) => { ... }, initialValue)

看看语法就不用担心。😊

举个例子你就明白了。

网上关于 Reduce 的示例太过简单，我们无法将它们与实际问题联系起来。不过，在这里，我将分享一个我遇到的实际场景，它引导我使用 Reduce。

我们以过滤方法中使用的用户数组为例。任务是获取年龄大于 25 岁的用户名列表。

在这个数组中，可能有一些用户的 birthYear 为NULL或undefined。因此，这里需要使用 filter 方法删除 birthYear 不合法的用户。

从过滤后的数组中，您只需要用户名，因此在这里您将使用 map 方法从用户对象中提取用户名。

瞧，你需要使用两种方法来完成这项任务。但如果我告诉你，你只用一种方法就可以达到这个结果，而且你知道我在说什么方法呢？

它是reduce。

让我们开始编码吧。

const users = [
  {
    name: "Van Batchelder",
    city: "London",
    birthYear: 1998
  },
  {
    name: "Winter Rubino",
    city: "Madrid",
    birthYear: null
  },
  {
    name: "Yusuf Shea",
    city: "Paris",
    birthYear: 1990
  },
  {
    name: "Zion Shively",
    city: "Alabama",
    birthYear: 2002,
  }
];

const currentYear = new Date().getFullYear();

const userNames = users.reduce((filterUsers, user) => {
  if (user.birthYear && (currentYear - user.birthYear) > 25) {
    filterUsers.push(user.name);
  }
  return filterUsers;
}, []);

console.log(userNames);
// ['Yusuf Shea']

让我们根据语法来理解这段代码。这里的filterUsers是我们的previous，user是我们的当前值，空数组 ([]) 是我们的from 语法。在回调函数中initialValue我们不需要index和。array

第一次迭代时，filterUsers根据给定的 initialValue 创建一个空数组。在函数体中，我们设置一个条件：如果用户有 birthYear 且年龄大于 25 岁，则将其推送，filterUsers否则返回filterUsers。最后，我们userNames得到了一个经过过滤和映射的列表。🤩

你可能会发现这个任务可以用其他方法解决，但相信我，这是我能给你的最好的解释例子reduce😎

简而言之，

filter：当您需要从数组中删除一些不需要的元素时。
map：将一个数组转换为另一个数组。
reduce：当您需要缩减数组时。

是的，就是这样。希望你喜欢我的文章。
如果你喜欢这篇文章，请分享并标记🔖这篇文章！

如果您使用 Twitter，请关注我，我会分享学习 Web 开发的精彩资源。🙏🏻

欢迎您提供反馈。🤗

🏃‍♂️ 让我们联系👇

🕊 Twitter：https://twitter.com/nehal_mahida（推特上见😃）

👨‍💻 Github：https://github.com/NehalMahida

支持🤗

如果您喜欢我的文章，请考虑喝杯咖啡支持我。☕

查看我在 DEV Community 上的其他文章👇

1. Async/Await 具有易于理解的示例。
2. 如何不更新 React 中的状态！！