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

Posted 2023-02-19

【中文标题】将嵌套数组与Javascript中的唯一元素合并

【英文标题】：Merge nested array with unique element in Javascript

【发布时间】：2019-07-20 23:35:04

【问题描述】：

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

我有三个数组变量：

data1 = 第一个数据

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

【参考方案1】：

首先将data1 和data2 连接成一个数组([...data1, ...data2])。

然后用Array.reduce()，生成一个字典，它的键是数组中所有可能的document_id。

在reduce 内部，当document_id 的条目已经存在时，您必须将detail_info 合并在一起。从现有条目和当前条目创建一个包含所有 detail_info 的数组，并使用从 detail_info.id 生成的 Set 删除重复项，然后将此 Set 的 ID 映射到相应的 detail_info 条目.

最后，用Object.values()将字典转换成数组：

const data1 = [
   "document_id": 12264, someData: 'hello', "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": [] 
];

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

const distinctById = arr => [...new Set(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, detail_info: [] ;
  acc[x.document_id].detail_info = distinctById([...acc[x.document_id].detail_info, ...x.detail_info]);
  return acc;
, ));

console.log(data3);

如果您想保持 detail_info 数组按插入顺序排列，请执行以下操作：

const distinctById = arr => 
  const uniqueIds = new Set(arr.map(( id ) => id));
  return arr.filter(( id ) => uniqueIds.delete(id));


console.log(distinctById([ id: 5 ,  id: 4 ,  id: 5 ,  id: 3 ,  id: 4 ]))

【讨论】：

它工作正常。非常感谢，如果除了 document_id 旁边的元素之外，我如何为最终结果添加更多内容？

很高兴它有帮助！我也会更新答案来处理这种情况

非常感谢您的帮助，它完全有效。我想问一下这种方式是否更快/更好地进行 DOM 操作，因为我在 React.js 的状态下使用它，我正在更新它的状态。

由于 React 使用了 Virtual DOM，它只会更新 DOM 中改变的部分，所以改变所有状态对性能的影响应该不是问题，因为每个渲染循环实际上都会重新渲染整个页面，但只修补有差异的 DOM。

我尝试了您的最新答案，它正在工作。但是你知道我该如何排序吗？就像添加的最后一项应该在数组的最后一个索引中。

【参考方案2】：

如果你只想合并两个数组，使用concat:

let data3 = data1.concat(data2);

【讨论】：

当我进行 concat 时，重复仍然存在。