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

关于 JavaScript 中的 Array.reduce()

上一篇:python之PIP命令管理


下一篇:SpringMVC 数据响应