Javascript 简明教程
JavaScript - Object Properties
JavaScript Object Properties
JavaScript 中的 object property 是键：值对，其中键是一个字符串，而值可以是任何东西。键：值对中的键也称为属性名称。所以 properties 是键（或名称）和值之间的关联。
换句话说，对象是 property（键：值对）的集合。不过，键：值对不会以特定顺序存储在对象中。要编写对象语法，请使用花括号。每个键：值对写在一对花括号内，用逗号分隔。
你可以在 JavaScript 中操纵对象 property。例如，你可以添加、删除或更新对象 property。
Accessing Object Properties
在 JavaScript 中有 3 种方法可以访问对象属性。
-
Using the dot notation
-
使用方括号表示法
-
Using the expression
The Dot Notation
你可以使用点表示法/语法访问对象属性。
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 20The Square Bracket Notation
使用方括号对（其中包含属性作为字符串）加对象名称，可以访问特定的属性。
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 20Using the expression inside the bracket
有时，你需要使用变量或表达式动态访问对象属性。因此，你可以在方括号表示法中编写表达式。该表达式可以是变量、数学表达式等。
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>TwentyAccessing the Nested Object Properties
访问嵌套对象属性的方式与访问对象属性非常相似。你可以使用点或者方括号表示法。
Syntax
Obj.prop.nestedProp
// OR
Obj["prop"]["nestedProp"];在上面的语法中，prop 是 obj 对象的属性，而 nestedProp 是“prop”对象的属性。
Example
在下面的代码中，“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 8000000Adding or Updating the Object Properties
你可以使用点或方括号表示法更新或向对象添加新属性。你可以访问对象属性，并为其分配新值。如果属性已存在，它将更新该属性值。否则，它会将属性添加到对象中。
Example
在下面的示例中，我们更新了 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 daysDeleting the Object Properties
您可以使用“delete”运算符来删除特定的对象属性。
Example
在下面的示例中，我们使用 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}Enumerating the Object Properties
有各种方法来枚举对象属性。 Object.keys() 方法在数组中返回对象’的键。但是，我们将使用 for…in 循环遍历对象的每个属性。
Syntax
您可以按照以下语法来迭代对象属性。
for (let key in table) {
// Use the key to access its value
}在上面的语法中，“key”是对象属性，可用于访问其值。
Example
在下面的示例中，我们创建了包含 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