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

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

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

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

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

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

5、注意：如果这个数组为空，运用reduce是什么情况？

6、但是要是我们设置了初始值就不会报错，如下：

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

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

9、（1）计算数组中每个元素出现的次数

二、JS数组reduce()方法详解及用法总结

1、在JavaScript中，数组的reduce方法用于对数组中的所有元素执行累积运算。这个方法接收一个回调函数作为参数，该回调函数会为数组中的每个元素执行操作，并将结果返回以累积一个最终结果。

2、首先，让我们了解一下reduce的基本语法。reduce方法的参数通常包括一个回调函数和可选的初始值。

3、在没有提供初始值的情况下，reduce会使用数组的第一个元素作为初始值。例如，在下面的实例中，我们有一个包含四个元素的数组arr。当使用reduce方法且不提供初始值时，arr的第一个元素会被作为初始值。由于数组长度为4，reduce会执行3次循环。

4、如果提供了初始值，reduce会从这个值开始执行操作。在另一个例子中，我们同样使用包含四个元素的数组arr，但这一次我们提供了初始值，因此reduce会执行4次循环。

5、重要的是要意识到，对于空数组，reduce不会执行回调函数。如果在空数组中不设置初始值，则会抛出错误。因此，通常建议在使用reduce时始终设置初始值。

6、接下来，我们探讨reduce的基本用法。首先，使用reduce可以方便地求和或求积。例如，我们可以计算数组中所有元素的和或乘积。

7、此外，reduce还适用于对象。可以利用它对对象中的属性进行求和或其他运算。

8、在更高级的应用场景中，reduce可以实现一些复杂操作。例如，我们可以使用它来计算数组中每个元素出现的次数，实现数组去重，将二维数组转换为一维数组，或者处理多维数组，将其转换为一维数组。

9、总结而言，reduce方法是JavaScript中一个非常强大的工具，能够帮助我们对数组元素执行各种累积运算。理解其工作原理和用法，将使我们在处理数组数据时更加高效和灵活。

三、浅谈JS中 reduce() 的用法

1、过去有很长一段时间，我一直很难理解 reduce()这个方法的具体用法，平时也很少用到它。事实上，如果你能真正了解它的话，其实在很多地方我们都可以用得上，那么今天我们就来简单聊聊JS中 reduce()的用法。

2、 prev表示上一次调用回调时的返回值，或者初始值 init;

3、 cur表示当前正在处理的数组元素；

4、 index表示当前正在处理的数组元素的索引，若提供 init值，则索引为0，否则索引为1；

5、看上去是不是感觉很复杂？没关系，只是看起来而已，其实常用的参数只有两个： prev和 cur。接下来我们跟着实例来看看具体用法吧~

6、实现以下需求的方式有很多，其中就包含使用reduce()的求解方式，也算是实现起来比较简洁的一种吧。

7、由于传入了初始值0，所以开始时prev的值为0，cur的值为数组第一项3，相加之后返回值为3作为下一轮回调的prev值，然后再继续与下一个数组项相加，以此类推，直至完成所有数组项的和并返回。

8、由于未传入初始值，所以开始时prev的值为数组第一项3，cur的值为数组第二项9，取两值最大值后继续进入下一轮回调。

9、该方法用法与reduce()其实是相同的，只是遍历的顺序相反，它是从数组的最后一项开始，向前遍历到第一项。

10、详情请戳→简述forEach()、map()、every()、some()和filter()的用法