我的新朋友 filter() 和 map()

2025-06-10

我的新朋友 filter() 和 map()

今天我学习了箭头函数。不得不说,一开始我很难理解一个函数可以接受另一个函数作为其参数。不过我想,随着时间的推移,我会逐渐理解的。

无论如何,我了解到的一个非常有趣的工具是方法filter()map()

他们做什么?

最基本的答案是他们基于旧数组创建一个新数组。

它们使用一个函数来检查或操作数组的元素,并根据操作结果创建一个仅包含部分元素或修改元素的新数组。让我们看看它们各自的工作原理。

筛选()

filter()接受一个函数,并用它来过滤数组中的元素。它会返回一个仅包含满足条件的元素的新数组。例如:

const array = [1, 5, 6, 7, 8, 12, 15] //We have an array with several numbers

//But we want an array with only even numbers
const newArr = array.filter((num) => num % 2 === 0) //newArr = [6, 8, 12]

现在我们有了一个新的数组newArr,它只包含 中的偶数array。这种方法允许我们从给定数组中选择所需的元素,而无需创建遍历每个元素的循环。

地图()

map()接受一个函数,并在数组的每个元素上调用它。它会返回一个包含修改后元素的新数组。例如:

const array = [1, 5, 6, 7, 8, 12, 15] //Again, array with several numbers

//For some reason, we would like them to be multiplied by 10
const newArr = array.map((num) => num * 10) //newArr = [10, 50, 60, 70, 80, 120, 150]

等等,情况会更好。如果我们想过滤数组元素修改它们的值,会发生什么?好吧,我们可以像这样同时调用这两个方法:

const newArr = array.filter(function).map(function)

基于我们之前的示例,假设我们要筛选一个数组,只取出偶数,然后将其扩大十倍。具体方法如下:

const array = [1, 5, 6, 7, 8, 12, 15] //Our beloved starting array

const newArr = array.filter((num) => num % 2 === 0).map((num) => num * 10) //newArr = [60, 80, 120]

结论

当我们想要通过仅获取其中的一些元素或对每个元素调用一个函数来基于旧数组创建数组时,我们可以使用这些方法filter()map()使我们的生活更轻松。

鏂囩珷鏉ユ簮锛�https://dev.to/savagepixie/my-new-friends-filter-and-map-74a
PREV
JavaScript 中的 Promise 简介
NEXT
使用 React Hooks 获取数据