JavaScript中reduce的用法

一、语法

 arr.reduce(function(prev,cur,index,arr){
    ...
   }, init);

其中,arr表示原数组
        prev表示上一次调用回调时的返回值,或者初始值init  
        cur表示当前正在处理的数组元素  
        index表示当前正在处理的数组元素的索引,若提供init值,则索引为0,否则索引为1 
        init表示初始值

二、实例

首先提供一个原始数组

let arr = [ 3,9,4,3,6,0,9];

接下来就是实现以下需求

1.求数组项之和

let sum  = arr.reduce(function(prve,cur){
     return prve + cur
},0)
//由于传入了初始值0,所以prve开始是值为0,cur的值为数组的第一项3,相加之后返回作为下一轮回调的prve值,再继续与下一个数组元素项相加,直到完成数组所有元素项相加

 2.求数组项最大值

let max = arr.reduce(function(prve,cur){
     return Math.max(prve,cur)
})
//由于未传入初始值,所以开始时prve的值为数组的第一项3,cur的值为数组的第二项9,取两个值的最大值后继续进入下一个回调直到比较出数组项所有的元素

3.数组去重

let newArr = arr.reduce(function(prve,cur){
     prve.indexOf(cur) === -1 && prve.push(cur)
     return prve
},{})
//1.初始化一个空数组
//2、将需要去重处理的数组中的第一项在初始化数组中查找,如果找不到(空数组中肯定找不到),就将该项添加到初始化中
//3.将需要去重处理的数组中的第二项在初始化数组中查找,如果找不到,就将该项继续添加到初始化数组中
//4继续一直到将需要去重处理的数组中的第n项在初始化数组中查找,如果找不到,就将该项继续添加到初始化数组中
//5.最后将这个初始化数组返回

三、其他相关方法

1.reduceRight()

该方法用法与reduce()其实是相同的,只是便利的顺序相反,它是从数组的最后一项开始,向前遍历到第一项

2.   forEach()、map()、every()、some()和filter() 这几个方法我另做详解 请点击

重点总结了一下:reduce()是数组的归并方法,与forEach()、map()、filter()等迭代方法一样都会对数组每一项进行遍历,但是reduce()可同事将前面数组项遍历产生的结果与当前遍历项进行运算,这一点是其他的方法所没有的

四、高级用法

 1、各科成绩比重不一样,求结果

const result = [
     {subject: 'chinese' , score: 98 },
     {subject: 'math' , score: 80 },
     {subject: 'english' , score: 88 },
];
const dis = {
     chinese:0.5,
     math:0.4,
     english:0.1
}
let res = result.reduce((prve,cur)=> prve + dis[cur.subject] * cur.score,0)

2、加大难度,商品对应不同国家汇率不同,求总价格

let prices = [{price: 23}, {price: 45}, {price: 56}];
let rates = {
  us: '6.5',
  eu: '7.5',
};
let initialState = {usTotal:0, euTotal: 0};
let res = prices.reduce((accumulator, cur1) => Object.keys(rates).reduce((prev2, cur2) => {
  accumulator[`${cur2}Total`] += cur1.price * rates[cur2];
  return accumulator;
}, {}), initialState);

let manageReducers = function() {
  return function(state, item) {
    return Object.keys(rates).reduce((nextState, key) => {
        state[`${key}Total`] += item.price * rates[key];
        return state;
    }, {});
  }
};
let res1= prices.reduce(manageReducers(), initialState);

3、对象数组去重

let chatlists = [
  {name : 'xx', age : 18 },
  {name : 'xh', age : 15 },
  {name : 'xx', age : 18 },
  {name : 'xx', age : 19 },
  {name : 'xxz', age : 28 },
  {name : 'x4', age : 18 },
]
const hash1 = {};
chatlists = chatlists.reduce((obj, next) => {
  const hashId = `${next.name}_${next.age}`;
  if (!hash1[hashId]) {
    hash1[`${next.name}_${next.age}`] = true;
    obj.push(next);
  }
  return obj;
}, []);

compose函数  redux compose源码实现

function compose(...funs) {
    if (funs.length === 0) {
       return arg => arg;
    }
    if (funs.length === 1) {
       return funs[0];
    }
    return funs.reduce((a, b) => (...arg) => a(b(...arg)))
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值