本文详细介绍了如何使用纯JavaScript将包含数组值的对象数组合并为一个单一对象，同时对所有同名属性的数组值进行智能连接。通过运用`Array.prototype.reduce`和`Object.entries`方法，本教程提供了一种简洁且高效的解决方案，适用于需要聚合复杂结构化数据的开发场景。
合并对象数组与连接数组值
在JavaScript开发中，我们经常会遇到需要处理结构化数据的情况。一个常见的需求是将一个包含多个对象的数组转换成一个单一对象，其中每个原始对象的同名属性（特别是当这些属性的值是数组时）需要被合并或连接起来。例如，我们可能有一个表示不同数据批次的对象数组，每个对象都包含nodes和links等数组属性，我们的目标是将所有批次的nodes合并到一个nodes数组中，所有links合并到一个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" }
],
}
];期望的输出数据结构：
我们希望将上述数组转换为以下单一对象，其中nodes和links数组是所有原始对象中对应数组的连接结果：
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" }
],
};解决方案：使用 Array.prototype.reduce 和 Object.entries
要实现上述转换，我们可以利用JavaScript原生的Array.prototype.reduce()方法来遍历数组并累积结果，同时结合Object.entries()来迭代每个对象的键值对。
Array.prototype.reduce() 简介
reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数（升序执行），将其结果汇总为单个返回值。它接受两个参数：一个回调函数和一个初始值。
回调函数包含四个参数：
- accumulator (acc): 累加器，存储所有回调函数执行结果的累积值。
- currentValue (curr): 当前正在处理的数组元素。
- currentIndex (idx): 当前正在处理的数组元素的索引。
- array (src): 调用 reduce 的数组本身。
Object.entries() 简介
Object.entries() 方法返回一个给定对象自身可枚举字符串键属性的键值对数组。这个数组的元素是[key, value]形式的数组。这对于遍历对象的属性非常有用。
完整实现代码
以下是使用纯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((acc, curr) => {
// 遍历当前对象的每一个键值对
Object.entries(curr).forEach(([key, value]) => {
// 对于每个键，将其值与累加器中对应键的值进行连接
// acc[key] ?? [] 使用 nullish coalescing 操作符，
// 如果 acc[key] 是 null 或 undefined，则使用空数组 [] 作为初始值，
// 否则使用 acc[key] 的当前值。
// ... 用于展开数组，实现数组连接。
acc[key] = [ ...(acc[key] ?? []), ...value];
})
return acc; // 返回更新后的累加器
}, {}); // 初始累加器为空对象 {}
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((acc, curr) => { ... }, {});
- reduce 方法被调用在 before 数组上。
- acc (accumulator) 是累加器，它在每次迭代中都会被更新并最终作为 reduce 的返回值。我们将其初始化为一个空对象 {}，因为我们希望最终得到一个单一的对象。
- curr (current value) 是 before 数组中的当前对象。在第一次迭代中，curr 是 before[0]；在第二次迭代中，curr 是 before[1]，依此类推。
-
Object.entries(curr).forEach(([key, value]) => { ... });
- 在每次 reduce 迭代中，我们使用 Object.entries(curr) 来获取当前对象 curr 的所有可枚举属性的键值对数组。
- forEach 方法遍历这些键值对。[key, value] 是解构赋值，它将每个 [key, value] 数组元素解构为独立的 key 和 value 变量。
-
acc[key] = [ ...(acc[key] ?? []), ...value];
- 这是核心逻辑所在。
- acc[key]：尝试访问累加器 acc 中与当前 key 对应的属性。
- acc[key] ?? []：这是ES2020引入的空值合并运算符 (Nullish Coalescing Operator)。它的作用是，如果 acc[key] 的值为 null 或 undefined（即这是第一次遇到这个 key），则使用 []（一个空数组）作为默认值。否则，就使用 acc[key] 的当前值。这确保了我们总是在一个数组上进行连接操作，避免了在 acc[key] 首次为 undefined 时尝试展开非数组值而导致的错误。
- ... (Spread Syntax)：展开运算符用于将数组的元素展开。
- ...(acc[key] ?? []) 将累加器中当前 key 对应的数组（或一个空数组）的元素展开。
- ...value 将当前对象 curr 中 key 对应的 value 数组的元素展开。
- 通过将这两个展开的数组放在一个新数组字面量 [] 中，我们有效地将它们连接起来，并将结果赋值回 acc[key]。
注意事项与总结
- 数据类型一致性： 此方法假设所有需要合并的属性的值都是数组。如果某个属性的值不是数组，此操作可能会导致非预期的行为或错误。在实际应用中，您可能需要添加额外的类型检查来确保 value 确实是一个数组。
- 性能考量： 对于非常大的数据集，虽然 reduce 和 forEach 都是高效的迭代方法，但频繁创建新数组（通过 [...arr1, ...arr2]）可能会带来一定的性能开销。在大多数日常场景中，这种开销可以忽略不计。
- 可读性： 结合 reduce、Object.entries 和空值合并运算符，代码表达力强，能够清晰地表达“遍历所有对象，按键聚合数组值”的意图。
- 通用性： 这种模式不仅适用于 nodes 和 links，也适用于任何包含数组值的同名属性的合并需求。
通过上述方法，我们能够以简洁、高效且纯JavaScript的方式，将一个包含复杂数组属性的对象数组，优雅地合并成一个聚合所有相关数组值的单一对象。
