如何根据location匹配合并两个数组的关联对象并添加属性值？

当然可以实现！这是开发中非常常见的数组对象关联合并需求，我给你分享几种实用的JavaScript实现方案，你可以根据场景选择：

实现方法 #

方法一：使用map() + find()（直观易懂，适合小数据量） #

这种方法逻辑清晰，直接遍历第一个数组，逐个匹配第二个数组中location相同的对象，然后合并属性：

// 示例数组
const arr1 = [
  { location: 'Beijing', population: 21540000 },
  { location: 'Shanghai', population: 24280000 },
  { location: 'Guangzhou', population: 15300000 }
];

const arr2 = [
  { location: 'Beijing', area: 16410 },
  { location: 'Shanghai', area: 6340 },
  { location: 'Shenzhen', area: 1997 }
];

// 合并操作
const mergedArr = arr1.map(item1 => {
  const matchedItem = arr2.find(item2 => item2.location === item1.location);
  // 如果找到匹配项，合并属性；否则返回原对象
  return matchedItem ? { ...item1, ...matchedItem } : { ...item1 };
});

console.log(mergedArr);
// 输出结果：
// [
//   { location: 'Beijing', population: 21540000, area: 16410 },
//   { location: 'Shanghai', population: 24280000, area: 6340 },
//   { location: 'Guangzhou', population: 15300000 }
// ]

方法二：先构建映射表（性能更优，适合大数据量） #

如果你的数组元素很多，find()每次遍历的成本会比较高。可以先把arr2转换成以location为键的对象，这样查找匹配项的时间复杂度会从O(n)降到O(1)：

// 先将arr2转为location为键的映射对象
const locationMap = arr2.reduce((map, item) => {
  map[item.location] = item;
  return map;
}, {});

// 合并数组
const mergedArr = arr1.map(item1 => {
  const matchedItem = locationMap[item1.location];
  return matchedItem ? { ...item1, ...matchedItem } : { ...item1 };
});

额外说明：处理多个匹配项的情况 #

如果arr2中存在多个相同location的对象，上面的方法只会取最后一个（方法二）或第一个（方法一）。如果需要把所有匹配项的属性都合并进去，可以用filter() + reduce()：

const arr2WithDuplicates = [
  { location: 'Beijing', area: 16410 },
  { location: 'Beijing', gdp: 41610 },
  { location: 'Shanghai', area: 6340 }
];

const mergedArr = arr1.map(item1 => {
  const matchedItems = arr2WithDuplicates.filter(item2 => item2.location === item1.location);
  // 合并所有匹配项的属性到原对象
  return matchedItems.reduce((merged, item) => ({ ...merged, ...item }), { ...item1 });
});

console.log(mergedArr);
// 输出结果：
// [
//   { location: 'Beijing', population: 21540000, area: 16410, gdp: 41610 },
//   { location: 'Shanghai', population: 24280000, area: 6340 },
//   { location: 'Guangzhou', population: 15300000 }
// ]

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