JavaScript 中怎么用 reduce 实现数组对象的扁平化合并-js教程-PHP中文网

reduce可实现对象数组扁平化合并：1.浅层合并用{...acc,...cur}后项覆盖；2.同名键转数组需遍历entries动态累积；3.深度合并需递归判断对象/数组类型并分别处理。

javascript 中怎么用 reduce 实现数组对象的扁平化合并

用 reduce 对数组中的对象进行扁平化合并，核心是把多个对象的属性“一层层收拢”到一个目标对象里，而不是嵌套或覆盖。关键在于：每次迭代返回一个新对象，把当前对象的键值对合并进去，同时处理好同名键的冲突（比如数组拼接、深层合并等）。

基础场景：浅层合并（同名键后项覆盖前项）

适用于对象结构简单、不关心嵌套、允许后出现的值覆盖前面的情况：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

const arr = [
  { a: 1, b: 2 },
  { b: 3, c: 4 },
  { c: 5, d: 6 }
];
<p>const merged = arr.reduce((acc, cur) => ({ ...acc, ...cur }), {});
// 结果：{ a: 1, b: 3, c: 5, d: 6 }
</p>

说明：
- 初始值设为空对象 {}；
- 每次用展开运算符 {...acc, ...cur} 合并，后者同名属性自动覆盖前者。

进阶场景：同名键值合并为数组（避免覆盖）

当多个对象可能有相同 key，你想保留所有值（如收集标签、分类 ID），可用数组累积：

检查 acc[key] 是否已存在且为数组，是则 push；否则初始化为 [cur[key]]
遍历当前对象 cur 的每个键值对，动态合并

const arr = [
  { type: 'js', tag: 'frontend' },
  { type: 'css', tag: 'frontend' },
  { type: 'node', tag: 'backend' }
];
<p>const merged = arr.reduce((acc, cur) => {
Object.entries(cur).forEach(([key, value]) => {
if (Array.isArray(acc[key])) {
acc[key].push(value);
} else {
acc[key] = [value];
}
});
return acc;
}, {});</p><p>// 结果：{ type: ['js','css','node'], tag: ['frontend','frontend','backend'] }
</p>

深度合并（递归处理嵌套对象）

如果对象含嵌套结构（如 { user: { name: 'A' }, roles: ['a'] }），需判断值是否为对象再递归调用 reduce 或辅助函数：

function deepMerge(acc, cur) {
  return Object.keys(cur).reduce((result, key) => {
    const aVal = acc[key];
    const cVal = cur[key];
    if (aVal && cVal && typeof aVal === 'object' && typeof cVal === 'object' && !Array.isArray(aVal) && !Array.isArray(cVal)) {
      result[key] = deepMerge(aVal, cVal);
    } else if (Array.isArray(aVal) && Array.isArray(cVal)) {
      result[key] = [...aVal, ...cVal];
    } else {
      result[key] = cVal; // 默认后项优先
    }
    return result;
  }, { ...acc });
}
<p>const arr = [
{ user: { name: 'Alice' }, tags: ['a'] },
{ user: { age: 30 }, tags: ['b'] }
];
const merged = arr.reduce(deepMerge, {});
// 结果：{ user: { name: 'Alice', age: 30 }, tags: ['a','b'] }
</p>