本教程详细介绍了如何使用纯 javascript 将包含数组值的对象数组合并为一个单一对象。通过利用 `array.prototype.reduce()` 和 `object.entries()` 方法，可以实现将所有源对象中同名数组属性的值进行高效地连接，从而生成一个聚合了所有相关数据的目标对象。文章提供了清晰的代码示例和详细的步骤解析。
引言：理解问题
在 JavaScript 开发中，我们经常会遇到需要处理复杂数据结构的情况。其中一个常见场景是将一个包含多个对象的数组，转换为一个单一的聚合对象。更具体地，当这些源对象包含相同名称的属性，且这些属性的值是数组时，需求通常是将所有同名属性的数组值进行连接（concatenation），最终形成一个包含所有连接后数组的新对象。
例如，我们可能有一个表示数据块的数组，每个数据块都有 nodes 和 links 属性，它们的值都是数组。我们的目标是将所有数据块的 nodes 合并成一个 nodes 数组，所有 links 合并成一个 links 数组，最终得到一个包含所有节点和链接的单一对象。
示例场景
假设我们有以下数据结构 before：
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" }
],
}
];我们期望的输出 after 结构如下：
立即学习“Java免费学习笔记（深入）”；
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" }
],
};可以看到，after 对象中的 nodes 属性是 before 中所有对象的 nodes 数组连接而成，links 属性也同理。
核心方法：Array.prototype.reduce()
解决此类聚合问题的最佳工具之一是 Array.prototype.reduce() 方法。reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数（从左到右），将其结果汇总为单个返回值。
它的基本语法是： arr.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)
- accumulator：累加器，它累积 callback 的返回值。
- currentValue：当前正在处理的数组元素。
- initialValue：可选参数，accumulator 的初始值。如果提供了 initialValue，那么 callback 会从数组的第一个元素开始执行。如果没有提供，accumulator 将等于数组的第一个元素，而 currentValue 将从第二个元素开始。
在这个场景中，accumulator 将是最终要构建的单一对象，currentValue 将是 before 数组中的每个子对象。
遍历对象属性：Object.entries()
为了遍历 currentValue（即 before 数组中的每个子对象）的所有属性，我们可以使用 Object.entries() 方法。Object.entries() 方法返回一个给定对象自身可枚举字符串键属性的 [key, value] 对的数组。这使得我们可以方便地迭代对象的每个属性及其对应的值。
实现步骤与代码解析
结合 reduce() 和 Object.entries()，我们可以按以下步骤实现数据转换：
- 初始化累加器： reduce() 的 initialValue 设置为一个空对象 {}，这将是最终的聚合结果。
- 迭代每个源对象： reduce() 方法会遍历 before 数组中的每一个对象。
- 遍历当前对象的属性： 对于 before 数组中的每一个 current 对象，使用 Object.entries(current) 来获取其所有 [key, value] 对。
-
连接数组值： 对于每个 [key, value] 对：
- 检查 accumulator 中是否已经存在 key 属性。
- 如果存在，说明之前已经处理过同名属性，将 value（当前对象的数组值）连接到 accumulator[key] 现有数组的末尾。这里可以使用扩展运算符 ... 来实现数组连接。
- 如果不存在，说明这是第一次遇到这个 key，将 accumulator[key] 初始化为 value（当前对象的数组值）。
- 为了简洁地处理这两种情况，可以使用空值合并运算符 ?? 来提供一个默认的空数组 []，以确保在连接操作前 accumulator[key] 始终是一个数组。
下面是完整的 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]) => {
// 使用扩展运算符连接数组。
// (accumulator[key] ?? []) 确保如果 accumulator[key] 不存在或为 null/undefined，
// 则将其视为一个空数组，以便可以安全地进行连接操作。
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 确实是一个数组。
// 示例：添加类型检查 Object.entries(currentObject).forEach(([key, value]) => { if (Array.isArray(value)) { accumulator[key] = [ ...(accumulator[key] ?? []), ...value]; } else { // 处理非数组值，例如直接赋值或抛出错误 accumulator[key] = value; } }); - 对象引用： 数组中的对象元素（例如 {"id": "1"}）是按引用存储的。这意味着如果原始数组中的某个对象被修改，result 中的对应对象也会受到影响。如果需要完全独立的数据，则在连接时需要对这些嵌套对象进行深拷贝。
- 性能： 对于非常大的数组和嵌套对象，reduce 结合 Object.entries 和扩展运算符的性能通常是可接受的。然而，如果处理的数据量极大，可以考虑其他更底层的优化策略，但这对于大多数Web应用场景来说通常不是必需的。
总结
通过巧妙地结合 Array.prototype.reduce() 和 Object.entries()，我们可以用简洁高效的纯 JavaScript 代码，将一个包含数组值的对象数组合并为一个单一的聚合对象，并自动连接所有同名属性的数组值。这种模式在数据转换和聚合场景中非常实用，是每个 JavaScript 开发者都应该掌握的技巧。理解其工作原理和潜在的注意事项，将帮助您编写出更健壮和高效的代码。
