如何合并两个JavaScript对象使数值相加而非覆盖，可否用展开语法实现

问题答复 #

你提出的需求无法直接通过原生展开语法实现。展开语法的设计逻辑就是后传入对象的同名属性会直接覆盖前面对象的对应属性，没有内置的自定义合并规则（比如数值相加）的配置项。

自定义实现方案 #

你可以手写一个合并函数来满足需求，示例代码如下：

function mergeObjects(objA, objB) {
  // 收集两个对象的所有键
  const allKeys = new Set([...Object.keys(objA), ...Object.keys(objB)])
  const mergedResult = {}

  for (const key of allKeys) {
    const valA = objA[key]
    const valB = objB[key]
    // 两个值均为数值类型时执行相加逻辑
    if (typeof valA === 'number' && typeof valB === 'number') {
      mergedResult[key] = valA + valB
    } else {
      // 非数值场景遵循默认展开逻辑，优先取后面对象的属性值
      mergedResult[key] = valB ?? valA
    }
  }
  return mergedResult
}

// 测试效果
let obj1 = { title: 'Number', num: 1 }
let obj2 = { title: 'Number', num: 2 }
let merge = mergeObjects(obj1, obj2)
// 输出结果：{ title: 'Number', num: 3 }

如果需要支持合并多个对象，可以使用扩展版本：

function mergeMultiObjects(...objectList) {
  return objectList.reduce((prevObj, currObj) => {
    const allKeys = new Set([...Object.keys(prevObj), ...Object.keys(currObj)])
    const merged = {}
    for (const key of allKeys) {
      const valPrev = prevObj[key]
      const valCurr = currObj[key]
      if (typeof valPrev === 'number' && typeof valCurr === 'number') {
        merged[key] = valPrev + valCurr
      } else {
        merged[key] = valCurr ?? valPrev
      }
    }
    return merged
  }, {})
}

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