合并对象与 Object.assign 覆盖内部对象而不合并 [重复]

Posted

技术标签:

【中文标题】合并对象与 Object.assign 覆盖内部对象而不合并 [重复]【英文标题】:Merge object with Object.assign override internal object without merge [duplicate] 【发布时间】:2017-09-22 17:01:39 【问题描述】:

我有两个对象要合并到一个新对象中,第一个对象是谷歌图表的默认选项:

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',
    ,

hAxis 中的属性完全被新属性覆盖,我的方法有什么问题?

【问题讨论】:

Object.assign() 仅对源对象的***属性进行操作。它不会“下降”到子对象中。 参考这个-***.com/questions/27936772/… Object.assign(, optionsA, optionsB, hAxis: Object.assign(, optionsA.hAxis, optionsB.hAxis)) 应该这样做 【参考方案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);

这有帮助吗?

【讨论】:

【参考方案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);

【讨论】:

好方法但对我不起作用,这是一个简单的对象示例,实际上我需要合并很多属性。 是的,我想这就是您要找的东西。希望有帮助:) ***.com/a/383245/4886453 感谢@tai-le 你救了我的一天! 酷 :) 很高兴知道。如果对你有帮助。让我们接受它:) 对不起@tai-le,但您评论中的答案实际上对我有帮助。 Object .assign 仅合并根属性,这对我不起作用

以上是关于合并对象与 Object.assign 覆盖内部对象而不合并 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

Object.assign() ,合并/覆盖键,复制数组的值以创建对象

Object.assign 合并多个对象的属性,如果是对象有同名属性,则后面对象的属性值覆盖前面的。

Object.assign()合并对象

Object.assign()方法

object.assign和直接赋值的区别

es6新语法Object.assign()