JavaScript 中高效合并两个数组：基于 ID 关联的嵌套对象合并教程-js教程-PHP中文网

JavaScript 中高效合并两个数组：基于 ID 关联的嵌套对象合并教程

本文介绍如何将一个包含引用 ID 的数据数组（如 goalsTable）与另一个包含完整数据的对象数组（如 goalsData）进行精准合并，通过 _id 与 goalsTable 匹配，实现字段注入式合并。

本文介绍如何将一个包含引用 id 的数据数组（如 `goalstable`）与另一个包含完整数据的对象数组（如 `goalsdata`）进行精准合并，通过 `_id` 与 `goalstable` 匹配，实现字段注入式合并。

在实际开发中，常遇到「主数据 + 关联详情」分离存储的场景：例如用户列表仅保存 goalsTable 引用 ID，而详细指标（如 tableData、goalsData）存于另一集合。此时需按 ID 合并，生成结构完整的最终数据。直接嵌套循环虽可行，但存在性能与可维护性隐患；本文提供清晰、高效且符合现代 JavaScript 实践的解决方案。

✅ 推荐方案：使用 Map 预构建索引（O(n+m) 时间复杂度）

相比双重 map 嵌套（O(n×m)），先将 goalsData 转为以 _id 为键的 Map，再单次遍历 data 数组进行查找，显著提升性能，尤其适用于中大型数据集：

OpenJDK 24

OpenJDK 24 Windows x64 官方参考实现（24+36），适合 Windows 环境进行 Java 开发、编译、运行和版本兼容性验证。

下载

const data = [
  { name: '1', goalsTable: '6544b8a5fea0bf50fc0c62fb' },
  { name: '1fork', goalsTable: '6548740f05dc440b5c61c5ac' }
];

const goalsData = [
  {
    _id: '6544b8a5fea0bf50fc0c62fb',
    tableData: [[], [], [], []],
    goalsData: { qty: 12 }
  },
  {
    _id: '6548740f05dc440b5c61c5ac',
    tableData: [[], [], [], [], []],
    goalsData: { qty: 10 }
  }
];

// 步骤 1：构建 goalsData 的 ID → 对象映射
const goalsMap = new Map(
  goalsData.map(item => [item._id, item])
);

// 步骤 2：合并 —— 每个 data 项注入匹配的 goalsData 字段
const merged = data.map(item => {
  const match = goalsMap.get(item.goalsTable);
  if (match) {
    return {
      ...item,
      _id: match._id,
      tableData: match.tableData,
      goalsData: match.goalsData
    };
  }
  // 可选：对无匹配项保留原样或返回 null/undefined
  return item;
});

console.log(merged);
// 输出：
// [
//   {
//     name: '1',
//     goalsTable: '6544b8a5fea0bf50fc0c62fb',
//     _id: '6544b8a5fea0bf50fc0c62fb',
//     tableData: [[], [], [], []],
//     goalsData: { qty: 12 }
//   },
//   { /* ... 同理 */ }
// ]

⚠️ 注意事项

ID 类型一致性：确保 data[i].goalsTable 与 goalsData[j]._id 类型完全一致（均为字符串或 ObjectId）。若后端返回的是 MongoDB ObjectId 实例，需统一调用 .toString() 转换后再匹配。
空值处理：goalsMap.get() 在无匹配时返回 undefined，务必检查 if (match) 避免属性访问错误。
不可变性考量：上述方案返回新数组，不修改原始 data；若需就地更新，可改用 forEach 并直接赋值（但不推荐，违背函数式原则）。
扩展性建议：如需合并更多字段或支持多层级嵌套，可封装为通用函数：

function mergeByField(source, target, sourceKey, targetKey, fieldsToMerge) {
  const map = new Map(target.map(t => [t[targetKey], t]));
  return source.map(s => {
    const match = map.get(s[sourceKey]);
    return match ? { ...s, ...Object.fromEntries(fieldsToMerge.map(k => [k, match[k]])) } : s;
  });
}

// 使用示例
const result = mergeByField(data, goalsData, 'goalsTable', '_id', ['tableData', 'goalsData']);

该方法兼顾可读性、性能与健壮性，是生产环境中合并关联数组的首选实践。