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

打印页面
上一页
下一页
广告