JS数组reduce()方法

​
reduce() 方法是 JavaScript 中数组的一个强大的内置方法，它允许你将数组中的所有元素累加到一个单一的结果中。reduce() 方法对于执行数组中的元素累加、合并或转换数据非常有用。

reduce() 方法的基本语法如下：

arr.reduce(callback(previousValue, currentValue, index, array), initialValue)​

• arr：需要操作的数组。
• callback：一个回调函数，用于处理每个数组元素。该函数接受四个参数：
  • previousValue：累加器累加回调的返回值; 它是上一次调用回调时返回的累积值，或者是提供的初始值（initialValue）。
  • currentValue：数组中正在处理的当前元素。
  • index：数组中正在处理的当前元素的索引（可选）。
  • array：调用 reduce() 方法的数组（可选）。

• initialValue：作为第一次调用回调函数时的第一个参数的值（可选）。
  reduce() 方法返回累加后的结果。
  下面是一些 reduce() 方法的示例：

示例一：

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: “小孙”}]

• 将二维数组转化为一维

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]