javascript reduce方法怎么用_如何用它对数组进行累积操作

31次阅读

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 + `<li>${item}</li>`, '<ul>') + '</ul>';
初始值设为开头标签，每轮追加一项，最后补闭合标签。
数组扁平化（一层）：
[[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'}];<br>     users.reduce((groups, user) => {<br>         const { type } = user;<br>         groups[type] = groups[type] || [];<br>         groups[type].push(user);<br>         return groups;<br>     }, {}); // { admin: [...], user: [...] }

使用 reduce 的注意事项

始终明确返回值——回调函数必须 显式 return 新的累加器值，否则下一轮 accumulator 变成 undefined，容易引发错误。
空数组调用 reduce 且未提供初始值时，会抛出 TypeError；提供初始值则直接返回该值。
避免在 reduce 中做副作用操作（如修改外部变量、发请求），它本意是纯函数式累积；需副作用时，考虑 forEach 更清晰。
性能敏感场景注意：每次 return 新数组（如用 concat 或展开运算符）会产生新引用，大数据量时可用可变方式（如 push）配合初始值为数组，但要确保不污染原数据。