如何合并两组对象数组，按第二组嵌套connect.id匹配第一组的id

实现思路 #

• 先预处理arr2，建立connect.id到对应value的映射表，避免后续遍历arr1时重复遍历arr2，优化执行效率
• 遍历arr1，匹配映射表中对应的value值，合并属性得到最终结果

完整代码实现 #

const arr1 = [
  { "id": 7619209572755, "title": "Title 1" },
  { "id": 7619209157372, "title": "Title 2" },
  { "id": 7619209921625, "title": "Title 3" }
];  
const arr2 = [
  {
    "id": 7619217289192,
    "connect": [
      { "id": 7619209157372, "title": "Title 1" }
    ],
    "value": "1"
  },
  {
    "id": 7619217242206,
    "connect": [
      { "id": 7619209921625, "title": "Title 2" }
    ],
    "value": "2"
  }
];

// 预处理生成映射表
const valueMap = new Map();
arr2.forEach(arr2Item => {
  // 遍历每个arr2元素的connect数组，存储id和value的对应关系
  arr2Item.connect.forEach(connectItem => {
    valueMap.set(connectItem.id, arr2Item.value);
  });
});

// 生成合并后的结果，使用展开运算符避免修改原arr1的对象
const mergedResult = arr1.map(arr1Item => {
  const matchedValue = valueMap.get(arr1Item.id);
  return matchedValue ? { ...arr1Item, value: matchedValue } : { ...arr1Item };
});

console.log(mergedResult);

运行上述代码得到的mergedResult和你给出的期望结果完全一致。

补充说明 #

如果允许修改原arr1的对象，可以省去展开运算符的步骤，直接给匹配到的对象添加value属性即可，内存占用更低。

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