详解JavaScript中数组的reduce方法

reduce方法概述

介绍

首先查看该方法的官方定义：reduce() 。该方法接收一个函数作为累加器（accumulator），从数组的第一个元素开始，按从左到右的顺序对数组元素进行缩减操作，最终返回一个单一的值。

初看定义可能感到抽象，实际上reduce接收的就是一个回调函数。这个回调函数会依次调用数组中的每一项，直到遍历完整个数组为止。

通过具体示例可以更容易理解其用法。

假设有一个包含数字的数组，需要计算这些数字的总和。传统做法是使用循环逐个累加，而使用reduce方法只需一行代码即可实现。

var total = [0,1,2,3,4].reduce((a, b)=>a + b); //10

参数详解与执行流程

接下来探讨该方法的具体工作原理。

reduce接收一个函数，该函数包含四个参数，分别是：

1、上一次调用回调函数返回的值（即累加器）;

2、当前正在处理的数组元素;

3、当前元素的索引;

4、被遍历的原始数组;

沿用上述数组示例，将这四个参数打印输出以观察其变化：

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
});

运行结果如下：

分析该结果可知，回调函数共执行了4次。由于未提供previousValue（初始值），reduce方法直接从数组的第二项开始调用，并将第一项作为初始的累加器值，一直执行到数组末尾。

reduce方法还接受第二个可选参数，该参数指定了第一次调用callback时累加器的初始值。在上述例子中，因为未提供第二个参数，所以从数组第二项开始计算。如果提供初始值为5，则执行结果如下：

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

此时，第一次调用时的previousValue（累加器）直接使用传入的第二个参数值。函数总共被调用了5次，即数组的length（长度）加1。

实战应用：扁平化数组

reduce方法功能强大，除了常规的累加运算，还可用于将二维数组扁平化为一维数组：

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
 return a.concat(b);
}, []);
// flattened == [0, 1, 2, 3, 4, 5]

总结

目前列举了两种常见用法，实际场景中reduce的应用远不止于此。以上就是本文的全部内容，希望这些内容能对您的学习或工作有所帮助。如有任何疑问，欢迎留言交流。