如何利用 Array.prototype.reduce 实现各种复杂数据结构转换？-js教程-PHP中文网

reduce的核心是累积器持续演进，能统一实现分组、树形结构、异步聚合、多维统计等数据转换。关键在明确定义每步状态更新逻辑，使复杂变换分解为可累积的小演进。

如何利用 array.prototype.reduce 实现各种复杂数据结构转换？

reduce 是 JavaScript 中最灵活、最具表达力的数组方法之一，它不只用于求和或计数，而是能以统一模式驱动各类数据结构转换——从扁平数组到嵌套对象、分组统计、树形结构、状态机聚合，甚至模拟 Promise.all 或管道处理。关键在于理解其“累积器（accumulator）持续演进”的本质。

把数组转成按字段分组的对象

这是 reduce 最经典也最实用的场景。相比 Object.groupBy（尚处 Stage 4），reduce 兼容性更好、逻辑更透明。

说明：累积器初始为一个空对象；每轮遍历根据当前项的某个属性（如 category）作为键，将当前项推入对应数组中。

若该键尚不存在，先初始化为空数组
避免直接修改原数组项，必要时用结构赋值做浅拷贝
支持多级分组：把 acc[key] 替换为 acc[key] ??= {} 即可向下嵌套

示例：

const products = [{id:1,cat:'tech'}, {id:2,cat:'book'}];<br>
products.reduce((acc, item) => {<br>
  const key = item.cat;<br>
  acc[key] = acc[key] || [];<br>
  acc[key].push(item);<br>
  return acc;<br>
}, {});<br>
// → { tech: [{id:1,cat:'tech'}], book: [{id:2,cat:'book'}] }

从扁平数组构建树形结构（带 parent_id）

后端常返回带 id 和 parent_id 的扁平菜单/组织架构数据，前端需转为 children 嵌套格式。reduce 可一步完成映射 + 挂载。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

说明：先用 reduce 建立 id → node 映射表（含空 children 数组），再遍历一次，将每个节点挂到其父节点的 children 中；根节点（parent_id 为空或 undefined）直接存入结果数组。

必须两遍遍历：第一遍建索引，第二遍连关系；不能边建边挂（父节点可能尚未创建）
使用 Map 替代普通对象可避免原型污染风险（如 id 为 constructor）
注意处理循环引用：提前检测 parent_id === current.id 并跳过

实现类似 Promise.all 的并行聚合（reduce + Promise）

reduce 天然适合串行链式调用，但稍加改造也能支持并行聚合——关键是让累积器始终是 Promise，并用 Promise.all 包裹当前项与已有结果。

说明：初始累积器为 Promise.resolve([])；每轮将“已得结果数组”与“当前 Promise 结果”合并为新数组，并用 Promise.all 并发执行。

写法：acc.then(arr => Promise.all([arr, asyncFn(item)]).then(([a, r]) => [...a, r]))
更简洁写法（推荐）：acc.then(arr => asyncFn(item).then(r => [...arr, r])) —— 这是串行；要并行，就得提前展开所有异步操作，reduce 不是最佳选择；此时应先 map 出 Promise 数组，再 Promise.all
真正适合 reduce 的是“依赖前序结果”的异步流，例如：依次请求 token → 用 token 请求用户 → 用用户 ID 请求权限