JavaScript reduce 方法详解攻略

前言

reduce 是 JavaScript 数组原型对象上的一个强大方法，它允许我们将数组中的所有元素按照指定的逻辑累积计算为一个单一的值。作为 JavaScript 开发者必须掌握的高阶函数之一，reduce 提供了高度的灵活性，可以实现从简单的数组求和到复杂的对象统计等多种功能。本攻略将全面解析 reduce 方法的定义、参数、使用场景及其在实际开发中的应用技巧。

reduce 方法的基本定义与语法

官方定义

reduce 方法对数组中的每个元素执行一个由您提供的 reducer 函数（升序执行），将其结果汇总为单个返回值。该方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值[10]。

语法结构

reduce 方法的基本语法为：

arr.reduce(callback, initialValue)

参数说明

reduce 方法接受两个参数：

回调函数的参数

传递给 reduce 方法的回调函数即callback包含四个参数：

• accumulator（必需）：上一次调用回调函数返回的值，或者 initialValue（如果指定了初始值）
• currentValue（必需）：当前元素的值
• currentIndex（可选）：当前元素在数组中的索引
• array（可选）：调用 reduce 的数组[15]

执行过程

reduce 方法的执行过程如下：

reduce 方法的使用场景与示例

求数组元素总和

最常见的一个例子是使用 reduce 来计算一个数值数组中所有数的总和：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出: 15

在这个例子中，我们提供了一个初始值 0，然后将每个元素的值累加到 accumulator 上。

求数组元素的平均值

除了求和之外，reduce 还可以与数组的长度属性结合使用，计算数组元素的平均值：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
const average = sum / numbers.length;
console.log(average); // 输出: 3

求最大值或最小值

reduce 可以用来找出数组中的最大值或最小值：

const numbers = [4, 2, 7];
const max = numbers.reduce((a, b) => Math.max(a, b), –Infinity); // 7
const min = numbers.reduce((a, b) => Math.min(a, b), Infinity); // 2

处理对象数组

reduce 可以用来处理对象数组，例如累加对象的某个属性：

const arr = [{x: 1}, {x: 2}, {x: 3}];
const sum = arr.reduce((acc, obj) => acc + obj.x, 0);
console.log(sum); // 输出: 6

数组去重

reduce 可以用来实现数组去重的功能：

const arr = [1, 2, 3, 3, 2, 1, 4];
const uniqueArr = arr.reduce((acc, cur) => {
if (!acc.includes(cur)) {
acc.push(cur);
}
return acc;
}, []);
console.log(uniqueArr); // 输出: [1, 2, 3, 4]

将数组元素转换为对象

reduce 可以用来将数组元素转换为对象结构：

const users = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
const userById = users.reduce((acc, user) => {
acc[user.id] = user;
return acc;
}, {});
console.log(userById); // 输出: {1: {id: 1, name: 'Alice'}, 2: {id: 2, name: 'Bob'}}

按属性分组

reduce 可以用来根据对象的某个属性将数组元素分组：

const arr = [
{ name: 'apple', type: 'fruit', color: 'red' },
{ name: 'banana', type: 'fruit', color: 'yellow' },
{ name: 'carrot', type: 'vegetable', color: 'orange' },
{ name: 'broccoli', type: 'vegetable', color: 'green' },
];
const result = arr.reduce((acc, cur) => {
if (!acc[cur.type]) {
acc[cur.type] = [];
}
acc[cur.type].push(cur);
return acc;
}, {});
console.log(result);
// 输出:
// {
// fruit: [{name: 'apple', type: 'fruit', color: 'red'}, {name: 'banana', type: 'fruit', color: 'yellow'}],
// vegetable: [{name: 'carrot', type: 'vegetable', color: 'orange'}, {name: 'broccoli', type: 'vegetable', color: 'green'}]
// }

展开多维数组

reduce 可以用来将多维数组展开为一维数组：

const arr = [1, [2, 3], [4, 5], 6];
const flattened = arr.reduce((acc, current) => {
if (Array.isArray(current)) {
return acc.concat(current);
} else {
acc.push(current);
return acc;
}
}, []);
console.log(flattened); // 输出: [1, 2, 3, 4, 5, 6]

reduce 方法的高级用法

复杂逻辑累积

reduce 不仅可以用于简单的求和，还可以实现更复杂的逻辑，如过滤、映射和累积的组合：

const arr = [1, 2, 3, 4, 5];
const sumOfEven = arr.reduce((acc, cur) => {
if (cur % 2 === 0) {
return acc + cur;
}
return acc;
}, 0);
console.log(sumOfEven); // 输出: 2 + 4 = 6

与 map 结合使用

通过 reduce 可以实现类似于 map 的功能：

Array.prototype.myMap = function (fn) {
return this.reduce((pre, cur, index, arr) => {
pre.push(fn(cur, index, arr));
return pre;
}, []);
};
const numbers = [1, 2, 3];
const mapped = numbers.myMap(x => x * 2);
console.log(mapped); // 输出: [2, 4, 6]

实现管道函数

reduce 可以用来实现函数管道，按照特定顺序执行一系列函数：

const pipeline = (value, functions) => {
return functions.reduce((acc, func) => {
return func(acc);
}, value);
};
const functions = [
x => x + 2,
x => x * 3,
x => x.toString()
];
console.log(pipeline(4, functions)); // 输出: "18"

reduce 方法的注意事项与最佳实践

初始值的重要性

如果数组为空且没有提供初始值，reduce 会返回 undefined，而不是抛出错误。因此，在处理可能为空的数组时，建议提供一个合理的初始值：

const emptyArray = [];
const sum = emptyArray.reduce((acc, cur) => acc + cur, 0); // 0
// 如果不提供初始值：
const sumWithoutInitial = emptyArray.reduce((acc, cur) => acc + cur); // undefined

处理对象数组时的深拷贝问题

当在 reduce 中操作对象时，需要确保对对象进行深拷贝，避免修改原始对象：

const arr = [{x: 1}];
const mapped = arr.reduce((acc, obj) => {
const newObj = {…obj}; // 深拷贝
newObj.x += 1;
acc.push(newObj);
return acc;
}, []);
console.log(arr); // 原始数组保持不变：[{x: 1}]
console.log(mapped); // 新数组：[{x: 2}]

注意索引的起始位置

当提供初始值时，reduce 会从数组的第一个元素（索引 0）开始处理；当不提供初始值时，reduce 会从数组的第二个元素（索引 1）开始处理：

const arr = [1, 2, 3];
const withInitial = arr.reduce((acc, cur, index) => {
console.log(index); // 0, 1, 2
return acc + cur;
}, 0);
const withoutInitial = arr.reduce((acc, cur, index) => {
console.log(index); // 1, 2
return acc + cur;
});

避免不必要的参数

如果不需要使用 index 和 array 参数，可以只使用 accumulator 和 currentValue 两个参数，使代码更简洁：

const numbers = [1, 2, 3];
const sum = numbers.reduce((acc, cur) => acc + cur, 0); // 更简洁
const sumWithAllParams = numbers.reduce((acc, cur, index, arr) => acc + cur, 0); // 包含所有参数

reduce 与其它数组方法的对比

reduce 与 for 循环

虽然 reduce 可以实现 for 循环的功能，但 reduce 提供了更声明式的写法，使代码更易读：

const numbers = [1, 2, 3];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
console.log(sum); // 6
const sumWithReduce = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sumWithReduce); // 6

reduce 与 map、filter

reduce 可以与 map 和 filter 组合使用，实现更复杂的功能：

const numbers = [1, 2, 3, 4, 5];
// 求偶数的平方和
const sumOfEvenSquares = numbers
.filter(x => x % 2 === 0) // 过滤偶数
.map(x => x * x) // 平方
.reduce((acc, cur) => acc + cur, 0); // 求和
console.log(sumOfEvenSquares); // 2^2 + 4^2 = 4 + 16 = 20

reduce 与 reduceRight

reduceRight 与 reduce 类似，但处理数组的方向是从右到左（从最后一个元素开始）：

const arr = [1, 2, 3, 4];
const sumWithReduce = arr.reduce((acc, cur) => acc + cur, 0); // 1+2+3+4 = 10
const sumWithReduceRight = arr.reduceRight((acc, cur) => acc + cur, 0); // 4+3+2+1 = 10

总结

reduce 是 JavaScript 数组原型上的一个强大方法，它允许我们将数组元素按照自定义的逻辑累积为一个单一的值。通过本文的详细解析，我们了解了 reduce 方法的基本语法、参数说明、常见使用场景以及高级用法。 从简单的数组求和到复杂的对象统计，reduce 提供了高度的灵活性，能够满足各种数据处理需求。通过与其他数组方法的组合使用，我们可以实现更复杂的功能，如过滤、映射和统计等。 在使用 reduce 时，需要注意初始值的提供、对象操作时的深拷贝问题以及参数索引的起始位置等细节。通过合理使用 reduce，我们可以编写出更简洁、更易读的代码，提高开发效率。 希望这篇详解攻略能够帮助你全面了解 reduce 方法，掌握其在实际开发中的应用技巧，提升你的 JavaScript 编程能力。

参考资料

参考资料