JavaScript 中 数组的 reduce() 方法用法

1. 语法

   array.reduce(callback, [initValue])
   

   reduce为数组中每个元素依次调用callback函数，不包括数组中未赋值或删除的元素

   // 第一个参数，callback 接收四个参数
   function(total, currentValue, index, array){
       // 必须，用于执行每个数组元素的函数
   }
   // 回调参数解释
   total: 			// 必须，提供的初始值(initValue),或者上一次调用回调返回的值
   currentValue:	// 必须，数组中当前要被处理的元素
   index:			// 可选，当前元素在数组中的索引
   array:			// 可选，调用reduce的数组
   // 第二个参数
   initValue		// 可选，作为第一次调用 callback 的第一个参数
   

2. 实例解析 initValue 参数

   第一个例子：

   var array = [1, 2, 3, 4];
   var sum = array.reduce(function(total, currentValue, index, array) {
       console.log(total, currentValue, index);
       return total + currentValue;
   });
   console.log(array, sum);
   

   执行结果：

   1 2 1
   3 3 2
   6 4 3
   [1, 2, 3, 4] 10

   从执行结果可以看出，index是从 1 开始的，第一次 total 的值是 array 的第一个值。数组长度是4，但是reduce函数循环了3次。

   第二个例子：

   var array = [1, 2, 3, 4];
   var sum = array.reduce(function(total, currentValue, index, array) {
       console.log(total, currentValue, index);
       return total + currentValue;
   }, 0);	// 注意：这里设置了 initValue 值 0
   console.log(array, sum);
   

   执行结果：

   0 1 0
   1 2 1
   3 3 2
   6 4 3
   [1, 2, 3, 4] 10

   这里 index 是从 0 开始的，第一次 total 的值是我们设置的 initValue 的值 0 , 数组长度是 4 ，reduce 循环了 4 次。

   结论：如果不设置 initValue 的值，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果设置 initialValue 的值，从索引0开始。

   需要注意的是，如果 array 是一个空数组，这时候调用 reduce 没有设置 initValue 会报错，所以调用 reduce 函数时，设置 initValue 更安全。

3. 简单用法

   数组求和求乘积

   var array = [1, 2, 3, 4];
   var sum = array.reduce(function(total, currentValue){
       return total + currentValue
   });
   var mul = array.reduce(function(total, currentValue){
       return total * currentValue
   });
   console.log(sum);	// 10
   console.log(mul);	// 24
   

4. 复杂用法
   计算数组中每个元素出现的次数

     let names = ['赵云', '刘备', '张飞', '关羽', '赵云'];
     let nameNum = names.reduce((pre, cur) => {
     	if (cur in pre) {
     		pre[cur]++
     	} else {
     		pre[cur] = 1
     	}
     	return pre
     }, {});
     console.log(nameNum);	// {赵云: 2, 刘备: 1, 张飞: 1, 关羽: 1}
   

   数组去重

     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]
   

   将多维数组转化为一维（数组扁平化）

     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]