JavaScript 的 reduce 方法用于将数组元素累积为单一值，不修改原数组，适用于求和、拼接、扁平化、分组等场景；核心参数为累加器、当前值和可选初始值，需显式返回新累加器值，空数组无初始值会报错。
JavaScript 的 reduce 方法用于对数组元素依次执行一个累加器函数，最终返回一个单一值。它不修改原数组，适合求和、拼接、扁平化、分组、查找最大值等需要“把多个变一个”的场景。关键在于理解两个核心参数：累加器（accumulator）和当前值（currentValue），以及初始值（initialValue）是否提供。
基础语法与执行逻辑
reduce 接收一个回调函数和可选的初始值：
array.reduce((accumulator, currentValue, index, array) => { /* 返回新累加器值 */ }, initialValue);若未传 initialValue，则第一次调用时：
– accumulator 是数组第一个元素，
– currentValue 是第二个元素。
后续每次调用，上一轮返回值成为新的 accumulator。
常见实用操作示例
-
求数组总和：
[1, 2, 3, 4].reduce((sum, num) => sum + num, 0); // 10
提供0作为初始值，确保空数组也返回0；不提供初始值时，空数组会报错。 -
拼接字符串或生成 HTML：
['a', 'b', 'c'].reduce((html, item) => html + `- ${item}
`, '- ') + '
初始值设为开头标签，每轮追加一项，最后补闭合标签。 -
数组扁平化（一层）：
[[1, 2], [3, 4], 5].reduce((flat, item) => flat.concat(Array.isArray(item) ? item : [item]), []);
初始值是空数组，对每个元素判断是否为数组，再合并。 -
按属性分组（转为对象）：
const users = [{id: 1, type: 'admin'}, {id: 2, type: 'user'}, {id: 3, type: 'admin'}];
users.reduce((groups, user) => {
const { type } = user;
groups[type] = groups[type] || [];
groups[type].push(user);
return groups;
}, {}); // { admin: [...], user: [...] }
使用 reduce 的注意事项
- 始终明确返回值——回调函数必须 显式 return 新的累加器值，否则下一轮
accumulator变成undefined，容易引发错误。 - 空数组调用
reduce且未提供初始值时，会抛出TypeError；提供初始值则直接返回该值。 - 避免在 reduce 中做副作用操作（如修改外部变量、发请求），它本意是纯函数式累积；需副作用时，考虑
forEach更清晰。 - 性能敏感场景注意：每次 return 新数组（如用
concat或展开运算符）会产生新引用，大数据量时可用可变方式（如push）配合初始值为数组，但要确保不污染原数据。
替代写法对比：什么时候不用 reduce
不是所有累积都该用 reduce。例如：
- 只求最大值 →
Math.max(...arr)更简洁； - 只想判断是否存在满足条件的元素 →
some()语义更准； - 需要同时获取索引和前一项 → 手写
for循环可能更直观可控。
reduce 强大，但前提是问题本质是「逐个消化、持续合成」。用对了，代码精炼；硬套了，反而难读。
立即学习“Java免费学习笔记（深入）”；
