高效合并 JavaScript 对象数组：以键为基准的聚合方法-js教程-PHP中文网

高效合并 JavaScript 对象数组：以键为基准的聚合方法

心靈之曲

发布： 2025-10-01 09:48:11

原创

764人浏览过

高效合并 JavaScript 对象数组：以键为基准的聚合方法

本教程详细阐述了如何在 JavaScript 中高效地将包含不同结构但共享同一逻辑键的 JSON 对象数组进行合并。通过利用 Array.prototype.reduce() 和 Object.assign()，文章提供了一种简洁而强大的方法，将散布的数据聚合为结构完整、易于处理的单个对象，从而简化数据管理和后续操作。

引言：数据合并的挑战

在处理复杂数据时，我们经常会遇到需要将分散在不同对象中的相关信息聚合到一起的场景。例如，你可能有一个包含学生基本信息的对象，以及另一个包含学生保密数据的对象，它们通过一个共同的 key（如学生id）关联。目标是将这些信息合并成一个统一的学生记录，以便于管理和展示。

考虑以下原始数据结构：

[
  {
    "key": 111,
    "studentInfo": [
      {
        "details": {
          "calculated_fields": null,
          "status": false
        }
      }
    ]
  },
  {
    "key": 222,
    "studentInfo": [
      {
        "details": {
          "calculated_fields": null,
          "status": false
        }
      }
    ]
  },
  {
    "confidential": {
      "data": {
        "access_control": {
          "private_data": null,
          "users": []
        }
      },
      "key": 111
    }
  },
  {
    "confidential": {
      "data": {
        "access_control": {
          "private_data": null,
          "users": []
        }
      },
      "key": 222
    }
  }
]

登录后复制

我们期望的输出是这样的，每个 key 对应的所有信息都被合并到一个对象中：

[
  {
    "key": 111,
    "studentInfo": [
      {
        "details": {
          "calculated_fields": null,
          "status": false
        }
      }
    ],
    "confidential": {
      "data": {
        "access_control": {
          "private_data": null,
          "users": []
        }
      },
      "key": 111
    }
  },
  {
    "key": 222,
    "studentInfo": [
      {
        "details": {
          "calculated_fields": null,
          "status": false
        }
      }
    ],
    "confidential": {
      "data": {
        "access_control": {
          "private_data": null,
          "users": []
        }
      },
      "key": 222
    }
  }
]

登录后复制

核心合并策略：reduce 与 Object.assign

JavaScript 提供了强大的数组和对象操作方法，其中 Array.prototype.reduce() 和 Object.assign() 在处理这类数据聚合任务时尤为高效和灵活。

Array.prototype.reduce(): 这个方法对数组中的每个元素执行一个由您提供的 reducer 函数，将其结果汇总为单个返回值。它非常适合用于构建一个新数组或新对象，通过迭代原始数组来逐步填充。
Object.assign(): 这个方法用于将所有可枚举的自有属性从一个或多个源对象复制到目标对象。它会返回目标对象。当属性名相同时，后面的源对象的属性会覆盖前面源对象的属性。

结合这两个方法，我们可以遍历原始数据数组，根据对象的 key 识别并合并相关信息。

立即学习“Java免费学习笔记（深入）”；

基于VC与Matlab的混合编程实现图像的三维显示 WORD版

本文档主要讲述的是基于VC与Matlab的混合编程实现图像的三维显示；介绍了VC++与Matlab混合编程的一般实现方法，并实现对二维影像图的三维效果显示。 MATLAB既是一种直观、高效的计算机语言,同时又是一个科学计算平台。它为数据分析和数据可视化、算法和应用程序开发提供了最核心的数学和高级图形工具。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看

查看详情

解决方案与代码示例

以下代码展示了如何使用 reduce 和 Object.assign 来实现上述数据合并：

const inputData = [
  {
    key: 111,
    studentInfo: [
      {
        details: {
          calculated_fields: null,
          status: false,
        },
      },
    ],
  },
  {
    key: 222,
    studentInfo: [
      {
        details: {
          calculated_fields: null,
          status: false,
        },
      },
    ],
  },
  {
    confidential: {
      data: {
        access_control: {
          private_data: null,
          users: [],
        },
      },
      key: 111,
    },
  },
  {
    confidential: {
      data: {
        access_control: {
          private_data: null,
          users: [],
        },
      },
      key: 222,
    },
  },
];

const mergedResult = []; // 声明一个空数组，作为 reduce 的累加器初始值

inputData.reduce((outputAccumulator, currentObject) => {
  // 判断当前对象是否包含顶层的 'key' 属性
  if (currentObject.key) {
    // 如果有顶层 'key'，我们将其视为该键的“主记录”或起始记录，
    // 直接推入结果数组中。
    outputAccumulator.push(currentObject);
  } else {
    // 如果没有顶层 'key'，则认为其 'key' 嵌套在 'confidential' 属性中，
    // 并且该对象是用于补充现有记录的“辅助记录”。
    // 查找 outputAccumulator 中是否存在与当前对象的 confidential.key 匹配的记录。
    const targetObject = outputAccumulator.find(
      (o) => o.key === currentObject.confidential.key
    );

    // 如果找到了匹配的目标对象，则将当前对象的属性合并到目标对象中。
    // Object.assign 会将 currentObject 的所有可枚举属性复制到 targetObject。
    // 如果属性名冲突，currentObject 的值将覆盖 targetObject 的值。
    if (targetObject) {
      Object.assign(targetObject, currentObject);
    }
  }
  // 返回累加器，供下一次迭代使用
  return outputAccumulator;
}, mergedResult); // 将 mergedResult 作为 reduce 的初始累加器

console.log(JSON.stringify(mergedResult, null, 2));

登录后复制

代码解析

mergedResult = []: 我们初始化一个空数组 mergedResult，它将作为 reduce 方法的累加器 (outputAccumulator)，最终包含所有合并后的对象。
inputData.reduce((outputAccumulator, currentObject) => { ... }, mergedResult):
- reduce 方法遍历 inputData 数组中的每一个 currentObject。
- 在每次迭代中，它会执行回调函数，并将上一次迭代返回的 outputAccumulator 和当前的 currentObject 作为参数传入。
if (currentObject.key): 这是一个关键的判断。它区分了两种类型的对象：
- 主记录: 如果 currentObject 拥有顶层 key 属性（例如 studentInfo 对象），它被视为该键的“主记录”。我们直接将其推入 outputAccumulator。
- 辅助记录: 如果 currentObject 没有顶层 key 属性（例如 confidential 对象），我们假设它的 key 嵌套在 confidential.key 中，并且它旨在补充一个已存在的主记录。
outputAccumulator.find((o) => o.key === currentObject.confidential.key): 对于辅助记录，我们使用 find 方法在 outputAccumulator 中查找一个已经存在的主记录，该主记录的 key 与当前辅助记录的 confidential.key 相匹配。
Object.assign(targetObject, currentObject): 如果找到了匹配的 targetObject，我们就使用 Object.assign 将 currentObject 的所有属性合并到 targetObject 中。这样，targetObject 就会被 currentObject 的新属性所扩展，从而实现了数据的聚合。
return outputAccumulator: 每次迭代结束后，回调函数返回当前的 outputAccumulator，它将作为下一次迭代的 outputAccumulator。

注意事项

键的唯一性与一致性: 确保用于合并的键（无论是顶层 key 还是嵌套的 confidential.key）在逻辑上是唯一的，并且在所有相关对象中保持一致。如果键值不唯一，合并结果可能不符合预期。
属性覆盖行为: Object.assign() 在合并时，如果源对象和目标对象有相同的属性名，源对象的属性值会覆盖目标对象的属性值。在设计数据结构时，需要考虑这种覆盖行为是否符合您的业务逻辑。如果需要更复杂的合并策略（例如深度合并、数组合并等），可能需要使用 Lodash 库的 _.merge 或自定义合并函数。
性能考量: 对于非常庞大的数组（例如数十万条记录），find 方法在每次迭代中都会遍历 outputAccumulator，这可能导致性能下降（O(N^2) 复杂度）。在这种情况下，可以考虑使用 Map 或 Object 作为中间存储来优化查找过程，将时间复杂度降低到 O(N)。例如，先将所有对象按键存储到 Map 中：
```
const map = new Map();
inputData.forEach(obj => {
    const key = obj.key || obj.confidential?.key;
    if (key) {
        map.set(key, { ...(map.get(key) || {}), ...obj });
    }
});
const optimizedMergedResult = Array.from(map.values());
```
登录后复制
这种方式通常在处理大规模数据时表现更优。
键的嵌套深度: 本教程的解决方案假设 key 要么在顶层，要么直接嵌套在 confidential 属性下。如果 key 可能出现在更深的嵌套层级或不同的路径下，则需要调整查找 key 的逻辑，使其更具通用性。

总结

通过巧妙地结合 Array.prototype.reduce() 和 Object.assign()，我们能够以一种声明式且高效的方式，将结构不一致但通过共同键关联的 JSON 对象数组进行合并。这种模式在数据预处理、API响应整合以及各种需要数据聚合的场景中都非常实用。理解其背后的原理和注意事项，有助于开发者构建更健壮、更高效的数据处理逻辑。

以上就是高效合并 JavaScript 对象数组：以键为基准的聚合方法的详细内容，更多请关注php中文网其它相关文章！