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

本教程详细介绍了如何使用纯 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 函数（从左到右），将其结果汇总为单个返回值。

析稿Ai写作

科研人的高效工具：AI论文自动生成，十分钟万字，无限大纲规划写作思路。

142

查看详情

它的基本语法是： 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()，我们可以按以下步骤实现数据转换：

1. 初始化累加器： reduce() 的 initialValue 设置为一个空对象 {}，这将是最终的聚合结果。
2. 迭代每个源对象： reduce() 方法会遍历 before 数组中的每一个对象。
3. 遍历当前对象的属性： 对于 before 数组中的每一个 current 对象，使用 Object.entries(current) 来获取其所有 [key, value] 对。
4. 连接数组值： 对于每个 [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' }
  ]
}
*/

注意事项

1. 数据类型假设： 上述解决方案假设所有需要合并的属性值都是数组。如果某个属性的值不是数组（例如，是字符串、数字或另一个对象），尝试对其使用扩展运算符 ... 进行连接会导致运行时错误。在实际应用中，如果数据结构可能不一致，您可能需要添加类型检查来确保 value 确实是一个数组。

   // 示例：添加类型检查
   Object.entries(currentObject).forEach(([key, value]) => {
       if (Array.isArray(value)) {
           accumulator[key] = [ ...(accumulator[key] ?? []), ...value];
       } else {
           // 处理非数组值，例如直接赋值或抛出错误
           accumulator[key] = value; 
       }
   });

   登录后复制
2. 对象引用： 数组中的对象元素（例如 {"id": "1"}）是按引用存储的。这意味着如果原始数组中的某个对象被修改，result 中的对应对象也会受到影响。如果需要完全独立的数据，则在连接时需要对这些嵌套对象进行深拷贝。
3. 性能： 对于非常大的数组和嵌套对象，reduce 结合 Object.entries 和扩展运算符的性能通常是可接受的。然而，如果处理的数据量极大，可以考虑其他更底层的优化策略，但这对于大多数Web应用场景来说通常不是必需的。

总结

通过巧妙地结合 Array.prototype.reduce() 和 Object.entries()，我们可以用简洁高效的纯 JavaScript 代码，将一个包含数组值的对象数组合并为一个单一的聚合对象，并自动连接所有同名属性的数组值。这种模式在数据转换和聚合场景中非常实用，是每个 JavaScript 开发者都应该掌握的技巧。理解其工作原理和潜在的注意事项，将帮助您编写出更健壮和高效的代码。

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