JS中filter()和reduce()方法介绍

2023-10-07 09:28:04

JS中filter()和reduce()方法介绍

filter()

filter()方法是ES6的新语法，和forEach,map类似。filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意：filter() 不会对空数组进行检测。filter不会改变原始数组。

语法：

array.filter(function(currentValue,index,arr),thisValue)

参数：
- 回调函数function(currentValue,index,arr) 必需，数组中每个元素需要调用的函数。
- 函数参数：currentValue(必需)：当前元素，index(可选)：当前元素的索引值， arr(可选)：当前元素属于的数组对象(可以理解为当前遍历的数组对象)。
- thisValue(可选)：对象作为该执行回调时使用，传递给函数，用作"this"的值。如果省略了thisValue，或者传入null、undefined，那么回调函数的this为全局对象。

简单例子：

 //返回数组中所有大于18的元素
let arr = [20,30,45,15,16]; 
let newArr = arr.filter((item)=>{
    return item > 18; 
})
console.log(newArr);//[20,30,45]

filter也不支持break和continue。map和filter返回值对比：map()中的return时将被刺迭代遍历时处理后的元素添加到map返回值中，filter中的return是用来判断本次迭代是否将元素放到返回之中，返回值是一个新数组，新数组中的每个元素为每次filter迭代时return为true的值。

reduce()

reduce()方法是ES6的新语法。reduce()方法接收一个函数作为累加器，数组中的每个值(从左到右)开始缩减，最终计算为一个值。reduce()可以作为一个高阶函数，用于函数的compose。
注意：reduce()对于空数组是不会执行回调函数的。

语法：

array.reduce(function(total,currentValue,currentIndex,arr),initialValue)

参数：
- 回调函数function(total,currentValue,currentIndex,arr) 必需，用于执行每个数组元素的函数。
- 函数参数：total(必需):初始值，或者计算结束后的返回值，currentValue(必需)：当前元素，currentIndex(可选)：当前元素的索引值， arr(可选)：当前元素属于的数组对象(可以理解为当前遍历的数组对象)。
- initialValue(可选)：传递给函数的初始值。

函数运行原理的简单说明：

如果你依然没有懂，那么再接着详细的介绍：

reduce(function(total,currentValue,currentIndex,arr),initialValue)

启动时，如果reduce定义了起始值(initialValue),则会将起始值赋给total，如果没有设定起始值，则将数组第一个值赋给total。运行时，第二次及后续执行时，会将前一次执行的结果赋给total。
启动时，如果total为起始值，currentValue则为数组第一个值，如果total为数组第一个值，currentValue则为第二个。运行时，每次调用，都会按顺序将currentValue当前位置的下一个值赋给currentValue。

简单例子：

//计算数组元素相加后的总和
let arr = [1,2,3,4,5];
let sum = arr.reduce((total,item)=>{
    return total + item;
},0);
console.log(sum);//15

较复杂的例子：

reduce()是一个很强大的方法，我们一般利用它来处理更加复杂的业务逻辑。

我们利用reduce()方法获取所有商品的总价格:

let goodList =[
     {
         good:'books',
         price:50
     },
     {
         good:'phone',
         price:4999
     },
     {
         good:'food',
         price:25
     }
 ];
 let count = goodList.reduce((prev,cur)=>{
     return prev + cur.price; 
 },0);
 console.log(count) //5074

如果用户手里有20元优惠券的话，我们可以让初始值为-20，也就是:

 let goodList =[
        {
            good:'books',
            price:50
        },
        {
            good:'phone',
            price:4999
        },
        {
            good:'food',
            price:25
        }
    ]
 let count = goodList.reduce((prev,cur)=>{
     return prev + cur.price; 
 },-20);
 console.log(count) //5054

假设每个商品都在打折，并且打折力度都不同，同时用户有10元优惠券，我们也可以通过reduce方便的计算总价格:

let goodList =[
        {
            good:'books',
            price:50
        },
        {
            good:'phone',
            price:4999
        },
        {
            good:'food',
            price:25
        }
    ]
let disCount = {
    books:0.8,
    phone:0.95,
    food:0.9
}
let count = goodList.reduce((prev,cur)=>{
    return cur.price * disCount[cur.good] + prev;
},-10);
console.log(count);//4801.55

求一串字符串中每个字符的出现次数:
这里请前往面试之求一串字符串中每个字符的出现次数查看

码农公寓

JS中filter()和reduce()方法介绍

filter()

语法：

简单例子：

reduce()

语法：

函数运行原理的简单说明：

简单例子：

较复杂的例子：

相关文章