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);