如何用JavaScript高效合并两个对象数组？现有代码遇问题求优化

嗨，我一眼就看出你之前的问题啦——不仅嵌套循环冗余，更关键的是匹配逻辑错了：你之前拿外层itemA.name（也就是'1'）去和itemB.name（'1-1'、'1-2'）对比，根本匹配不上，所以itemA.B = itemB.B这行代码从来没执行过，自然看不到效果。

想要高效完成这个层级合并，核心思路是先把第二个数组做成“键值映射”，这样查找对应项的时间复杂度直接降到O(1)，不需要反复遍历整个数组。下面给你两种实现方式：

原生JavaScript实现 #

// 第一步：将secondArray转换成以name为键的Map，快速查找对应的B数组
const secondArrayMap = new Map(secondArray.map(item => [item.name, item.B]))

// 第二步：遍历firstArray，给每个A数组的子项匹配对应的B数组
const mergedArray = firstArray.map(itemA => ({
  // 复制原itemA的所有属性
  ...itemA,
  // 处理A数组的每个子元素
  A: itemA.A.map(subItemA => ({
    ...subItemA,
    // 从Map中取出对应的B数组，找不到就给空数组兜底
    B: secondArrayMap.get(subItemA.name) || []
  }))
}))

Lodash简化实现 #

如果你习惯用Lodash，可以用_.keyBy快速生成映射对象：

// 生成以name为键的对象映射
const secondArrayObj = _.keyBy(secondArray, 'name')

const mergedArray = _.map(firstArray, itemA => ({
  ...itemA,
  A: _.map(itemA.A, subItemA => ({
    ...subItemA,
    // 用_.get安全获取B数组，避免找不到时出现undefined
    B: _.get(secondArrayObj, `${subItemA.name}.B`, [])
  }))
}))

为什么这个方法更好？ #

• 时间复杂度从嵌套循环的O(n*m) 降到了O(n+m)（n是firstArray的总元素数，m是secondArray的元素数），数据量越大，效率提升越明显。
• 逻辑更清晰，避免了多层嵌套循环的“回调地狱”，可读性更强。

执行完上面的代码，你就能得到完全符合预期的合并结果啦：

[{ 
  A: [
    { name: '1-1', B: [{ name: '1-1-1' }, { name: '1-1-2' }] },
    { name: '1-2', B: [{ name: '1-2-1' }, { name: '1-2-2' }] }
  ], 
  name: '1' 
}]

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