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（） 方法来更新其他属性。

打印本页
上一页
下一页