本教程详细阐述如何使用纯javascript将包含数组属性的对象数组高效地合并成一个单一对象。通过利用 `array.prototype.reduce` 方法和 `object.entries` 迭代器，我们可以遍历输入数组中的每个对象，并智能地将其所有数组类型的属性值进行连接，从而实现数据结构的扁平化和整合。
理解数据合并需求
在JavaScript开发中，我们经常会遇到需要处理复杂数据结构的情况。一个常见的场景是将一个包含多个对象的数组，这些对象又各自拥有数组类型的属性，最终合并成一个单一的对象。在这个合并过程中，我们期望所有相同键的数组属性能够被连接起来，而不是简单地覆盖。
考虑以下示例数据结构：
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" }
],
};可以看到，nodes 和 links 属性在所有对象中都被收集并连接到了最终的单一对象中。
立即学习“Java免费学习笔记（深入）”；
核心JavaScript解决方案：reduce与Object.entries
要实现这种复杂的合并逻辑，我们可以充分利用JavaScript的两个强大内置方法：Array.prototype.reduce() 和 Object.entries()。
Array.prototype.reduce()
reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数，将其结果汇总为单个返回值。它非常适合用于累积或转换数组为单一值（例如一个对象）。
reduce 方法接受两个参数：
-
reducer 函数：对数组中的每个元素执行的函数。它有四个参数：
- accumulator (累加器)：上一次调用回调函数时返回的值，或者是 initialValue。
- currentValue (当前值)：数组中正在处理的当前元素。
- currentIndex (当前索引，可选)。
- array (源数组，可选)。
- initialValue (初始值，可选)：作为第一次调用 reducer 函数时的 accumulator 值。如果未提供，则 accumulator 将等于数组的第一个元素，并且 currentValue 将从第二个元素开始。
Object.entries()
Object.entries() 方法返回一个给定对象自身可枚举字符串键属性的键值对数组。这使得我们可以方便地迭代对象的所有属性。
实现步骤
结合这两个方法，我们可以构建一个高效的合并逻辑：
- 初始化累加器：reduce 方法的 initialValue 将是一个空对象 {}，它将作为最终合并结果的容器。
- 遍历每个源对象：reduce 会依次处理 before 数组中的每个对象。
- 遍历当前对象的属性：对于 reduce 处理的每个 currentValue (即 before 数组中的一个对象)，我们使用 Object.entries(currentValue) 来获取其所有键值对。
-
条件性地连接数组：
- 对于每个键值对 [key, value]：
- 检查 accumulator 中是否已经存在 key 对应的属性。如果不存在，则将其初始化为一个空数组 [] (acc[key] ?? [] 利用了空值合并运算符，确保如果 acc[key] 是 null 或 undefined，则使用空数组)。
- 使用扩展运算符 (...) 将 value (当前对象的数组值) 连接到 accumulator 中对应 key 的现有数组中。
- 返回累加器：在每次迭代结束时，返回更新后的 accumulator，作为下一次迭代的输入。
完整代码示例
以下是使用纯JavaScript实现上述合并逻辑的完整代码：
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]) => {
// 使用空值合并运算符确保 acc[key] 初始为数组，然后连接当前值
// 假设 value 始终为数组，否则扩展运算符会报错
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' }
]
}
*/注意事项
-
数据类型假设：上述解决方案假设所有需要合并的属性值都是数组。如果某个属性的值不是数组（例如，是一个字符串或数字），尝试对其使用扩展运算符 (...value) 将会导致运行时错误。在实际应用中，如果数据结构可能不一致，您需要添加额外的类型检查：
// ... 在 forEach 循环内部 if (Array.isArray(value)) { accumulator[key] = [ ...(accumulator[key] ?? []), ...value]; } else { // 处理非数组值，例如覆盖或抛出错误 accumulator[key] = value; } 性能考量：对于包含大量对象或每个对象包含大量属性的超大型数据集，虽然 reduce 和扩展运算符通常效率很高，但在极端情况下仍需注意性能。然而，对于大多数常见的Web应用场景，这种方法是完全足够的。
不可变性：此方法创建了一个全新的结果对象，并且通过扩展运算符创建了新的数组，从而保持了原始数据的不可变性，这是一个良好的编程实践。
总结
通过巧妙结合 Array.prototype.reduce() 和 Object.entries()，我们可以用简洁且高效的纯JavaScript代码，实现将对象数组中具有相同键的数组属性进行合并与连接。这种模式在处理需要聚合和扁平化复杂数据结构的场景中非常有用，是每个JavaScript开发者都应该掌握的技巧。理解并运用这些核心方法，能够帮助我们更灵活、更强大地操纵数据。
