本教程将详细介绍如何使用纯JavaScript将一个包含多个对象的数组转换为单个对象，并在此过程中将所有同名属性下的数组值进行合并（拼接）。我们将利用`Array.prototype.reduce()`和`Object.entries()`方法，通过一个清晰的示例代码和详细解释，帮助您高效地处理此类数据转换需求。
将对象数组中的数组值合并到单个对象
在JavaScript开发中，我们经常会遇到需要对复杂数据结构进行转换的场景。其中一个常见需求是将一个由多个对象组成的数组，转换成一个单一的对象。更具体地，如果这些对象内部包含数组类型的属性，我们希望将所有同名属性的数组值进行拼接，形成一个包含所有相关数据的总集合。
场景描述
假设我们有一个before数组，它包含两个对象，每个对象都有nodes和links两个属性，且这两个属性的值都是数组。我们的目标是将其转换为一个after对象，其中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)：
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" }
],
};解决方案：使用 reduce 和 Object.entries
解决此问题的最简洁有效的方法之一是结合使用 Array.prototype.reduce() 和 Object.entries()。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- Array.prototype.reduce(): 这个方法对数组中的每个元素执行一个由您提供的“reducer”回调函数，将其结果汇总为单个返回值。在这里，我们将用它来迭代 before 数组中的每个对象，并逐步构建我们的最终结果对象。
- Object.entries(): 这个方法返回一个给定对象自身可枚举字符串键属性的[key, value]对的数组。这允许我们方便地遍历 before 数组中每个对象的属性。
详细实现步骤与代码
下面是实现上述数据转换的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" }
],
}
];
// 使用 reduce 方法进行数据转换
const result = before.reduce((accumulator, currentObject) => {
// 遍历当前对象的每一个属性（key-value 对）
Object.entries(currentObject).forEach(([key, value]) => {
// 将当前属性的值（value）与累加器中对应属性的现有值进行拼接
// (accumulator[key] ?? []) 用于处理 accumulator[key] 首次出现时为 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' }
]
}
*/代码解析
-
before.reduce((accumulator, currentObject) => { ... }, {});:
- reduce 方法被调用在 before 数组上。
- accumulator (acc) 是累加器，它会存储我们最终要生成的结果对象。在第一次迭代时，它的值是 reduce 方法的第二个参数 {}（一个空对象）。
- currentObject (curr) 是 before 数组中当前正在处理的对象。
- {} 是 reduce 方法的初始值，表示最终结果将从一个空对象开始构建。
-
Object.entries(currentObject).forEach(([key, value]) => { ... });:
- 在 reduce 的每次迭代中，我们对 currentObject 使用 Object.entries()。这会将当前对象的所有可枚举属性转换为一个 [key, value] 对的数组。
- 然后，我们使用 forEach 遍历这些 [key, value] 对。解构赋值 ([key, value]) 使得我们可以直接访问属性名和属性值。
-
accumulator[key] = [ ...(accumulator[key] ?? []), ...value];:
- 这是核心的拼接逻辑。
- accumulator[key] 尝试访问累加器中与当前 key 对应的属性。
- accumulator[key] ?? []：这是ES2020引入的空值合并运算符（Nullish Coalescing Operator）。它的作用是，如果 accumulator[key] 是 null 或 undefined（即这是该属性第一次出现在累加器中），则使用 []（一个空数组）作为默认值；否则，使用 accumulator[key] 的现有值。这确保了我们总是在一个数组上进行拼接操作。
- ... 扩展运算符：用于将数组的元素展开。
- ...(accumulator[key] ?? []) 将累加器中该 key 下的现有数组（或空数组）的元素展开。
- ...value 将当前 currentObject 中该 key 下的数组 value 的元素展开。
- 通过将这两个展开的数组放在一个新数组字面量 [] 中，我们实现了两个数组的拼接，并将结果赋值回 accumulator[key]。
注意事项
- 数据类型假设：此解决方案假设您希望合并的属性值都是数组。如果某个属性的值不是数组，此方法将尝试将其展开，这可能导致非预期的行为（例如，字符串会被展开成字符数组）。在实际应用中，如果数据类型不确定，您可能需要添加额外的类型检查。
- 性能：对于大型数据集，reduce 结合 forEach 和数组展开是一种高效且可读性强的方法。
- Lodash 替代方案：虽然本教程专注于纯 JavaScript，但如果您在项目中使用 Lodash 库，可以使用 _.mergeWith 配合自定义合并函数或 _.reduce 结合 _.assignWith 来实现类似功能，但通常纯 JavaScript 方案在现代浏览器中已足够简洁和高效。
总结
通过巧妙地结合 Array.prototype.reduce() 和 Object.entries()，我们可以优雅地解决将对象数组中包含数组值的属性合并到单个对象的问题。这种模式在处理聚合数据、扁平化结构等场景中非常实用，并且完全基于纯 JavaScript 实现，无需引入额外库，是前端开发中一项重要的技能。
