reduce()方法详解

定义和用法
reduce() 方法将数组缩减为单个值。
reduce() 方法为数组的每个值（从左到右）执行提供的函数。
函数的返回值存储在累加器中（结果/总计）。

注释：对没有值的数组元素，不执行 reduce() 方法。
注释：reduce() 方法不会改变原始数组。

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数值

参数	描述
function(total, currentValue, index, arr)	必需。为数组中的每个元素运行的函数。 函数参数： 参数 描述 total 必需。initialValue，或函数先前返回的值。 currentValue 必需。当前元素的值。 index 可选。当前元素的数组索引。 arr 可选。当前元素所属的数组对象
initialValue	可选。作为初始值传递给函数的值。

1、实例解析 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);


VM6252:3 1 2 1
VM6252:3 3 3 2
VM6252:3 6 4 3
VM6252:6 (4) [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);


VM282:3 0 1 0
VM282:3 1 2 1
VM282:3 3 3 2
VM282:3 6 4 3
VM282:6 (4) [1, 2, 3, 4] 10

结论：如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。

2、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

3、reduce的高级用法

（1）计算数组中每个元素出现的次数

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

（2）数组去重

let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]

（3）将二维数组转化为一维

let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

（4）将多维数组转化为一维

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

（5）对象里的属性求和

var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) //60