如何高效用含50个元素的小数组更新含10万元素的大数组？

问题分析 #

你的核心问题在于原代码处理大数组a时，reduce操作里每次都用对象展开语法{...acc, [cur.id]: cur}创建新对象，这会导致**O(n²)**的时间复杂度（每次展开都要复制已有键值对），对于10万条数据来说，这种操作的性能开销会非常大。

而b的规模很小（仅50条），我们可以利用这一点优化整个流程。

最优解决方案 #

思路 #

1. 先将小规模数组b转换为以id为键的映射（Map或普通对象），这个操作仅需50次循环，几乎无性能损耗。
2. 遍历大数组a，对每个元素，直接通过映射查找是否存在对应id的b元素，存在则替换，否则保留原元素。

这种方案的时间复杂度是O(n + m)（n为a的长度，m为b的长度），属于线性时间复杂度，性能远超原方案。

代码实现 #

使用Map（推荐，支持任意类型的id）

const mergeArrays = (a, b) => {
  // 将b转换为id到对象的映射
  const bIdMap = new Map(b.map(item => [item.id, item]));
  // 遍历a，替换匹配项
  return a.map(item => bIdMap.get(item.id) || item);
};

使用普通对象（适用于id为数字/字符串的场景）

const mergeArrays = (a, b) => {
  const bIdObj = {};
  // 构建b的id映射
  for (const item of b) {
    bIdObj[item.id] = item;
  }
  // 遍历a完成替换
  return a.map(item => bIdObj[item.id] || item);
};

原方案性能瓶颈说明 #

原代码中a.reduce((acc,cur) => ({...acc, [cur.id]: cur}), {})的问题在于：每次迭代都会创建一个新对象，复制之前所有的键值对。当a有10万条数据时，这个过程会重复10万次，每次复制的键值对数量从1增加到10万，总操作量约为50亿次，这直接导致了耗时过长。

而新方案中，构建b的映射仅需50次操作，遍历a的10万次操作都是O(1)的查找和返回，总操作量仅约10万+50次，性能提升极其明显。

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