更新对象项的语法差异

Question

有什么区别：

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

和

cartItem.amount = newAmount

Answer 1

第一个是对cartItem的赋值，而第二个是持有对象的突变 12=].

首先创建一个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!