如何合并两个属性不同的对象数组？仅保留array1中存在的项

需求明确：基于id匹配两个数组的对象，合并双方属性，仅保留array1中存在的对象。以下是两种稳定可行的JavaScript实现方案：

方案1：map + find（适合小规模数组） #

遍历array1的每个元素，在array2中找到同id的对象后合并属性：

const array1 = [{"id":1,"cost":200,"qty":56},{"id":2,"cost":100,"qty":16}];
const array2 = [{"id":1,"cost":200,"desc":"a good one"},{"id":2,"cost":100,"desc":"a bad one"},{"id":3,"cost":50,"desc":"an okay one"}];

const mergedArray = array1.map(item1 => {
  // 根据id匹配array2中的对应对象
  const matchedItem = array2.find(item2 => item2.id === item1.id);
  // 合并两个对象的属性，重复属性会被后者覆盖（示例中cost属性一致无影响）
  return { ...item1, ...matchedItem };
});

console.log(mergedArray);
// 输出：[{"id":1,"cost":200,"qty":56,"desc":"a good one"},{"id":2,"cost":100,"qty":16,"desc":"a bad one"}]

方案2：构建ID映射表（适合大数据量场景） #

先将array2转为以id为键的映射对象，再遍历array1快速匹配合并，时间复杂度更低：

const array1 = [{"id":1,"cost":200,"qty":56},{"id":2,"cost":100,"qty":16}];
const array2 = [{"id":1,"cost":200,"desc":"a good one"},{"id":2,"cost":100,"desc":"a bad one"},{"id":3,"cost":50,"desc":"an okay one"}];

// 用reduce构建array2的ID映射表，O(n)时间复杂度
const array2IdMap = array2.reduce((map, item) => {
  map[item.id] = item;
  return map;
}, {});

// 遍历array1快速匹配合并，O(m)时间复杂度
const mergedArray = array1.map(item1 => ({
  ...item1,
  ...array2IdMap[item1.id]
}));

console.log(mergedArray);
// 输出目标结果

可选优化：处理无匹配ID的情况 #

如果array1中存在array2没有对应id的对象，可避免引入undefined：

const mergedArray = array1.map(item1 => {
  // 无匹配时用空对象兜底
  const matchedItem = array2IdMap[item1.id] || {};
  return { ...item1, ...matchedItem };
});

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