Блог

Главная - Вопросы по программированию - Разница в синтаксисе обновления элемента объекта

Разница в синтаксисе обновления элемента объекта

#javascript #object #syntax

Вопрос:

В чем разница между:

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

и

 cartItem.amount = newAmount

Комментарии:

1. Я не думаю, что они есть. Но второе было бы более нормальным, если вы хотите обновить amount свойство

2. Ну, есть разница: с первым вы создаете новый объект, со вторым вы обновляете существующий объект

Ответ №1:

Первое-это присвоение cartItem , в то время как второе-мутация объекта, которым он владеет cartItem .

Первый создает новый объект. Предыдущее значение 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!

Комментарии:

1. Спасибо за такой хорошо объясненный и полный ответ. Очень признателен.

Метки: