合并对象时，使用Object.assign覆盖内部对象而不进行合并。

Question

我有两个对象，想要将它们合并成一个新对象。第一个对象是谷歌图表的默认选项：

optionsA = {
    height: 500,
    focusTarget: 'category',
    hAxis: {
      showTextEvery: 0,
      slantedText: true,
      slantedTextAngle: 45,
      format: 'date',
    },
}

我的第二个目标是向hAxis添加一些属性，并使用新值覆盖现有选项，但我希望保留默认选项中的 optionsA 选项。

这是我的第二个对象：

optionsA = {
    isStacked: true,
    hAxis: {
      gridlines: {
        count: 10
      },
      format: 'percent',
    },
}

这些对象比较复杂，但我简化了属性以简化问题

当我尝试使用object.assign合并时，结果是B对象将新的根属性添加到新对象中，但在hAxis中的属性被optionsB中的选项完全覆盖。

let newObj = Object.assign({}, optionsA, optionsB);

这是我期望的对象：

{
    height: 500,
    focusTarget: 'category',    
    isStacked: true,
    hAxis: {
      gridlines: {
         count: 10
      },
      format: 'percent',
      showTextEvery: 0,
      slantedText: true,
      slantedTextAngle: 45,
    },
}

但是我得到的不是这个，而是这个：

{
    height: 500,
    focusTarget: 'category',    
    isStacked: true,
    hAxis: {
       gridlines: {
         count: 10
       },
       format: 'percent',
    },
}

中的属性会被新属性完全覆盖，我的做法有什么问题吗？

- xzegga

---

Object.assign() 只操作源对象的顶层属性。它不会“深入”到子对象中。 - undefined

请参考这个链接：https://dev59.com/p14c5IYBdhLWcg3wa52M - undefined

Object.assign({}, optionsA, optionsB, {hAxis: Object.assign({}, optionsA.hAxis, optionsB.hAxis)}) 应该可以完成任务。 - undefined

Answer 1

如果嵌套不是很深，您可以按以下方式将合并过程分为两个步骤：

optionsA = {
    height: 500,
    focusTarget: 'category',
    hAxis: {
      showTextEvery: 0,
      slantedText: true,
      slantedTextAngle: 45,
      format: 'date',
    }
};

optionsB = {
    isStacked: true,
    hAxis: {
      gridlines: {
        count: 10
      },
      format: 'percent',
    }
};

let newNestedMerged = Object.assign({},optionsA.hAxis, optionsB.hAxis);
optionsA.hAxis = newNestedMerged;
optionsB.hAxis = newNestedMerged;
let newObj =  Object.assign(optionsA, optionsB);
console.log(newObj);

这有帮助吗？

- Pankaj Shukla

Answer 2

因为两个对象具有相同的属性。

后面参数中具有相同属性的其他对象会覆盖前面的对象。

看看 MDN 中 assign 的示例。

我的建议是先合并相同的属性。

optionsA = {
    height: 500,
    focusTarget: 'category',
    hAxis: {
      showTextEvery: 0,
      slantedText: true,
      slantedTextAngle: 45,
      format: 'date',
    },
}
optionsB = {
    isStacked: true,
    hAxis: {
      gridlines: {
        count: 10
      },
      format: 'percent',
    },
}
Object.assign(optionsA.hAxis, optionsB.hAxis);
let newObj = Object.assign({}, optionsB, optionsA);
console.log(newObj);

- taile

---

好的方法，但对我来说不起作用。这只是一个对象的简单示例，实际上有很多属性需要合并。 - undefined

是的，我认为这里就是你要找的东西。希望对你有所帮助 :) https://dev59.com/MHVC5IYBdhLWcg3w1E1q#383245 - undefined

谢谢 @tai-le，你救了我的一天！ - undefined

很酷 :) 很高兴知道。如果对你有帮助的话，我们就接受它吧 :) - undefined

抱歉，@tai-le，但是实际上你在评论中提供的答案对我有帮助。Object.assign只能合并根属性，这对我来说行不通。 - undefined