关于 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。