JS数组reduce()方法详解及高级技巧
一 简述
reduce()方法可以搞定的东西，for循环，或者forEach方法有时候也可以搞定，那为啥要用reduce()？这个问题，之前我也想过，要说原因还真找不到，唯一能找到的是：通往成功的道路有很多，但是总有一条路是最捷径的，亦或许reduce()逼格更高...
二 语法
arr.reduce(callback,[initialValue])
reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素。
- 回调函数callback （执行数组中每个值的函数，包含四个参数）：
previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
currentValue （数组中当前被处理的元素）
index （当前元素在数组中的索引）
array （调用 reduce 的数组） - initialValue （作为第一次调用 callback 的第一个参数。）
实例解析 initialValue 参数
示例一
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
})
console.log(arr, sum);
打印结果：
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10
这里可以看出，上面的例子index是从1开始的，第一次的prev的值是数组的第一个值。数组长度是4，但是reduce函数循环3次。
示例二
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
},0) //注意这里设置了初始值
console.log(arr, sum);
打印结果：
0 1 0
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10
这里可以看出，上面的例子index是从0开始的，第一次的prev的值是0。数组长度是4，但是reduce函数循环4次。
结论
如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。
如果这个数组为空，运用reduce是什么情况？
var arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
})
console.log(arr, sum); //报错，"TypeError: Reduce of empty array with no initial value"
但是要是我们设置了初始值就不会报错，如下：
var arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
},0) //注意这里设置了初始值
console.log(arr, sum);
所以一般来说我们提供初始值通常更安全
三 reduce的用法
reduce的简单用法
- 常用的数组求和，求乘积：
var arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x * y)
console.log( sum ); //求和，10
console.log( mul ); //求乘积，24
- 再升级一点，计算成绩:
假如一位同学的总成绩中，各科所占的比重不同，分别为50%，30%，20%，我们应该如何求出最终的权重结果呢？
var result = [
{subject: 'math',score: 88},
{subject: 'chinese',score: 95},
{subject: 'english',score: 80}
];
var dis={
math:0.5,
chinese:0.3,
english:0.2
}
var sum=result.reduce((prev,item)=>prev+item.score * dis[item.subject],0);
console.log(sum); //88.5
为了计算出权重之后的总值，我们在回调函数内部修改了数组当前项item，使它和权重比例关联起来item.score * dis[item.subject]，并重新将新修改的当前项传入回调函数进行计算。
reduce的高级用法
- 计算数组或字符串中每个元素出现的次数
var str="hello world";
var nums=str.split("").reduce((prev,item)=>{
prev[item]?prev[item]++:prev[item]=1;
return prev;
},{})
console.log(nums); //{h: 1, e: 1, l: 3, o: 2, " ": 1,w: 1,d: 1}
- 数组去重
var arr=[1,4,2,6,1,7,4];
var newArray=arr.reduce((prev,item)=>prev.includes(item)?prev:prev.concat(item),[]);
console.log(newArray); //[1,4,2,6,7]
- 对象数组去重
//需求：对象数组中去掉重复的对象
var person = [
{id: 0, name: "小明"},
{id: 1, name: "小张"},
{id: 2, name: "小李"},
{id: 3, name: "小孙"},
{id: 1, name: "小周"},
{id: 2, name: "小陈"},
];
var obj={}
person=person.reduce((prev,item)=>{
//如果临时对象中没有这个名字，就把这个item加入数组，并把这个item加入对象obj中。
if(obj[item.id]==undefined) {
prev.push(item);
obj[item.id]=1;
}
return prev;
},[])
console.log(person);
最后输出是：
[{id: 0, name: "小明"},
{id: 1, name: "小张"},
{id: 2, name: "小李"},
{id: 3, name: "小孙"}]
- 按属性分组对象
根据对象的属性，我们可以使用 reduce() 方法将对象数组分为几组。通过下面的代码片段，你可以清楚地理解这个概念。这里，result 对象数组有五个对象，每个对象都有 subject 和 marks 属性。如果分数大于或等于50，则该主题通过，否则，主题失败。 reduce() 用于将结果分组为通过和失败。首先，将 initialValue 分配给累加器，然后 push() 方法在检查条件之后将当前对象添加到 pass 和 fail 属性中作为对象数组。
const result = [
{subject: '物理', marks: 41},
{subject: '化学', marks: 59},
{subject: '高等数学', marks: 36},
{subject: '应用数学', marks: 90},
{subject: '英语', marks: 64},
];
let initialValue = {
pass: [],
fail: []
}
const groupedResult = result.reduce((accumulator, current) => {
(current.marks >= 50) ? accumulator.pass.push(current) : accumulator.fail.push(current);
return accumulator;
}, initialValue);
console.log(groupedResult);
最后输出是：
{
pass: [
{ subject: ‘化学’, marks: 59 },
{ subject: ‘应用数学’, marks: 90 },
{ subject: ‘英语’, marks: 64 }
],
fail: [
{ subject: ‘物理’, marks: 41 },
{ subject: ‘高等数学’, marks: 36 }
]
}
- 将二维数组转化为一维
var arr = [[0, 1], [2, 3], [4, 5]];
var newArr=arr.reduce((prev,item)=>prev.concat(item),[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]
拓展一下用apply方法将二维数组转化为一维
var arr = [[0, 1], [2, 3], [4, 5]];
var newArr=[].concat.apply([],arr);
console.log(newArr); // [0, 1, 2, 3, 4, 5]
- 将多维数组转化为一维
var arr = [[0, 1], [2, 3], [4,[5,6,7]]];
var newArr=function(arr) {
return arr.reduce((prev,item)=>prev.concat(Array.isArray(item)?arguments.callee(item):item),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]
附：
更多二维及多维数组转一维的方法，请参考flat()用法
