JavaScript中基于对象id优雅合并两个数组的实现方法

给定两个包含对象的数组（对象通过id字段匹配）：

const prev = [A, C, D, E]
const curr = [A, B, D, F]
// 其中对象示例：A = {id: "A", ... }

需要生成如下格式的结果（顺序无关）：

[[A, A], [null, B], [C, null], [D, D], [E, null], [null, F]]

优雅实现方案 #

利用Map做快速查找，结合Set收集所有唯一ID，高效生成配对结果：

// 将数组转换为以id为键的Map，实现O(1)时间复杂度的查找
const prevMap = new Map(prev.map(item => [item.id, item]));
const currMap = new Map(curr.map(item => [item.id, item]));

// 收集两个数组中所有唯一的id，自动去重
const allUniqueIds = new Set([...prevMap.keys(), ...currMap.keys()]);

// 遍历所有id，生成配对项：存在则取对应对象，不存在则用null填充
const result = Array.from(allUniqueIds, id => [
  prevMap.get(id) || null,
  currMap.get(id) || null
]);

方案说明 #

1. 性能优势：Map的查找操作时间复杂度为O(1)，相比嵌套遍历的O(n*m)，在数组元素较多时性能提升明显。
2. 兼容性强：天然支持两个数组长度不同的场景，不管哪一方有额外元素，都能正确生成[对象, null]或[null, 对象]的项。
3. 简洁易读：通过原生API组合实现，逻辑清晰，无需复杂的条件判断。

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