JavaScript 数组 reduce() 方法

JavaScript reduce() 语法

reduce() 是 JavaScript 数组的一个方法，它用于遍历一个数组。reduce() 方法会在回调函数中对数组每个元素进行 “累积操作”（如累加、累乘等），最终返回一个值。

语法：

arr.reduce(callbackFn, initValue)

说明：

reduce() 方法可以接收以下 2 个参数。

• callbackFn（必选）：是一个回调函数，所有数组元素都会依次执行该函数。
• initValue（可选）：累积操作的初始值。如果省略，则会将数组第一个元素作为初始值。

callbackFn 这个回调函数的形式如下：

function (total, currentValue, currentIndex, array) {
    ……
}

callbackFn 回调函数接收 4 个参数，说明如下。

• total（必选）：是函数的返回值（累积值）。
• currentValue（必选）：是当前元素的值。
• currentIndex（可选）：是当前元素的下标。
• array（可选）：表示当前数组对象（代表整个数组）。

JavaScript reduce() 摘要

JavaScript reduce() 示例

接下来，我们通过几个简单的例子来讲解一下 JavaScript reduce() 方法是如何使用的。

示例 1：reduce() 实现数组元素求和

const arr = [3, 9, 1, 12, 50, 21];
const result = arr.reduce(function(total, current){
    total += current;
    return total;
}, 0);
console.log(result);

运行结果如下。

96

分析：

想要对数组元素进行求和，我们需要使用 initValue 这个参数，给它设置一个初始值 0，以便用于累加。

reduce() 方法本质上是一个高阶函数。所谓的高阶函数，指的是一个函数的参数又是一个函数。在实际开发中，我们更推荐使用 “箭头函数” 的方式书写 reduce() 的回调函数。下面两种方式是等价的。

// 方式1：不使用箭头函数
const result = arr.reduce(function(total, current){
    total += current;
    return total;
}, 0);

// 方式2：使用箭头函数
const result = arr.reduce((total, current) => {
    total += current;
    return total;
}, 0);

此外，对于上面例子 reduce() 方法实现的功能，其实也可以使用 forEach() 方法来实现，代码如下：

const arr = [3, 9, 1, 12, 50, 21];
let result = 0;
arr.forEach((element) => {
    result += element;
});
console.log(result);

示例 2：reduce() 实现数组去重

const arr = [5, 1, 1, 3, 4, 3];
const resultArr = arr.reduce((acc, current) => {
    if(total.indexOf(current) === -1){
        acc.push(current);
    }
    return acc;
}, []);
console.log(resultArr);

运行结果如下。

[5, 1, 3, 4]

分析：

对于数组去重来说，我们需要建立一个空数组来保存结果，因此也需要借助 initValue 这个参数。

示例 3：reduce() 获取数组最值

const arr = [3, 9, 1, 12, 50, 21];
//最大值
const max = arr.reduce((result, current) => {
    result = Math.max(result, current);
    return result;
});
console.log(max);

//最小值
const min = arr.reduce((result, current) => {
    result = Math.min(result, current);
    return result;
});
console.log(min);

运行结果如下。

50
1

分析：

对于这个例子来说，我们是不需要借助累积的结果，因此不需要使用 initValue 这个参数。

reduce() 是数组的 “归并方法”，与 map()、filter()、forEach() 等迭代方法一样，都会对数组每一项进行遍历。但 reduce() 可以同时将上一次遍历产生的结果与当前遍历的元素进行运算，这一点是其他迭代方法无法企及的。

reduce() 与 reduceRight() 的区别

reduce() 和 reduceRight() 这两个方法非常相似，它们的功能也是一样的，只是略有区别。

• reduce()：会在回调函数中对数组每个元素 “从左到右” 进行累积操作（如累加、累乘等），最终返回一个值。
• reduceRight()：会在回调函数中对数组每个元素 “从右到左” 进行累积操作（如累加、累乘等），最终返回一个值。