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 函数