关于 JavaScript 中的 Array.reduce()

关于 JavaScript 中的 Array.reduce()

reduce() 方法在 MDN 的定义看起来很复杂：

reduce((previousValue, currentValue, currentIndex, array) => { ... }, initialValue)

我们先看一个简单的例子：对数组中元素求和。看完这个例子，reduce() 就很容易理解了。

var array = [1,2,3,4,5]

var total = 0;
for(var index = 0; index < array.length; index++)
{
    total += array[index];
}

console.log( total );

虽然这个例子非常简单，还是做一点说明。

为了完成这个针对数组中每个元素的求和操作，我们首先定义了一个用来保存每次累加和的变量 total，它用来提供初始值和每次累加之后的当前结果，也可以说是上一次累加之后的结果。它的值每次更新，并被用于下一次的累加。所以，它的初始值设置为 0。

在实际的循环中，我们需要拿到数组中每个元素的值，然后拿这个当前元素的值与上一次处理的结果进行一个求和的运算，运算的结果重新又回到这个合计的 total 中，它又返回给了下一次的运算。这里虽然没有使用 return，但是隐含了这样的处理。

所以，我们再看一下这个 reduce() 函数，它就是用来帮助我们简化此类操作的函数。

initialValue 就是 total 的初始值 0。

在针对每个元素的处理函数中，这个值就以 previousValue 出现了。每次取到数组中的一个元素的值，就是 array[index]，在每次处理过程中，total 的值都被更新，并被用于下一次的循环处理，这时候的 total 就可以看成 previousValue 了。它需要 return 以便用于下一轮的处理。

而每次处理的当前元素就是 currentValue 了。

所以，使用 reduce() 的形式，上面的代码就可以简化为下面的代码：

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

需要注意的是，需要通过 return 将当前的计算结果返回，以便下一次的时候以 previousValue 的形式使用。

总结

reduce() 需要我们提供一个高阶函数，reduce() 会针对数组中的 n 个元素调用 n 次该函数。

在调用这个高阶函数的时候，reduce() 会为我们提供 previousValue、currentValue、currentIndex 以及数组本身作为参数。在 JavaScript 参数是可选的，所以，实际使用哪些参数看你的需要了。

在高阶函数内部，你可以做任何需要的运算，但是注意要返回一个结果，供下一次高阶函数被调用的时候使用。

在第一次高阶函数被调用的时候，这个 previousValue 就来自于 initialValue。