我的對象散布運算符用法有什么問題？

Question

var color3 = {
    name: 'Black',
    type: 'special',
    rating: 1
};

var rateColor3 = (colorName, Nrating) => ({ ...colorName, Nrating });
console.log(color3.rating); ///// 1
console.log(rateColor3(color3, 6).rating);//////1
console.log(color3.rating);//////1

我想在保持color3不可變的同時使用對象散布運算符，但是第二個console.log的輸出是1而不是6，我在做什么錯？

Answer 1

您正在為對象的鍵NRating分配值6 ，而不是現有的rating 。

因此，您的對象將如下所示：

{
    name: 'Black',
    type: 'special',
    rating: 1,
    Nrating: 6
}

要覆蓋現有的rating屬性，您必須執行以下操作：

var rateColor3 = (colorName, Nrating) => ({ ...colorName, rating: Nrating });

或將參數Nrating更改為rating 。

 var color3 = { name: 'Black', type: 'special', rating: 1 }; var rateColor3 = (colorName, rating) => ({ ...colorName, rating }); console.log(rateColor3(color3, 6)); 

Answer 2

首先，您不是在改變原始的color3對象，而是返回一個新的對象。 其次：

({ ...colorName, Nrating });

將返回帶有第四個道具Nrating: 6的新對象，因為它是對象分配的簡寫。 您只需要簡單地將值分配給rating鍵即可。

 var color3 = { name: 'Black', type: 'special', rating: 1 }; var rateColor3 = (colorName, Nrating) => ({ ...colorName, rating: Nrating }); console.log(rateColor3(color3, 6)); 

Answer 3

Nrating需要一個屬性名稱

var color3 = {
   name: 'Black',
   type: 'special',
   rating: 1
};

var rateColor3 = (colorName, Nrating) => ({ ...colorName, rating: Nrating });
console.log(color3.rating); ///// 1
console.log(rateColor3(color3, 6).rating);//////6
console.log(color3.rating);//////1

Answer 4

您已經創建了一個新屬性Nrating 。 將您的rating更改為Nrating 。

 var color3 = { name: 'Black', type: 'special', rating: 1 }; var rateColor3 = (colorName, Nrating) => ({ ...colorName, Nrating }); console.log(color3.rating); ///// 1 console.log(rateColor3(color3, 6).Nrating);//////6 console.log(color3.rating);//////1