JS数组reduce()方法详解及高级技巧

reduce 方法

对数组中的所有元素调用指定的回调函数。
该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。

返回值
通过最后一次调用回调函数获得的累积结果。

异常
当满足下列任一条件时，将引发 TypeError 异常：
callbackfn 参数不是函数对象。
数组不包含元素，且未提供 initialValue。

备注

如果提供了 initialValue，则 reduce 方法会对数组中的每个元素调用一次 callbackfn 函数（按升序索引顺序）。
如果未提供 initialValue，则 reduce 方法会对从第二个元素开始的每个元素调用 callbackfn 函数。

回调函数语法
回调函数的语法如下所示：
function callbackfn(previousValue, currentValue, currentIndex, array1)

1、语法

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

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

	callback （执行数组中每个值的函数，包含四个参数）
	
	    1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
	    2、currentValue （数组中当前被处理的元素）
	    3、index （当前元素在数组中的索引）
	    4、array （调用 reduce 的数组）
	
	initialValue （作为第一次调用 callback 的第一个参数。）

2、实例解析 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;
})
//报错，"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); // [] 0

所以一般来说我们提供初始值通常更安全

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

4、reduce的高级用法

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

1、由于设置了迭代初始值，pre的第一个值是一个空对象，此时cur为name，然后进行判断，发现在pre中没有name属性，所以就将name对应的属性值赋为1；
2、后面没有重复的是一样的道理，如果碰到重复值，就会将该属性值加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]

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

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]

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

 const arr = [{
            "industry": "IT",
            "industry2": "computer",
            "prevNum": 100,
            "unreachableNum": 1,
            "nurturingNum": 2,
            "followUpNum": 3,
            "lessGc5Num": 4,
            "gc5Num": 5
        }]
        const result = arr.reduce((prev, cur, index, arr) => {
            const {
                industry,
                industry2,
                ...other
            } = cur
            const now = Object.keys(other).map(key => {
                return {
                    name: key,
                    value: other[key],
                    industry
                }
            })
            prev.push(...now)
            return prev
        }, [])
        console.log(result)
/*
 [{name: "prevNum", value: 100, industry: "IT"},
 {name: "unreachableNum", value: 1, industry: "IT"},
 {name: "nurturingNum", value: 2, industry: "IT"},
 {name: "followUpNum", value: 3, industry: "IT"},
 {name: "lessGc5Num", value: 4, industry: "IT"},
 {name: "gc5Num", value: 5, industry: "IT"}]
 */

（5）、对象里的属性求和

这里主要就是利用reduce第一个参数是迭代，可以通过初始化这个参数的数据类型，达到想实现的效果。

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