設置屬性時的Javascript對象設置所有具有相同名稱的屬性

Question

我最近才開始使用 javascript 和 NodeJs。 我面臨一個簡單的問題，我發現很難在網上找到答案。 我正在初始化一個包含許多產品的對象，然后每個產品都有價格和可用性。 當我嘗試設定一種產品的價格時，它設定了所有產品的價格，而不僅僅是我想要設定的價格。 我究竟做錯了什么？

 var ProdStruct = { 'price' : 0, 'available' : 0, }; var Prods = { '1' : ProdStruct, '2' : ProdStruct, '3' : ProdStruct, '4' : ProdStruct, '5' : ProdStruct, '6' : ProdStruct, '6' : ProdStruct, '7' : ProdStruct }; Prods['6']['price'] = 99; console.log(Prods);

輸出：

 { '1': { price: 99, available: 0 }, '2': { price: 99, available: 0 }, '3': { price: 99, available: 0 }, '4': { price: 99, available: 0 }, '5': { price: 99, available: 0 }, '6': { price: 99, available: 0 }, '7': { price: 99, available: 0 } }

Answer 1

您只有一個ProdStruct對象，您提到了七次。 也就是說，你在內存中有這樣的東西：

+−−−−−−−−−−−−−−+
ProdStruct−−−−−−−−−−−−−−+−+−+−+−+−+−+−−>|   (object)   |
                       / / / / / / /    +−−−−−−−−−−−−−−+
                       | | | | | | |    | price: 0     |
                       | | | | | | |    | available: 0 |
                       | | | | | | |    +−−−−−−−−−−−−−−+
         +−−−−−−−−−−+  | | | | | | |
Prods−−−>| (object) |  | | | | | | |
         +−−−−−−−−−−+  | | | | | | |
         | 1        |−−+ | | | | | |
         | 2        |−−−−+ | | | | |
         | 3        |−−−−−−+ | | | |
         | 4        |−−−−−−−−+ | | |
         | 5        |−−−−−−−−−−+ | |
         | 6        |−−−−−−−−−−−−+ |
         | 7        |−−−−−−−−−−−−−−+
         +−−−−−−−−−−+

修改那個對象的狀態（改變price ）會修改它的狀態； 無論您使用七個引用中的哪一個來進行更改或查看結果，它都只是一個對象。

您需要制作對象的副本以獲得您期望的結果。 一種方法是使用Object.assign ：

 var ProdStruct = { 'price' : 0, 'available' : 0, }; var Prods = { '1' : Object.assign({}, ProdStruct), '2' : Object.assign({}, ProdStruct), '3' : Object.assign({}, ProdStruct), '4' : Object.assign({}, ProdStruct), '5' : Object.assign({}, ProdStruct), '6' : Object.assign({}, ProdStruct), '6' : Object.assign({}, ProdStruct), '7' : Object.assign({}, ProdStruct) }; Prods['6']['price'] = 99; console.log(Prods);

 .as-console-wrapper { max-height: 100% !important; }

...但我認為在你的情況下，我可能只有一個構造函數：

 function Prod() { this.price = 0; this.available = 0; } var Prods = { '1' : new Prod(), '2' : new Prod(), '3' : new Prod(), '4' : new Prod(), '5' : new Prod(), '6' : new Prod(), '6' : new Prod(), '7' : new Prod() }; Prods['6']['price'] = 99; console.log(Prods);

 .as-console-wrapper { max-height: 100% !important; }

正如Rick 在評論中提到的，您可以讓該構造函數接受參數：

function Prod(price, available) {
  this.price = price || 0;
  this.available = available || 0;
}

在這方面，如果您不提供price或available ，它將具有值undefined ，並且該代碼使用常見的慣用語something || default something || default使用0而不是undefined ，利用我所謂的奇怪強大的|| 運營商。 （當something為假* 值有效時，請注意這樣做。）

在 ES2015 及更高版本中，您可以在參數列表中使用這些默認值：

function Prod(price = 0, available = 0) {
  this.price = price;
  this.available = available;
}

如果您不為這些參數提供參數（或者如果您明確為它們提供undefined ），則將應用默認值。

* "falsy" - 在 JavaScript 中，當用作布爾值時強制為false的值是falsy 。 假值是0 、 "" 、 null 、 undefined 、 NaN ，當然還有false 。 所有其他值都是真實的。

---

幾個旁注：

1. 在 JavaScript 中，壓倒性的約定是只對構造函數使用初始加蓋的名稱，而不是用於引用其他事物的變量。 所以prodStruct和prods 。

2. 像您的Prods這樣的一系列東西作為數組 ( [] ) 可能會更好，而不是具有以數字命名的屬性的對象。

3. 僅當名稱不是有效標識符或有效整數時，才需要對象初始值設定項中的屬性名稱周圍的引號。 您的所有屬性名稱都是如此，因此您可以不使用它們。

4. 盡管Prods['6']['price']有效，但它更簡單，更符合地道的編寫prods[6].price 。