更新对象项的语法差异答案

【问题标题】：The difference in syntax for updating an object item更新对象项的语法差异
【发布时间】：2021-08-20 21:14:35
【问题描述】：

有什么区别：

 cartItem = {...cartItem, amount: newAmount}

和

cartItem.amount = newAmount

【问题讨论】：

我认为没有。但是如果你想更新 amount 属性，第二个会更正常
有一点不同：第一个创建一个新对象，第二个更新现有对象

标签： javascript object syntax

【解决方案1】：

第一个是对cartItem 的赋值，而第二个是cartItem 持有的对象的变异。

第一个创建一个 new 对象。 cartItem 的先前值引用了一个仍然可以被另一个引用引用的对象。演示：

let newAmount = 13;
let cartItem = { name: "cart", amount: 42 };
let myRef = cartItem;
cartItem = {...cartItem, amount: newAmount};
console.log(myRef); // still the old object

// Let's do this again, with the other technique
cartItem = { name: "cart" };
myRef = cartItem;
cartItem.amount = newAmount;
console.log(myRef); // the mutated object

因此，当您对原始对象有另一个引用时，差异可能会很明显。

这个其他引用，可能是函数调用者的变量：

function assignment(cartItem, newAmount) {
    cartItem =  {...cartItem, amount: newAmount};
}

function mutation(cartItem, newAmount) {
    cartItem.amount =  newAmount;
}

// scenario 1
let cartItem = { name: "cart", amount: 42 };
assignment(cartItem, 13);
console.log(cartItem); // Has not changed -- "old" object

// scenario 2
mutation(cartItem, 13);
console.log(cartItem); // Has changed -- "old" object has mutated!

【讨论】：

感谢您提供如此详尽的解释和完整的答案。非常感谢。