JavaScript 取对象属性：深入浅出的指南322

在 JavaScript 中，对象是一种可以存储成对数据的复合数据类型。这些数据对称为键值对，其中键是一个唯一的属性名称，而值是与该属性关联的数据。为了从对象中检索值，我们需要访问其属性。本文将深入探讨 JavaScript 中获取对象属性的不同方法，包括点表示法、方括号表示法和计算属性，并提供详细的示例和代码片段。

点表示法

点表示法是最简单、最常用的方法来访问对象属性。它通过使用点（.）运算符来获取与给定属性名称关联的值。该语法如下：;

例如：const person = {
name: "John Doe",
age: 30,
};
const name = ; // 输出："John Doe"

方括号表示法

方括号表示法提供了更通用的方式来访问对象属性，尤其是当属性名称存储在变量中或计算得出时。它使用方括号（[]）运算符，其中属性名称放置在方括号内。该语法如下：objectName[propertyName];

例如：const propertyName = "age";
const age = person[propertyName]; // 输出：30

方括号表示法还允许使用表达式作为属性名称：const dynamicPropertyName = "name" + "Suffix";
const nameWithSuffix = person[dynamicPropertyName]; // 输出："John DoeSuffix"

计算属性

计算属性允许我们通过动态计算的属性名称来访问对象属性。它使用方括号表示法，其中属性名称由表达式计算出来。该语法如下：objectName[expression];

例如：const multiplier = 2;
const doubledAge = person["age" * multiplier]; // 输出：60

使用 for...in 循环遍历对象属性

for...in 循环可用于遍历对象的可枚举属性。它会返回一个包含属性名称的数组，然后我们可以使用点表示法或方括号表示法访问属性值。该语法如下：for (const property in objectName) {
// 访问属性值： objectName[property]
}

例如：for (const property in person) {
(`${property}: ${person[property]}`);
}
/* 输出：
name: John Doe
age: 30
*/

使用 () 获取对象属性的数组

() 方法返回一个包含对象所有可枚举属性名称的数组。我们可以使用此数组来访问属性值。该语法如下：const propertyNames = (objectName);

例如：const propertyNames = (person);
((propertyName) => {
(`${propertyName}: ${person[propertyName]}`);
});
/* 输出：
name: John Doe
age: 30
*/

使用 () 获取对象属性的值数组

() 方法返回一个包含对象所有可枚举属性值的数组。我们可以使用此数组来访问属性值。该语法如下：const propertyValues = (objectName);

例如：const propertyValues = (person);
((propertyValue) => {
(propertyValue);
});
/* 输出：
John Doe
30
*/

使用 () 获取对象属性的键值对

() 方法返回一个包含对象所有可枚举属性的键值对数组。我们可以使用此数组来访问属性名称和值。该语法如下：const entries = (objectName);

例如：const entries = (person);
((entry) => {
const propertyName = entry[0];
const propertyValue = entry[1];
(`${propertyName}: ${propertyValue}`);
});
/* 输出：
name: John Doe
age: 30
*/

理解如何在 JavaScript 中访问对象属性是至关重要的，因为它使我们能够检索和操作存储在对象中的数据。我们已经讨论了点表示法、方括号表示法和计算属性，这些都是获取对象属性的常用方法。此外，我们还探讨了使用 for...in 循环、()、() 和 () 来遍历和获取对象属性的信息。通过有效地使用这些技术，我们可以轻松地访问和管理对象中的数据，从而创建健壮且高效的 JavaScript 应用程序。

2025-01-12

上一篇：JavaScript 进度条：从零到高级

下一篇：JavaScript中的 void 0、undefined 和 null