Question

我想在新对象中合并两个对象，第一个对象是google图表的默认选项：

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中的属性完全覆盖了新属性，我的aproach出了什么问题？

Answer 1

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

属性会被具有相同属性的其他对象覆盖属性稍后在参数顺序中。

让我们看一下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);

Answer 2

如果嵌套不深，您可以通过以下两个步骤中断合并过程：

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);

这有帮助吗？

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

2 个答案: