将嵌套数组与Javascript中的唯一元素合并

我如何在不使用任何库的情况下实现这一点？ 我用一些ES6函数尝试过它，但它最终复制了数组中的一些项。它应该返回unique，尤其是当数组中没有子数组时

我有三个数组变量：

数据1=第一个数据

data2=要与data1合并的变量

data3=合并变量的结果

        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": []
          }
        ]

//**This should be the result**
      let data3=[
      {
        "document_id": 12264,
        "detail_info": [
          {
            "id": 745,
            "lot_no": "X12345",
          },
          {
            "id": 744,
            "lot_no": "Z12345",
          },
          {
            "id": 743,
            "lot_no": "L12345",
          }
        ]
      },
      {
        "document_id": 12226,
        "detail_info": [
          {
            "id": 738,
            "lot_no": "B12345",
          },
          {
            "id": 739,
            "lot_no": "C12345",
          }
        ]
      },
      {
        "document_id": 12221,
        "detail_info": []
      },
      {
        "document_id": 12229,
        "detail_info": [
          {
            "id": 741,
            "lot_no": "E12345",
          }
        ]
      },
      {
        "document_id": 10095,
        "detail_info": []
      }
    ]

---

如果您只想组合两个数组，请使用

concat

：

let data3 = data1.concat(data2);

---

首先将

data1

和

data2

连接到单个数组中（

[…data1，…data2]

）

然后，使用生成一个字典，其键都可能是数组中找到的

document\u id

在

reduce

内部，当

文档id的条目已经存在时，您必须将
详细信息
合并在一起。从现有条目和当前项创建一个包含所有
详细信息的数组，并使用从
详细信息.id
生成的
集合
删除重复项，然后将该
集合
id映射到相应的
详细信息
条目

最后，使用以下命令将字典转换为数组：


const data1=[
{“document_id”：12264，someData:'hello'，“detail_info”：[{“id”：745，“lot_no”：“X12345”}，{“id”：744，“lot_no”：“Z12345”}，
{“文件id”：12226，“详细信息”：[{“id”：738，“批号”：“B12345”}，{“id”：739，“批号”：“C12345”}]}，
{“文件id”：12221，“详细信息”：[]}
];
常数数据2=[
{“文件id”：12264，“详细信息”：[{“id”：744，“批号”：“Z12345”}，{“id”：743，“批号”：“L12345”}]}，
{“文件id”：12226，“详细信息”：[{“id”：739，“批号”：“C12345”}}，
{“文件id”：12229，“详细信息”：[{“id”：741，“批号”：“E12345”}}，
{“文件id”：10095，“详细信息”：[]}
];
const distinctById=arr=>[…新集合（arr.map（（{id}）=>id））]
.map（id=>arr.find（info=>info.id==id））
const data3=Object.values（[…data1，…data2]。reduce（（acc，x）=>{
acc[x.document_id]=acc[x.document_id]|{……x，详细信息：[]}；
acc[x.document\u id].detail\u info=distinctById（[…acc[x.document\u id].detail\u info，…x.detail\u info]）；
返回acc；
}, {}));
console.log（data3）当我做concat时，复制仍然存在。它正在工作。非常感谢您，如果在文档_id旁边有其他元素，我如何为最终结果添加更多内容？很高兴这有帮助！我会更新答案来处理这个案子的。非常感谢你的帮助，它完全起作用了。我想问一下，这种方式对DOM操作来说是否更快/更好，因为我在React.js的状态中使用它，我正在更新它的状态。因为React使用虚拟DOM，它只会更新更改的DOM部分，所以更改所有状态对性能的影响应该不是问题，因为每个渲染循环实际上都会重新渲染整个页面，但只会在有差异的地方修补DOM。我尝试了你的最新答案，它正在工作。但是你知道我该怎么分类吗？与最后添加的项一样，添加的项应位于数组的最后一个索引中。