本教程详细阐述如何使用纯JavaScript将一个包含多个对象的数组合并成一个单一对象。核心方法利用 `Array.prototype.reduce` 和 `Object.entries` 遍历并聚合数据，特别关注如何智能地连接具有相同键的数组值，从而实现复杂数据结构的扁平化与整合。
数据聚合：合并对象数组并连接其数组属性
在前端开发和数据处理中，我们经常会遇到需要将多个数据片段（通常表示为对象）合并成一个统一的结构。当这些对象中包含数组类型的属性，并且我们希望将所有相同键的数组值连接起来时，这一任务就变得更加具体。本教程将深入探讨如何使用纯JavaScript实现这一高效的数据转换。
场景描述与需求分析
假设我们有一个对象数组，每个对象都包含相同的属性（例如 nodes 和 links），且这些属性的值本身是数组。我们的目标是将这个对象数组转换成一个单一的对象，其中每个属性的值都是所有原始对象中对应属性值的连接结果。
输入示例：
立即学习“Java免费学习笔记（深入）”；
const before = [
{
nodes: [
{ "id": "1" },
{ "id": "2" }
],
links: [
{ "source": "1", "target": "2" }
],
},
{
nodes: [
{ "id": "3" },
{ "id": "4" },
{ "id": "5" },
{ "id": "6" }
],
links: [
{ "source": "3", "target": "4" },
{ "source": "5", "target": "6" }
],
}
];期望输出：
const after = {
nodes: [
{ "id": "1" },
{ "id": "2" },
{ "id": "3" },
{ "id": "4" },
{ "id": "5" },
{ "id": "6" }
],
links: [
{ "source": "1", "target": "2" },
{ "source": "3", "target": "4" },
{ "source": "5", "target": "6" }
],
};从示例中可以看出，before 数组中的两个对象的 nodes 属性被合并成了一个包含所有 nodes 的大数组，links 属性也以同样的方式进行了合并。
解决方案：使用 reduce 和 Object.entries
JavaScript 的 Array.prototype.reduce() 方法是处理数组并将其聚合为单个值的强大工具。结合 Object.entries()，我们可以优雅地遍历每个对象的属性并执行合并操作。
核心思路
- 初始化累加器： reduce 方法需要一个初始值，这里我们初始化为一个空对象 {}，它将作为最终的合并结果。
- 遍历对象数组： reduce 会依次处理 before 数组中的每一个对象。
- 遍历对象属性： 对于 before 数组中的每个对象，我们使用 Object.entries() 获取其所有键值对。
-
条件合并：
- 如果累加器中已经存在当前键，说明之前已经处理过该属性，此时我们将当前对象中该键对应的数组值与累加器中已有的数组值进行连接。
- 如果累加器中不存在当前键，则直接将当前对象中该键对应的数组值赋值给累加器。
示例代码
const before = [
{
nodes: [
{ "id": "1" },
{ "id": "2" }
],
links: [
{ "source": "1", "target": "2" }
],
},
{
nodes: [
{ "id": "3" },
{ "id": "4" },
{ "id": "5" },
{ "id": "6" }
],
links: [
{ "source": "3", "target": "4" },
{ "source": "5", "target": "6" }
],
}
];
const result = before.reduce((accumulator, currentObject) => {
// 遍历当前对象的每一个键值对
Object.entries(currentObject).forEach(([key, value]) => {
// 使用展开运算符连接数组
// 如果 accumulator[key] 尚未定义，则使用空数组 [] 作为初始值 (通过 ?? 运算符实现)
accumulator[key] = [ ...(accumulator[key] ?? []), ...value];
});
return accumulator; // 返回更新后的累加器
}, {}); // 初始累加器为空对象
console.log(result);
/*
输出:
{
nodes: [
{ id: '1' }, { id: '2' },
{ id: '3' }, { id: '4' },
{ id: '5' }, { id: '6' }
],
links: [
{ source: '1', target: '2' },
{ source: '3', target: '4' },
{ source: '5', target: '6' }
]
}
*/代码解析
-
before.reduce((accumulator, currentObject) => { ... }, {}): 这是 reduce 方法的调用。
- accumulator (acc)：累加器，在每次迭代中保存上一次操作的结果。初始值是传入的 {}。
- currentObject (curr)：当前正在处理的数组元素（即 before 数组中的每个对象）。
-
Object.entries(currentObject).forEach(([key, value]) => { ... }):
- Object.entries(currentObject)：此方法返回一个数组，其元素是当前对象自身可枚举字符串键属性的 [key, value] 对。例如，对于第一个对象，它会返回 [['nodes', [...] ], ['links', [...] ]]。
- .forEach(([key, value]) => { ... })：遍历这些键值对。使用数组解构将每个 [key, value] 对直接解构为 key 和 value 变量。
-
accumulator[key] = [ ...(accumulator[key] ?? []), ...value];: 这是核心的合并逻辑。
- accumulator[key] ?? []：这是 JavaScript ES2020 引入的空值合并运算符（Nullish Coalescing Operator）。它的作用是：如果 accumulator[key] 为 null 或 undefined（即第一次遇到这个 key），则使用 [] 作为默认值；否则，使用 accumulator[key] 的现有值。
- ... (展开运算符)：用于将数组的元素展开。
- ...(accumulator[key] ?? [])：展开累加器中该键已有的数组（如果不存在则展开一个空数组）。
- ...value：展开当前对象中该键对应的数组值。
- 通过这种方式，我们创建了一个新数组，它是累加器中原有数组和当前对象数组的连接。
注意事项与扩展
-
数据类型一致性： 上述解决方案假设所有需要合并的属性值都是数组。如果某个键的值可能不是数组（例如字符串、数字或其他对象），直接使用展开运算符 ... 会导致错误。在这种情况下，需要添加额外的类型检查逻辑。
// 带有类型检查的改进版本 accumulator[key] = Array.isArray(value) ? [ ...(Array.isArray(accumulator[key]) ? accumulator[key] : []), ...value] : value; // 如果不是数组，则直接覆盖或根据需求进行其他处理然而，在当前问题场景下，所有值都是数组，因此原始简洁的写法是完全适用的。
性能考虑： 对于非常大的数据集，频繁地创建新数组（通过展开运算符）可能会有轻微的性能开销。但在大多数实际应用中，这种开销通常可以忽略不计。如果性能成为关键瓶颈，可以考虑其他更底层的循环和数组操作，但会牺牲代码的简洁性。
Lodash 库： 如果项目中已经引入了 Lodash 这样的实用工具库，也可以使用其提供的功能实现。例如，_.mergeWith 结合自定义的合并函数可以实现类似的效果，但通常需要更复杂的自定义逻辑来处理数组连接。纯 JavaScript 的 reduce 方案在不引入额外依赖的情况下提供了优雅的解决方案。
总结
通过巧妙地结合 Array.prototype.reduce() 和 Object.entries()，我们可以高效且清晰地将一个包含多个对象的数组合并成一个单一对象，并自动连接其同名数组属性。这种模式在处理聚合数据、扁平化复杂结构时非常有用，是现代 JavaScript 开发中一项重要的实用技巧。掌握这种数据转换方法，将有助于您更灵活地处理各种数据结构。
