如何将两个数组对应位置的对象合并后生成新数组

实现思路 #

• 取两个数组的最大长度作为结果数组的长度，确保长数组超出短数组的元素可以完整保留
• 遍历每个索引位置，将两个数组对应索引的对象合并，无值的位置默认用空对象占位避免运行报错
• 合并时若存在同名属性，后序传入的对象属性会覆盖前序的，可按需调整合并顺序

最简实现（ES6+） #

const mergeArrays = (arr1, arr2) => 
  Array.from({ length: Math.max(arr1.length, arr2.length) }, (_, i) => ({
    ...(arr1[i] || {}),
    ...(arr2[i] || {})
  }))

提示：如果两个数组同索引对象存在同名属性，现有写法会优先保留第二个数组的属性值，想要调整优先级只要交换两个对象的展开顺序即可。

测试验证 #

// 示例数据
const a = [{a:1, b:2, c:3}, {d:1, e:4, f:2}]
const b = [{m:1, n:2, o:4}, {r:1,s:3,u:5}, {k:1,j:4,f:8}]

const z = mergeArrays(a, b)
// 输出结果和要求的目标数组完全一致：
// [{a:1, b:2, c:3, m:1, n:2, o:4}, {d:1, e:4, f:2, r:1,s:3,u:5}, {k:1,j:4,f:8}]

兼容旧环境写法（不支持展开运算符） #

const mergeArrays = function(arr1, arr2) {
  var maxLen = Math.max(arr1.length, arr2.length)
  var result = []
  for (var i = 0; i < maxLen; i++) {
    result.push(Object.assign({}, arr1[i] || {}, arr2[i] || {}))
  }
  return result
}

内容的提问来源于stack exchange，提问作者Lutaaya Huzaifah Idris