JavaScript 如何使用map()、filter()和reduce()方法

map()、filter()和reduce()是数组函数，它们允许我们根据自己的逻辑操作数组，并在应用修改操作后返回一个新数组。这些方法在JavaScript开发者中非常流行，因为它们使代码变得简短、简单和清晰。这些数组函数取代了使用for循环迭代数组的传统方法。这些方法也被称为高阶函数。这些方法使用回调函数来实现逻辑。

JavaScript map()方法： 这个方法用于在回调函数中对数组的每个元素应用特定的操作，然后返回更新后的数组。

语法:

arr.map(function(args){
    ...
})

示例： 在这个示例中，我们将使用map()方法将2添加到每个数组元素中

Javascript

var arr= [2,4,8,10] 
var updatedArr = arr.map(val=> val+2) 
console.log(arr); 
console.log(updatedArr);

输出：

(4) [2, 4, 8, 10]
(4) [4, 6, 10, 12]

JavaScript filter() 方法 : 该方法用于返回一个数组，该数组包含满足回调函数内部应用的条件的元素

语法：

arr.filter(function(){
    // condition
}) 

示例： 在这个示例中，我们将使用filter()方法来获取数组中小于5的元素。

JavaScript

var arr= [2,4,8,10] 
var updatedArr = arr.filter(val=> val<5) 
console.log(arr); 
console.log(updatedArr);

输出结果:

(4) [2, 4, 8, 10]
(2) [2, 4]

JavaScript reduce() 方法 ： ： 该方法用于将回调函数应用于数组中的每个元素，并返回单个元素

语法：

arr.reduce(function(){
    ...
}) 

例子： 在这个例子中，我们将使用reduce()方法来计算数组的总和。

JavaScript

var arr= [2,4,8,10] 
var updatedArr = arr.reduce((prev, curr)=> curr= prev+curr) 
console.log(arr); 
console.log(updatedArr);

输出

(4) [2, 4, 8, 10]
24

下表显示了上述方法的属性比较：