JavaScript - 对象属性

JavaScript 对象属性

JavaScript 中的 object 属性是一个 key： value 对，其中 key 是一个字符串，value 可以是任何东西。key：值对中的 key 也称为 property name。因此，属性是 key （或 name）和 value 之间的关联。

从其他术语来说，对象是属性（key： value pairs）的集合。但是，key：值对不会按特定顺序存储在对象中。要编写对象语法，请使用大括号。每个 key：值对都写在用逗号分隔的大括号内。

您可以在 JavaScript 中操作对象属性。例如，您可以添加、删除或更新对象的属性。

语法

您可以按照以下语法定义对象中的属性。


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

在上面的语法中，fruit 是一个对象。fruit 对象包含 name 和 price 属性。name 属性的值为 'Apple'，价格为 100。

在对象中，键可以是字符串或仅元件。如果使用其他数据类型作为键，则对象会将其隐式转换为字符串。

属性值可以是对象、集合、数组、字符串、集合、函数等任何内容。

访问对象属性

在 JavaScript 中，有 3 种方法可以访问对象属性。

使用点表示法
使用方括号表示法
使用表达式

点表示法

您可以使用 dot notation/ 语法访问 object 属性。


 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” 数学表达式来动态访问 object 属性。


<!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

添加或更新对象属性

您可以使用点或方括号表示法更新对象或向对象添加新属性。您可以访问 object 属性并为其分配新值。如果该属性已存在，则更新该属性值。否则，它会将属性添加到对象中。

语法


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

在上面的语法中，我们更新了 obj 对象的 'prop' 属性的值。

例

在下面的示例中，我们更新了 fruit 对象的 name 和 price 属性。此外，我们还将 expiry 属性添加到 fruit 对象中。


<!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 属性。输出显示 fruit 对象在删除 name 属性后仅包含 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

object 属性

object 属性包含四个属性。

value − 对象的一个值。
enumerable − 包含布尔值，表示对象是否可迭代。
configurable − 包含表示对象是否可配置的布尔值。
writable − 它还包含布尔值，表示对象是否可写。

默认情况下，您无法编辑除 object 属性的 value 属性以外的其他属性。您需要使用 defineProperty（）或 defineProperties（）方法来更新其他属性。

<< JavaScript - 类(Classes) JavaScript - 对象方法 >>