ES6 Spread Operator处理JavaScript对象合并未达预期，求解决方案

你遇到的问题核心在于JavaScript展开运算符（...）的浅合并特性：当合并两个对象时，如果某个键在两个对象中都存在，后面对象的对应值会直接覆盖前面对象的该键值，而不会深入嵌套的对象或数组内部去合并内容。

看你的例子，obj1和obj2都包含WellSchema键，所以执行{ ...obj1, ...obj2 }时，obj2的WellSchema会直接替换掉obj1的WellSchema，自然就看不到obj1里的那两个well项了。

解决方案：手动处理嵌套数组的合并 #

要实现嵌套数组的追加，需要针对性地处理WellSchema下的well数组，这里有两种常用方式：

方式一：手动逐层展开合并（适合简单场景）

直接在合并对象时，显式拼接两个well数组：

const obj1 = { WellSchema: { well: [ {wellName: 'check1', uwi: '9000000123'}, {wellName: 'check2', uwi: '8000012432'} ] } }
const obj2 = { WellSchema: { well: [ {wellName: 'check3', uwi: '2113120002'}, {wellName: 'check4', uwi: '5679001211'}, {wellName: 'check5', uwi: '0987652221'}, {wellName: 'check6', uwi: '5345676542'} ] } }

const mutateIt = {
  ...obj1, // 先保留obj1的所有顶层属性
  WellSchema: {
    ...obj1.WellSchema, // 保留WellSchema里的其他属性（如果有的话）
    well: [...obj1.WellSchema.well, ...obj2.WellSchema.well] // 拼接两个well数组
  }
}

console.log(mutateIt)

这样就能得到你预期的合并结果，well数组会包含来自两个对象的所有项。

方式二：通用深合并函数（适合复杂嵌套场景）

如果你的对象嵌套层级更深，或者需要多次处理类似合并，可以写一个简单的深合并函数，自动处理对象和数组的合并：

function deepMerge(target, source) {
  let merged = { ...target };
  for (const key in source) {
    // 如果是嵌套对象，递归合并
    if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
      merged[key] = deepMerge(merged[key] || {}, source[key]);
    } 
    // 如果是数组，拼接两个数组
    else if (Array.isArray(source[key])) {
      merged[key] = [...(merged[key] || []), ...source[key]];
    } 
    // 普通属性直接覆盖
    else {
      merged[key] = source[key];
    }
  }
  return merged;
}

const mutateIt = deepMerge(obj1, obj2);
console.log(mutateIt);

这个函数会递归遍历对象的所有层级，遇到数组就拼接，遇到嵌套对象就继续合并，通用性更强。

总结 #

展开运算符只负责顶层键值对的合并，嵌套结构需要手动处理或使用深合并逻辑，这样才能实现你想要的数组追加效果。

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