JavaScript教程：高效合并对象数组中的同名数组属性

本文详细介绍了如何使用纯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 函数（升序执行），将其结果汇总为单个返回值。它接受两个参数：一个回调函数和一个初始值。

AssemblyAI

转录和理解语音的AI模型

65

查看详情

回调函数包含四个参数：

• 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' }
  ]
}
*/

代码解析

1. before.reduce((acc, curr) => { ... }, {});

   • reduce 方法被调用在 before 数组上。
   • acc (accumulator) 是累加器，它在每次迭代中都会被更新并最终作为 reduce 的返回值。我们将其初始化为一个空对象 {}，因为我们希望最终得到一个单一的对象。
   • curr (current value) 是 before 数组中的当前对象。在第一次迭代中，curr 是 before[0]；在第二次迭代中，curr 是 before[1]，依此类推。

2. Object.entries(curr).forEach(([key, value]) => { ... });

   • 在每次 reduce 迭代中，我们使用 Object.entries(curr) 来获取当前对象 curr 的所有可枚举属性的键值对数组。
   • forEach 方法遍历这些键值对。[key, value] 是解构赋值，它将每个 [key, value] 数组元素解构为独立的 key 和 value 变量。

3. 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的方式，将一个包含复杂数组属性的对象数组，优雅地合并成一个聚合所有相关数组值的单一对象。

以上就是JavaScript教程：高效合并对象数组中的同名数组属性的详细内容，更多请关注php中文网其它相关文章！