JavaScript Array.prototype.reduce()理解

概述

reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值

语法

arr.reduce([callback, initialValue])

参数

callback
    执行数组中每个值的函数，包含四个参数:

    previousValue
        上一次调用回调函数返回的值，或者是提供的初始值（initialValue）
    currentValue
        数组中当前被处理的元素
    currentIndex
        当前被处理元素在数组中的索引, 即currentValue的索引.如果有initialValue初始值, 从0开始.如果没有从1开始.
    array
        调用 reduce 的数组

initialValue
    可选参数, 作为第一次调用 callback 的第一个参数。

返回值

最后一次调用回调函数返回的结果

描述

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：

    previousValu 上一次值
    currentValue 当前值
    currentIndex 当前值的索引
    array 数组

回调函数第一次执行时，previousValue 和 currentValue可能是两个不同值其中的一个，如果reduce有initialValue参数，那么 previousValue 等于initialValue ，并且currentValue 等于数组中的第一个值；如果reduce没有 initialValue 参数，那么previousValue 等于数组中的第一个值，currentValue等于数组中的第二个值。

注意: 如果没有initialValue参数, reduce从index为1开始执行回调函数, 跳过第一个index. 如果有initialValue参数,reduce 将从index为 0 开始执行回调.

如果数组是空的并且没有initialValue参数, 将会抛出TypeError错误. 如果数组只有一个元素并且没有初始值initialValue, 或者有initialValue但数组是空的, 这个唯一的值直接被返回而不会调用回调函数.

通常来说提供一个initialValue初始值更安全一点, 因为没有的话会出现3种可能的输出结果, 如下面的例子所示.

var maxCallback = ( pre, cur ) => Math.max( pre.x, cur.x );
var maxCallback2 = ( max, cur ) => Math.max( max, cur );

// reduce() 没有初始值 initialValue
[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42        结果1
[ { x: 22 }            ].reduce( maxCallback ); // { x: 22 } 结果2
[                      ].reduce( maxCallback ); // TypeError 结果3

reduce是如何工作的

例如执行下面的代码（无 initialValue时）

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
  return previousValue + currentValue;
});

回调被执行四次，每次的参数和返回值如下表：

	previousValue	currentValue	index	array	return value
first call	0	1	1	[0,1,2,3,4]	1
second call	1	2	2	[0,1,2,3,4]	3
third call	3	3	3	[0,1,2,3,4]	6
fourth call	6	4	4	[0,1,2,3,4]	10

reduce 的返回值是回调函数最后一次被调用的返回值（10）。

你也可以使用箭头函数替代上面的函数, 下面的代码有同样的输出结果:

[0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr );

如果把初始值作为第二个参数传入 reduce，结果如下（有initialValue时）：

[0,1,2,3,4].reduce( (previousValue, currentValue, currentIndex, array) => {
  return previousValue + currentValue;
}, 10);

	previousValue	currentValue	index	array	return value
first call	10	0	0	[0,1,2,3,4]	10
second call	10	1	1	[0,1,2,3,4]	11
third call	11	2	2	[0,1,2,3,4]	13
fourth call	13	3	3	[0,1,2,3,4]	16
fifth call	16	4	4	[0,1,2,3,4]	20

最后一次函数调用的返回值 (20) 作为reduce函数的结果被返回.