JavaScript合并嵌套数组并保留唯一元素（无库依赖）

我懂你的困扰——用ES6方法尝试后还是出现了重复项，既要保证外层数组按document_id唯一，还要让内层detail_info数组里的元素按id不重复，同时得兼容空数组的情况对吧？下面给你一个纯原生ES6+的实现方案，完全不需要依赖任何第三方库：

实现思路 #

• 先把两个源数组合并成一个临时数组，统一处理所有元素
• 用Map存储已处理的外层对象，以document_id作为键，确保每个document_id只保留一个条目
• 对于每个条目的detail_info数组，同样用Map记录已存在的id，过滤掉重复的子元素
• 最后把Map中的值转换成数组，就是最终的合并结果

代码实现 #

let data1 = [{ "document_id": 12264, "detail_info": [{ "id": 745, "lot_no": "X12345", }, { "id": 744, "lot_no": "Z12345", } ] }, { "document_id": 12226, "detail_info": [{ "id": 738, "lot_no": "B12345", }, { "id": 739, "lot_no": "C12345", } ] }, { "document_id": 12221, "detail_info": [] } ]
let data2 = [{ "document_id": 12264, "detail_info": [{ "id": 744, "lot_no": "Z12345", }, { "id": 743, "lot_no": "L12345", } ] }, { "document_id": 12226, "detail_info": [{ "id": 739, "lot_no": "C12345", }] }, { "document_id": 12229, "detail_info": [{ "id": 741, "lot_no": "E12345", }] }, { "document_id": 10095, "detail_info": [] } ]

// 合并并去重的核心函数
function mergeNestedArrays(arr1, arr2) {
  // 合并两个源数组
  const combined = [...arr1, ...arr2];
  // 用Map存储外层唯一对象，key为document_id
  const resultMap = new Map();

  combined.forEach(item => {
    const { document_id, detail_info } = item;
    // 如果当前document_id已经存在，就合并detail_info；否则直接添加
    if (resultMap.has(document_id)) {
      const existingItem = resultMap.get(document_id);
      // 合并并去重detail_info：用Map以id为key存储子元素
      const detailMap = new Map();
      // 先加入已有detail_info的元素
      existingItem.detail_info.forEach(detail => detailMap.set(detail.id, detail));
      // 再加入当前item的detail_info元素（重复id会自动覆盖，保留先出现的）
      detail_info.forEach(detail => detailMap.set(detail.id, detail));
      // 更新去重后的detail_info
      existingItem.detail_info = Array.from(detailMap.values());
    } else {
      // 浅拷贝原对象，避免修改原始数据的引用
      const newItem = { ...item, detail_info: [...item.detail_info] };
      resultMap.set(document_id, newItem);
    }
  });

  // 把Map的值转换成数组，得到最终结果
  return Array.from(resultMap.values());
}

// 执行合并
const data3 = mergeNestedArrays(data1, data2);
console.log(data3);

代码说明 #

• 外层用Map处理document_id的唯一性，保证每个文档ID只出现一次
• 内层detail_info通过Map以id为键，自动过滤重复子元素，不管是源数组内部的重复还是合并时的重复都能处理
• 对原对象做了浅拷贝，避免修改原始数据的引用
• 完美兼容detail_info为空数组的情况，空数组会被直接保留

运行这段代码后，得到的data3就是你期望的结果啦～

内容的提问来源于stack exchange，提问作者bossajie