Javascript 简明教程

JavaScript - Object Properties

JavaScript Object Properties

JavaScript 中的 object property 是键：值对，其中键是一个字符串，而值可以是任何东西。键：值对中的键也称为属性名称。所以 properties 是键（或名称）和值之间的关联。

An object property in JavaScript is a key: value pair, where key is a string and value can be anything. The key in key: value pair is also called property name. So the properties are association between key (or name) and value.

换句话说，对象是 property（键：值对）的集合。不过，键：值对不会以特定顺序存储在对象中。要编写对象语法，请使用花括号。每个键：值对写在一对花括号内，用逗号分隔。

An object is in other terms a collection of properties (key: value pairs). However, key: value pairs are not stored in the specific order in the object. To write an object syntax, the curly braces are used. Each key: value pair is written within curly braces separated by a comma.

你可以在 JavaScript 中操纵对象 property。例如，你可以添加、删除或更新对象 property。

You can manipulate the object properties in JavaScript. For example, you can add, delete, or update the object’s properties.

Syntax

你可以按照以下语法在对象中定义 property。

You can follow the syntax below to define properties in the object.

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

在上面的语法中，fruit 是一个对象。fruit 对象包含 name 和 price property。name property 的值是 'Apple’，而 price 是 100。

In the above syntax, fruit is an object. The fruit object contains the name and price properties. The value of the name property is 'Apple’, and the price is 100.

它的属性值可以为对象、集合、阵列、字符串、集合、字符串、集合、函数等任何类型。

The property value can be anything like an object, set, array, string, set, function, etc.

Accessing Object Properties

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

There are 3 ways to access object properties in JavaScript.

Using the dot notation
Using the square bracket notation
Using the expression

The Dot Notation

你可以使用点表示法/语法访问对象属性。

You can access the object property using the dot notation/ syntax.

obj.prop;

在上面的语法中，“obj”是对象，“prop”是需要访问其值的属性。

In the above syntax, 'obj' is an object, and 'prop' is its property whose value you need to access.

下面的示例中的“fruit”对象包含name 和 price 属性。我们将使用点表示法访问对象属性，并且可以在输出中看到属性值。

The 'fruit' object in the example below contains the name and price property. We access the object properties using the dot notation, and you can see property values in the output.

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

The Square Bracket Notation

使用方括号对（其中包含属性作为字符串）加对象名称，可以访问特定的属性。

You can use the square bracket pair containing the property as a string followed by the object name to access a particular property.

obj["prop"]

在上面的语法中，我们从对象访问“prop”属性。

In the above syntax, we access the 'prop' property from the object.

在下面的示例中，我们访问水果对象的 name 和 price 属性值。

In the example below, we access the fruit object’s name and price property values.

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

Using the expression inside the bracket

有时，你需要使用变量或表达式动态访问对象属性。因此，你可以在方括号表示法中编写表达式。该表达式可以是变量、数学表达式等。

Sometimes, you require to access the object properties dynamically using the variable or expression. So, you can write the expression inside the square bracket notation. The expression can be a variable, a mathematical expression, etc.

obj[expression]

上面的语法将先计算表达式，并访问对象中结果的值作为属性。无需用引号写表达式。

The above syntax evaluates the expression first and accesses the property same as a resultant value from the object. You don’t need to write the expression in quotes.

在下面的示例中，num 对象包含数字作为字符串格式的键，并且包含单词表示作为值。

In the example below, the num object contains the number as a key in the string format and its word representation as a value.

我们使用变量 x 从对象访问属性值。此外，我们使用数学表达式“x + 10”动态访问对象属性。

We use the variable x to access the property value from the object. Also, we used the "x + 10" mathematical expression to access the object property dynamically.

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

Accessing the Nested Object Properties

访问嵌套对象属性的方式与访问对象属性非常相似。你可以使用点或者方括号表示法。

Accessing the nested object properties is very similar to accessing the object properties. You can either use the dot or square bracket notation.

Syntax

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

在上面的语法中，prop 是 obj 对象的属性，而 nestedProp 是“prop”对象的属性。

In the above syntax, the prop is a property of the obj object, and nestedProp is a property of the 'prop' object.

Example

在下面的代码中，“cars”对象包含名为 OD 和 BMW 的嵌套对象。我们使用点和方括号表示法访问嵌套对象属性。

In the below code, the 'cars' object contains the nested objects named OD and BMW. We access the nested object properties using the dot and square bracket notation.

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

Adding or Updating the Object Properties

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

You can update or add new properties to the object using the dot or square bracket notation. You can access the object property and assign a new value to it. If the property already exists, it updates the property value. Otherwise, it adds the property to the object.

Syntax

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

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

In the above syntax, we update the value of the 'prop' property of the obj object.

Example

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

In the example below, we update the name and price property of the fruit object. Also, we add the expiry property to the fruit object.

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

Deleting the Object Properties

您可以使用“delete”运算符来删除特定的对象属性。

You can use the 'delete' operator to delete the specific object properties.

Syntax

delete obj.prop;

在上面的语法中，obj.prop 是 delete 运算符的运算符。

In the above syntax, obj.prop is an operator for the delete operator.

Example

在下面的示例中，我们使用 delete 运算符从 fruit 对象中删除 name 属性。输出显示 fruit 对象在删除 name 属性后仅包含 price 属性。

In the example below, we delete the name property from the fruit object using the delete operator. The output shows that the fruit object contains only the price property after deleting the name property.

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

Enumerating the Object Properties

有各种方法来枚举对象属性。 Object.keys() 方法在数组中返回对象’的键。但是，我们将使用 for…in 循环遍历对象的每个属性。

There are various approaches to enumerating the object properties. The Object.keys() method returns the object’s keys in the array. However, we will use the for…in loop to traverse through each property of the object.

Syntax

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

You can follow the syntax below to iterate through the object properties.

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

在上面的语法中，“key”是对象属性，可用于访问其值。

In the above syntax, 'key' is an object property, which can be used to access its value.

Example

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

In the example below, we have created the table object containing 3 properties. After that, we used the for…in loop to traverse through each property of the object and access its value.

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

Property Attributes

对象属性包含四个特性。

The object property contains four attributes.

value − A value of the object.
enumerable − Contains boolean value representing whether the object is iterable.
configurable − Contains the boolean value representing whether the object is configurable.
writable − It also contains the boolean value, representing whether the object is writable.

默认情况下，您除了对象的 value 属性外，不能编辑其他属性。您需要使用 defineProperty() 或 defineProperties() 方法来更新其他属性。

By default, you can’t edit other attributes except the value attribute of the object property. You need to use the defineProperty() or defineProperties() methods to update other attributes.