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);

打印结果:

reducebykeyandwindow java 案例 reduce方法js_javascript


上面的代码中,由于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 函数