JS数组reduce()方法详解及高级技巧

JavaScript019

JS数组reduce()方法详解及高级技巧,第1张

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。

先看第一个例子:

这里可以看出,上面的例子index是从1开始的,第一次的prev的值是数组的第一个值。数组长度是4,但是reduce函数循环3次。

再看第二个例子:

这个例子index是从0开始的,第一次的prev的值是我们设置的初始值0,数组长度是4,reduce函数循环4次。

结论: 如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。

注意:如果这个数组为空,运用reduce是什么情况?

但是要是我们设置了初始值就不会报错,如下:

所以一般来说我们提供初始值通常更安全

当然最简单的就是我们常用的数组求和,求乘积了。

(1)计算数组中每个元素出现的次数

(2)数组去重

(3)将二维数组转化为一维

(3)将多维数组转化为一维

(4)、对象里的属性求和

js reduce()  方法对数组中的每个元素执行一个由您提供的 reducer 函数(升序执行),将其结果汇总为单个返回值。

例如:

reducer 函数接收4个参数:

    Accumulator (acc) (累计器)

    Current Value (cur) (当前值)

    Current Index (idx) (当前索引)

    Source Array (src) (源数组)  

您的 reducer 函数的返回值分配给累计器,该返回值在数组的每个迭代中被记住,并最后成为最终的单个结果值。

如果数组为空且没有提供initialValue,会抛出错误TypeError: reduce of empty array with no initial value

可以通过添加initialValue来解决。

详见: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce