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()用法