全网reduce实例最全!

2,513 阅读2分钟

reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(上一次回调的返回值),当前元素值,当前索引,原数组

语法:arr.reduce(callback,[initialValue])

callback:函数中包含四个参数

  • previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
  • currentValue (数组中当前被处理的元素)
  • index (当前元素在数组中的索引)
  • array (调用的数组) initialValue (作为第一次调用 callback 的第一个参数。)

reduce累加

const arr = [3,9,4,3,6,0,9]
const sum = arr.reduce((pre, item) => {
    return pre + item
}, 0)
console.log(sum) // 34

求数组项最大值

var max = arr.reduce((prev, cur) => {
    return Math.max(prev,cur);
});

数组去重

var newArr = arr.reduce((prev, cur) => {
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);

扁平一个二维数组

var arr = [[1, 2, 8], [3, 4, 9], [5, 6, 10]];
var res = arr.reduce((x, y) => x.concat(y), []);

将多维数组转化为一维

var arr = [[0, 1], [2, 3], [4,[5,6,7]]]
var newArr = function(arr) {
	return arr.reduce((pre, cur) => {
		pre.concat(Array.isArray(cur) ? newArr(cur) : cur)
	}, [])
}
console.log(newArr(arr))

高级用法 使用reduce方法可以完成多维度的数据叠加

计算总成绩,且学科的占比不同

const scores = [
	{ subject: 'math', score: 88 },
    { subject: 'chinese', score: 95 },
  	{ subject: 'english', score: 80 }
];
const dis = {
	math: 0.5,
  	chinese: 0.3,
  	english: 0.2
}
const sum = scores.reduce((pre,item) => {
	return pre + item.score * dis[item.subject]
},0)
console.log(sum) // 88.5

高级用法 递归利用reduce处理tree树形

var data = [
	{
		id: 1,
		name: "办公管理",
		pid: 0,
		children: [
        	{
             	id: 2,
                name: "请假申请",
                pid: 1,
                children: [{ id: 4, name: "请假记录", pid: 2 }],
             },
             { id: 3, name: "出差申请", pid: 1 },
         ]
	},
    {
     	id: 5,
        name: "系统设置",
        pid: 0,
        children: [{
        	id: 6,
            name: "权限管理",
            pid: 5,
            children: [
                    { id: 7, name: "用户角色", pid: 6 },
                    { id: 8, name: "菜单设置", pid: 6 },
            ]            
         }]
     }];
     const arr = data.reduce(function(pre,item){
     	const callee = arguments.callee //将运行函数赋值给一个变量备用
     	pre.push(item)
     	if(item.children && item.children.length > 0) item.children.reduce(callee,pre); //判断当前参数中是否存在children,有则递归处理
         return pre;
     },[]).map((item) => {
         item.children = []
         return item
     })
     console.log(arr)	

计算一个字符串中每个字母出现次数

 const str = 'jshdjsihh';
     const obj = str.split('').reduce((pre,item) => {
         pre[item] ? pre[item] ++ : pre[item] = 1
         return pre
  },{})
 console.log(obj) // {j: 2, s: 2, h: 3, d: 1, i: 1}

数组对象中的用法

比如生成“老大、老二和老三”

const objArr = [{name: '老大'}, {name: '老二'}, {name: '老三'}];
const res = objArr.reduce((pre, cur, index, arr) => {
  if (index === 0) {
    return cur.name;
  }
  else if (index === (arr.length - 1)) {
    return pre + '和' + cur.name;
  }
  else {
    return pre + '、' + cur.name;
  }
}, '');

对象里的属性求和

var arr = [
	{subject: 'math', score: 10},
	{subject: 'chinese', score: 10},
	{subject: 'english', score: 10}
]
var sum = arr.reduce((pre, cur) => {
	return cur.score + pre
}, 0)
console.log(sum)

高级用法 商品对应不同国家汇率不同,求总价格

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

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