JavaScript中renduce的用法

JavaScript中renduce的用法,第1张

一、语法
 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.renduce(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)))
}

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/939987.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-17
下一篇 2022-05-17

发表评论

登录后才能评论

评论列表(0条)

保存