JavaScript - 对象属性

JavaScript 对象属性

JavaScript 中的对象属性是一个键值对，其中键是字符串，值可以是任何值。键值对中的键也称为属性名称。因此，属性是键(或名称)与值之间的关联。

换句话说，对象是属性(键值对)的集合。但是，键值对在对象中并非按特定顺序存储。要编写对象语法，请使用花括号。每个键值对都写在花括号内，并用逗号分隔。

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

语法

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

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

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

在对象中，键可以是字符串，也可以是符号。如果您使用其他数据类型作为键，对象会将其隐式转换为字符串。

属性值可以是任何类型，例如对象、集合、数组、字符串、函数等。

访问对象属性

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

使用点符号
使用方括号符号
使用表达式

点符号

您可以使用点符号语法访问对象属性。

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"属性。

当您使用无效标识符作为对象键时，您无法使用点表示法访问属性。因此，您需要使用方括号表示法。如果标识符以数字开头、包含空格或连字符，则该标识符无效。

示例

在下面的示例中，我们访问水果对象的 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
// 或
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;
或
Obj["prop"] = new_value;

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

示例

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

<!DOCTYPE html>
<html>
<body>
	<p id = "output"> </p>
	<script>
		const fruit = {
			name: "Watermealon",
			price: 150,
		}
        fruit.name = "Apple"; // 使用点符号更新
        fruit["price"] = 200; // 使用括号符号更新
        fruit.expiry = "5 days"; // 向对象添加新属性。

		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 运算符从水果对象中删除 name 属性。输出显示，删除 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() 方法返回对象在数组中的键。但是，我们将使用 forin 循环遍历对象的每个属性。

语法

您可以按照以下语法迭代对象属性。

for (let key in table) {
    // 使用键访问其值
}

在上述语法中，"key"是一个对象属性，可用于访问其值。

示例

在下面的示例中，我们创建了包含 3 个属性的表对象。之后，我们使用 forin 循环遍历对象的每个属性并访问其值。

<!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() 方法来更新其他属性。

❮ ❯

JavaScript 基础教程

JavaScript 运算符

JavaScript 控制流

JavaScript 函数