2026-03-13

详解reduce

JavaScript 的 reduce 方法是数组的一个高阶函数，它非常强大且灵活，能够将数组中的所有元素归并为一个单一的值。它常用于数组的求和、求积、分组、去重、扁平化等操作。以下是对 reduce 方法的详细介绍，包括它的语法、参数、工作原理以及常见用法。

1. 语法

reduce 方法的基本语法如下：

1	array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue);

参数说明：

callback：一个回调函数，用于处理数组中的每个元素。它有以下参数：
- accumulator：累加器，保存了上一次回调函数返回的值。如果提供了 initialValue，则 accumulator 的初始值为 initialValue；否则，它的初始值为数组的第一个元素。
- currentValue：当前正在处理的数组元素。
- currentIndex：当前正在处理的数组元素的索引（可选）。
- array：调用 reduce 方法的数组（可选）。
initialValue：累加器的初始值（可选）。如果不提供此参数，accumulator 的初始值将默认为数组的第一个元素。

2. 工作原理

reduce 方法会遍历数组中的每个元素，并对每个元素执行回调函数。回调函数的返回值会被存储在累加器 accumulator 中，并作为下一次回调函数调用时的 accumulator 值。最终，reduce 方法返回累加器的最终值。

示例：

假设我们有一个数组 [1, 2, 3, 4]，我们想计算它的总和。使用 reduce 方法的逻辑如下：

const arr = [1, 2, 3, 4];
const sum = arr.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
}, 0); // 初始值为 0
console.log(sum); // 输出 10

初始时，accumulator 的值为 0（因为我们提供了初始值 0）。
第一次回调函数调用：
- accumulator = 0
- currentValue = 1
- 返回值：0 + 1 = 1
第二次回调函数调用：
- accumulator = 1
- currentValue = 2
- 返回值：1 + 2 = 3
第三次回调函数调用：
- accumulator = 3
- currentValue = 3
- 返回值：3 + 3 = 6
第四次回调函数调用：
- accumulator = 6
- currentValue = 4
- 返回值：6 + 4 = 10
最终，reduce 方法返回 10。

3. 常见用法

3.1 求和

1
2
3

const arr = [1, 2, 3, 4];
const sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 输出 10

3.2 求积

1
2
3

const arr = [1, 2, 3, 4];
const product = arr.reduce((acc, curr) => acc * curr, 1);
console.log(product); // 输出 24

3.3 数组去重

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

3.4 分组

假设我们有一个数组，包含多个对象，我们希望根据某个属性对它们进行分组：

const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 25 },
    { name: 'David', age: 30 }
];
const groupedByAge = users.reduce((acc, user) => {
    const age = user.age;
    if (!acc[age]) {
        acc[age] = [];
    }
    acc[age].push(user);
    return acc;
}, {});
console.log(groupedByAge);
// 输出：
// {
//   25: [ { name: 'Alice', age: 25 }, { name: 'Charlie', age: 25 } ],
//   30: [ { name: 'Bob', age: 30 }, { name: 'David', age: 30 } ]
// }

3.5 扁平化数组

1
2
3

const nestedArr = [1, [2, [3, [4]]]];
const flatArr = nestedArr.reduce((acc, val) => acc.concat(Array.isArray(val) ? val.reduce(arguments.callee, []) : val), []);
console.log(flatArr); // 输出 [1, 2, 3, 4]

3.6 字符串拼接

1
2
3

const names = ['Alice', 'Bob', 'Charlie'];
const fullName = names.reduce((acc, name) => `${acc}, ${name}`);
console.log(fullName); // 输出 "Alice, Bob, Charlie"

4. 注意事项

4.1 初始值的重要性

如果提供了初始值，accumulator 的初始值为 initialValue，并且从数组的第一个元素开始遍历。
如果没有提供初始值，accumulator 的初始值为数组的第一个元素，从数组的第二个元素开始遍历。

4.2 空数组

如果数组为空且未提供初始值，reduce 方法会抛出错误。
如果数组为空但提供了初始值，reduce 方法会直接返回初始值。

4.3 回调函数返回值

回调函数的返回值会被存储在 accumulator 中，并作为下一次回调函数调用时的 accumulator 值。
如果回调函数没有返回值（即返回 undefined），accumulator 的值将保持不变。

5. 总结

reduce 是一个非常强大的方法，它可以将数组中的所有元素归并为一个单一的值。它的灵活性在于回调函数的设计，可以根据不同的需求实现各种复杂的逻辑。通过合理使用 reduce，可以写出更简洁、更高效的代码。