javascript - Sloučit objekt s Object.assign přepsat vnitřní objekt bez sloučení

Mám dva objekty, které chci sloučit do nového objektu, první objekt je pro výchozí možnosti pro graf Google:

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

Se svým druhým objektem chci přidat některé vlastnosti do hAxis a přepsat současné možnosti novými hodnotami, ale chci zachovat výchozí možnosti v optionsA.

Toto je můj druhý objekt:

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

Tyto objekty jsou složitější, ale vlastnosti zjednodušuji, aby byla otázka jednodušší

Když se pokusím sloučit pomocí object.assign, výsledkem je, že objekt B přidá nové hlavní vlastnosti do nového objektu, ale vlastnosti v hAxis jsou úplně přepsány možnostmi v optionsB.

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

Toto je objekt, který očekávám:

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

ale místo toho dostávám toto:

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

Vlastnosti v hAxis jsou zcela přepsány novými vlastnostmi, co je špatně s mým přístupem?

Odpověď č. 1

Pokud není vnoření hluboké, můžete proces sloučení rozdělit do dvou kroků následujícím způsobem:

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

Pomáhá to?

Odpověď č. 2

Protože máte stejnou vlastnost v obou objektech.

Vlastnosti jsou přepsány jinými objekty, které mají stejné vlastnosti později v pořadí parametrů.

Podívejme se na příklad použití assign na MDN.

Můj návrh je nejprve sloučit stejné vlastnosti.

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