如何通过指定属性合并两个JavaScript对象数组

原有代码存在的问题 #

• 循环边界错误：数组下标范围是0 ~ 数组长度-1，你用i <= array1.length、j <= array2.length作为循环判断条件，会访问到数组外的undefined元素，直接触发运行报错。
• 嵌套循环逻辑错误：内层循环只要没匹配到id就立即push新元素，会导致同一个array1的元素被重复插入多次，结果数组长度远超预期。
• 取值逻辑错误：sub属性错误的从没有sub字段的array1中取值，没有用到array2里的sub数据，也没有对不存在sub的情况设置为空对象。
• 循环变量自增逻辑错误：只有匹配到id的时候才会对i自增，当array1的元素在array2中不存在匹配项时，i永远不会自增，代码会陷入死循环。

正确实现方式 #

推荐先把array2转换为以id为键的映射表，不需要嵌套循环，时间复杂度更低：

// 先将array2转为id为key的映射，方便快速查找
const array2Map = new Map(array2.map(item => [item.id, item]));
// 遍历array1拼接结果
const newarray = array1.map(item => {
  const matchItem = array2Map.get(item.id);
  return {
    ...item,
    // 匹配到就用array2的sub，否则用空对象
    sub: matchItem ? matchItem.sub : {}
  }
});

如果需要使用嵌套循环的写法，调整逻辑如下：

var newarray = [];
for(var i = 0; i < array1.length; i++) {
  var current = array1[i];
  var sub = {};
  for(var j = 0; j < array2.length; j++) {
    if(array2[j].id === current.id) {
      sub = array2[j].sub;
      break;
    }
  }
  newarray.push({
    id: current.id,
    name: current.name,
    sub: sub
  })
}

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