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

2022-01-20 12:02:47 阅读：225 来源： 互联网

标签：currentValue price reduce arr JS filter 数组

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

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

标签：currentValue,price,reduce,arr,JS,filter,数组
来源： https://blog.csdn.net/weixin_47809584/article/details/122590738

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

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

filter()

语法：

简单例子：

reduce()

语法：

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

简单例子：

较复杂的例子：