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;});

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

 previousValuecurrentValueindexarrayreturn valuefirst call011[0,1,2,3,4]1second call122[0,1,2,3,4]3third call333[0,1,2,3,4]6fourth call644[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);

 previousValuecurrentValueindexarrayreturn valuefirst call1000[0,1,2,3,4]10second call1011[0,1,2,3,4]11third call1122[0,1,2,3,4]13fourth call1333[0,1,2,3,4]16fifth call1644[0,1,2,3,4]20

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