JavaScript数组合并：如何根据ID匹配元素并创建新数组？

在JavaScript中，如果你有两个数组，并且你想根据某个ID字段来匹配元素并创建一个新数组，你可以使用map和find方法来实现。假设你有两个数组array1和array2，它们都有一个共同的ID字段，你可以按照以下步骤来合并它们：

示例数据

假设你有以下两个数组：

const array1 = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const array2 = [
  { id: 1, age: 25 },
  { id: 2, age: 30 },
  { id: 3, age: 35 }
];

合并数组

你可以使用map和find方法来根据ID匹配元素并创建一个新数组：

const mergedArray = array1.map(item1 => {
  const matchedItem = array2.find(item2 => item2.id === item1.id);
  return { ...item1, ...matchedItem };
});

console.log(mergedArray);

输出结果

合并后的数组将如下所示：

[
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
]

解释

1. map方法：遍历array1中的每个元素。
2. find方法：在array2中查找与array1当前元素ID匹配的元素。
3. 对象展开运算符...：将array1和array2中的匹配元素合并成一个新对象。

注意事项

• 如果array2中没有与array1中某个元素ID匹配的元素，matchedItem将会是undefined。你可以根据需要处理这种情况，例如提供一个默认值或跳过该元素。
• 如果数组很大，这种方法的性能可能不是最优的。在这种情况下，可以考虑使用更高效的数据结构（如Map）来优化查找操作。

优化版本（使用Map）

如果你处理的数据量较大，可以使用Map来提高查找效率：

const map = new Map(array2.map(item => [item.id, item]));

const mergedArray = array1.map(item1 => {
  const matchedItem = map.get(item1.id);
  return { ...item1, ...matchedItem };
});

console.log(mergedArray);

这种方法的时间复杂度是O(n)，比使用find的O(n^2)更高效。