js 数组的 reduce() 方法详解

reduce() 方法

reduce() 语法

reduce 的发音：[rɪ’djuːs]。中文含义是减少，但这个方法跟"减少"没有什么关系。

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。返回值是回调函数累计处理的结果。

语法：

arr.reduce(function (previousValue, currentValue, currentIndex, arr) {}, initialValue);

参数解释：

• previousValue：必填，上一次调用回调函数时的返回值

• currentValue：必填，当前正在处理的数组元素

• currentIndex：选填，当前正在处理的数组元素下标

• arr：选填，调用 reduce()方法的数组

• initialValue：选填，可选的初始值（作为第一次调用回调函数时传给 previousValue 的值）

在以往的数组方法中，匿名的回调函数里是传三个参数：item、index、arr。但是在 reduce() 方法中，前面多传了一个参数previousValue，这个参数的意思是上一次调用回调函数时的返回值。第一次执行回调函数时，previousValue 没有值怎么办？可以用 initialValue 参数传给它。

备注：绝大多数人在一开始接触 reduce() 的时候会很懵逼，但是没关系，有事没事多看几遍，慢慢地自然就掌握了。如果能熟练地使用 reduce() 方法，不仅能替代很多其他的数组方法，还能逐渐走上进阶之路，领先于他人。

为了方便理解 reduce()，我们先来看看下面的简单代码，过渡一下：

let arr1 = [1, 2, 3, 4, 5, 6];

arr1.reduce((prev, item) => {
    console.log(prev);
    console.log(item);
    console.log('------');
    return 88;
}, 0);

打印结果：

上面的代码中，由于return的是固定值，所以 prev 打印的也是固定值（只有初始值是 0，剩下的遍历中，都是打印 88）。

现在来升级一下，实际开发中，prev 的值往往是动态变化的，这便是 reduce()的精妙之处。我们来看几个例子就明白了。

reduce() 的常见应用

举例 1、求和：

计算数组中所有元素项的总和。代码实现：

const arr = [2, 0, 1, 9, 6];
// 数组求和
const total = arr.reduce((prev, item) => {
    return prev + item;
});

console.log('total:' + total);  // 打印结果：18

举例 2、统计某个元素出现的次数：

代码实现：

// 定义方法：统计 value 这个元素在数组 arr 中出现的次数
function repeatCount(arr, value) {
    if (!arr || arr.length == 0) return 0;	// 数组为空或者数组中没有这个元素，返回结果 0

    return arr.reduce((totalCount, item) => {
        totalCount += item == value ? 1 : 0;
        return totalCount;
    }, 0);
}

let arr1 = [1, 2, 6, 5, 6, 1, 6];

console.log(repeatCount(arr1, 6));  // 打印结果：3

举例 3、求元素的最大值：

代码实现：

const arr = [2, 0, 1, 9, 6];
// 求数组中的最大值
const maxValue = arr.reduce((prev, item) => {
    return prev > item ? prev : item;
    // return Math.max(prev, item)
});

console.log(maxValue);  // 打印结果：9

参考链接：

• JS reduce 函数