JavaScript - 物件屬性

上一個
下一個

JavaScript 物件屬性

在 JavaScript 中，物件屬性是鍵值對，其中鍵是字串，值可以是任何內容。鍵值對中的鍵也稱為屬性名。因此，屬性是鍵（或名稱）和值之間的關聯。

換句話說，物件是屬性（鍵值對）的集合。但是，鍵值對在物件中不是按特定順序儲存的。要編寫物件語法，使用花括號。每個鍵值對都寫在花括號內，用逗號分隔。

您可以操作 JavaScript 中的物件屬性。例如，您可以新增、刪除或更新物件的屬性。

語法

您可以按照以下語法在物件中定義屬性。

const fruit = {
    name: "Apple",
    price: 100,
}

在以上語法中，fruit 是一個物件。fruit 物件包含 name 和 price 屬性。name 屬性的值為 'Apple'，價格為 100。

在物件中，鍵只能是字串或符號。如果使用其他資料型別作為鍵，則物件會將其隱式轉換為字串。

屬性值可以是任何內容，例如物件、集合、陣列、字串、集合、函式等。

訪問物件屬性

有三種方法可以訪問 JavaScript 中的物件屬性。

  • 使用點表示法

  • 使用方括號表示法

  • 使用表示式

點表示法

您可以使用點表示法/語法訪問物件屬性。

obj.prop;

在以上語法中，'obj' 是一個物件，'prop' 是其需要訪問值的屬性。

示例

下面示例中的 'fruit' 物件包含 name 和 price 屬性。我們使用點表示法訪問物件屬性，您可以在輸出中看到屬性值。

<!DOCTYPE html>
<html>
<body>
	<p id = "output"> </p>
	<script>
		const fruit = {
			name: "Banana",
			price: 20,
		}
		document.getElementById("output").innerHTML = 
		"The price of the " + fruit.name + " is " + fruit.price;
	</script>
</body>
</html>

輸出

The price of the Banana is 20

方括號表示法

您可以使用包含屬性作為字串的方括號，後跟物件名稱來訪問特定屬性。

obj["prop"]

在以上語法中，我們從物件中訪問 'prop' 屬性。

當您使用無效識別符號作為物件鍵時，無法使用點表示法訪問該屬性。因此，您需要使用方括號表示法。如果識別符號以數字開頭、包含空格或連字元，則該識別符號無效。

示例

在下面的示例中，我們訪問 fruit 物件的 name 和 price 屬性值。

<!DOCTYPE html>
<html>
<body>
	<p id = "output"> </p>
	<script>
		const fruit = {
			name: "Banana",
			price: 20,
		}
		document.getElementById("output").innerHTML = 
      "The price of the " + fruit["name"] + " is " + fruit["price"];
	</script>
</body>
</html>

輸出

The price of the Banana is 20

在括號內使用表示式

有時，您需要使用變數或表示式動態訪問物件屬性。因此，您可以在方括號表示法內編寫表示式。表示式可以是變數、數學表示式等。

obj[expression]

以上語法首先計算表示式，然後從物件中訪問與表示式結果值相同的屬性。您不需要用引號括起表示式。

示例

在下面的示例中，num 物件包含以字串格式作為鍵的數字及其文字表示形式作為值。

我們使用變數 x 從物件中訪問屬性值。此外，我們使用“x + 10”數學表示式動態訪問物件屬性。

<!DOCTYPE html>
<html>
<body>
	<p id = "output"> </p>
	<script>
		const num = {
			10: "ten",
			20: "Twenty",
		}
		const x = 10;
		document.getElementById("output").innerHTML =  num[x + 10];
  </script>
</body>
</html>

輸出

Twenty

訪問巢狀物件屬性

訪問巢狀物件屬性與訪問物件屬性非常相似。您可以使用點或方括號表示法。

語法

Obj.prop.nestedProp
// OR
Obj["prop"]["nestedProp"];

在以上語法中，prop 是 obj 物件的屬性，nestedProp 是 'prop' 物件的屬性。

示例

在下面的程式碼中，'cars' 物件包含名為 OD 和 BMW 的巢狀物件。我們使用點和方括號表示法訪問巢狀物件屬性。

<!DOCTYPE html>
<html>
<body>
	<p id = "output1"> </p>
	<p id = "output2"> </p>
	<script>
		const cars = {
			totalBrands: 50,
			audi: {
				model: "Q7",
				price: 10000000,
			},
			bmw: {
				model: "S20D",
				price: 8000000,
			}
		}
		document.getElementById("output1").innerHTML = 
		"The model of Audi is " + cars.audi.model + 
		" and its price is " + cars.audi.price;

		document.getElementById("output2").innerHTML = 
		"The model of BMW is " + cars["bmw"]["model"] + 
		" and its price is " + cars["bmw"]["price"];
	</script>
</body>
</html>

輸出

The model of Audi is Q7 and its price is 10000000

The model of BMW is S20D and its price is 8000000

新增或更新物件屬性

您可以使用點或方括號表示法更新或向物件新增新屬性。您可以訪問物件屬性併為其分配新值。如果屬性已存在，則更新屬性值。否則，它會將屬性新增到物件中。

語法

Obj.prop = new_value;
OR
Obj["prop"] = new_value;

在以上語法中，我們更新 obj 物件的 'prop' 屬性的值。

示例

在下面的示例中，我們更新 fruit 物件的 name 和 price 屬性。此外，我們向 fruit 物件添加了 expiry 屬性。

<!DOCTYPE html>
<html>
<body>
	<p id = "output"> </p>
	<script>
		const fruit = {
			name: "Watermealon",
			price: 150,
		}
		fruit.name = "Apple"; // Updating using the dot notation
		fruit["price"] = 200; // Updating using the bracket notation
		fruit.expiry = "5 days"; // Adding new property to the object.

		document.getElementById("output").innerHTML += 
		"The price of " + fruit.name + 
		" is " + fruit.price + 
		" and it expires in " + fruit.expiry;
    
	</script>
</body>
</html>

輸出

The price of Apple is 200 and it expires in 5 days

刪除物件屬性

您可以使用“delete”運算子刪除特定的物件屬性。

語法

delete obj.prop;

在上述語法中，obj.prop 是 delete 運算子的運算元。

示例

在下面的示例中，我們使用 delete 運算子從 fruit 物件中刪除 name 屬性。輸出顯示，刪除 name 屬性後，fruit 物件僅包含 price 屬性。

<!DOCTYPE html>
<html>
<body>
	<p> The object after deleting the "name" property: </p>
	<p id = "output"> </p>
	<script>
		const fruit = {
			name: "Watermealon",
			price: 150,
		}
		delete fruit.name;
		document.getElementById("output").innerHTML = JSON.stringify(fruit);
	</script>
</body>
</html>

輸出

The object after deleting the "name" property:

{"price":150}

列舉物件屬性

列舉物件屬性有多種方法。Object.keys() 方法會將物件的鍵以陣列的形式返回。但是，我們將使用 for…in 迴圈遍歷物件的每個屬性。

語法

您可以按照以下語法迭代物件屬性。

for (let key in table) {
   // Use the key to access its value
}

在上述語法中，“key”是物件屬性，可用於訪問其值。

示例

在下面的示例中，我們建立了一個包含 3 個屬性的 table 物件。之後，我們使用 for…in 迴圈遍歷物件的每個屬性並訪問其值。

<!DOCTYPE html>
<html>
<body>
	<p> Iterating the obejct properties</p>
	<p id = "output"> </p>
	<script>
  
		const table = {
			color: "brown",
			shape: "round",
			price: 10000,
		}

		for (let key in table) {
			document.getElementById("output").innerHTML += key + ": " + table[key] + "<br>";
		}
	</script>
</body>
</html>

輸出

Iterating the obejct properties

color: brown
shape: round
price: 10000

屬性特性

物件屬性包含四個特性。

  • value − 物件的值。

  • enumerable − 包含布林值，表示物件是否可列舉。

  • configurable − 包含布林值，表示物件是否可配置。

  • writable − 它也包含布林值，表示物件是否可寫。

預設情況下，除了物件的 value 特性之外，您無法編輯其他特性。您需要使用 defineProperty() 或 defineProperties() 方法來更新其他特性。

列印頁面
上一頁
下一頁
廣告