JavaScript中的filter与map的区别

概述

在 JavaScript 中，filter 和 map 都是操作数组的高阶函数。但是，它们用途不同，功能也有区别。在本主题中，我们将讨论 JavaScript 中 filter 和 map 的区别。

Filter() 方法

filter() 方法会创建一个新数组，新数组包含所有满足特定条件的元素。它接受一个回调函数作为参数，并对数组中的每个元素调用该回调函数。回调函数必须返回 true 或 false。如果回调函数为某个元素返回 true，则该元素会被添加到新数组中。如果返回 false，则不包含该元素。

示例 1

假设您有一个整数数组，并希望创建一个只包含偶数的新数组。

这是应用 filter 方法的方法

输出

[ 2, 4, 6 ]

在此示例中，回调函数通过检查元素除以 2 的余数是否为零来检查数组中的每个元素是否为偶数。如果余数为零，则函数返回 true，并将该元素包含在新数组中。

示例 2

让我们来看另一个 filter 方法的例子，并使用 filter() 技术来识别数组中的所有左脚球员。

输出

[
  { name: 'Jasu', footedness: 'left', position: 'forward' },
  { name: 'Loganadu', footedness: 'left', position: 'defense' }
]

Map() 方法

map() 方法会对每个数组元素调用一个函数，并将结果返回到一个新数组中。map 方法允许用户根据需要随意操作数组的元素，并将修改结果返回到一个全新的数组中。

map() 方法通过对原始数组中的每个元素进行修改来生成新数组。传递给 map() 的回调函数，与 filter() 一样，会对数组中的每个元素调用。为了包含在新数组中，回调函数必须返回新值。

示例

考虑您想从一组数字中构建一个新数组，该数组包含每个数字的平方。map 方法可以这样应用：

输出

[ 1, 4, 9, 16, 25 ]

在此示例中，回调函数获取数组中的每个元素并对其进行平方，然后返回新值。map() 方法创建一个包含转换后元素的新数组。

示例 2

让我们来看另一个 map 方法的例子，计算数组中年龄的平方根。

输出

[5, 6, 7, 8, 9]

filter() 和 map() 之间的主要区别之一是它们的返回值。filter() 方法始终返回一个包含原始数组中元素的一个子集的数组，该子集基于某些条件。相反，map() 方法始终返回一个新数组，其元素数量与原始数组相同，但每个元素都根据回调函数进行了转换。

filter() 和 map() 之间的另一个区别是回调函数的类型。filter() 的回调函数必须返回一个布尔值，指示是否应将元素包含在新数组中。map() 的回调函数可以返回任何值，该值将成为新数组中相应元素的新值。

值得注意的是，filter() 和 map() 都不会修改原始数组。相反，它们会创建一个新的数组，该数组是原始数组的子集或转换。

结论

总而言之，filter() 和 map() 都是 JavaScript 中有用的数组方法，但用途不同。filter() 方法用于根据某些条件创建一个包含原始元素子集的新数组，而 map() 用于根据回调函数创建一个包含每个元素都已转换的新数组。