JavaScript如何基于对象id键匹配合并两个数组生成新数组

你之前用filter配合includes失败的原因是：includes 方法对引用类型的判断是匹配内存地址，而不是对象属性值，所以无法匹配两个不同数组里id相同的对象。

核心思路 #

• 优先将第二个数组转换为以id为键的哈希表（JS中可用Map或普通对象），后续查找匹配项的时间复杂度为O(1)，整体性能远高于嵌套遍历，适合任意数据量场景
• 若数据量极小，也可以直接用filter配合find实现，代码更简洁

代码实现 #

高性能方案（推荐） #

const array1 = [
  { x_id:6711230070958, id:279482 },
  { x_id:6770878283950, id:213 },
  { x_id:6753301168302, id:330120 }
];
    
const array2 = [
  { id: 279482, stock: 9 }, 
  { id: 31231, stock: 2 }, 
  { id: 330120, stock: 2 }
];

// 先把array2转成id为键的Map
const array2Map = new Map(array2.map(item => [item.id, item]));
// 遍历array1匹配合并
const result = array1.reduce((acc, cur) => {
  if (array2Map.has(cur.id)) {
    // 合并两个对象的属性，array2的属性会覆盖array1的重名属性，如需反过来调整展开顺序即可
    acc.push({...cur, ...array2Map.get(cur.id)});
  }
  return acc;
}, []);

简洁版方案（适合数据量<1000的场景） #

const result = array1.filter(item1 => 
  array2.some(item2 => item2.id === item1.id)
).map(item1 => {
  const matchItem = array2.find(item2 => item2.id === item1.id);
  return {...item1, ...matchItem};
});

两种方案运行后得到的result都与预期输出一致。

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