在 JavaScript 中访问对象属性的 3 种方法

您可以通过 3 种方式访问 JavaScript 中对象的属性：

点属性访问器：object.property
方括号属性访问：object['property']
对象解构：const { property } = object

让我们看看访问属性的每种语法是如何工作的。并了解何时合理，根据情况，使用这种或那种方式。

目录
1. 点属性访问器
1.1 点属性访问器需要标识符
2. 方括号属性访问器
3. 对象解构
3.1 别名变量
3.2 动态属性名称
4. 当属性不存在时
5. 结论

1. 点属性访问器

访问对象属性的常用方法是点属性访问器语法：

expression.identifier

expression应计算为对象，并且是要访问的属性的名称。identifier

例如，让我们访问对象的属性：namehero

const hero = {

name: 'Batman'

};

// Dot property accessor

hero.name; // => 'Batman'

hero.name是一个点属性访问器，用于读取对象的属性。namehero

可以使用链中的点属性访问器来访问更深层次的属性：。object.prop1.prop2

提前知道属性名称时选择点属性访问器。

1.1 点属性访问器需要标识符

当属性名称是有效的标识符时，点属性访问器可以正常工作。JavaScript 中的标识符包含 Unicode 字母、、和数字，但不能以数字开头。$_0..9

这不是问题，因为通常，属性名称是有效的标识符：例如，，。。nameaddressstreetcreatedBy

但有时属性不是有效的标识符：

const weirdObject = {

'prop-3': 'three',

'3': 'three'

};

weirdObject.prop-3; // => NaN

weirdObject.3; // throws SyntaxError: Unexpected number

由于和是无效的标识符，因此 dot 属性访问器不起作用：prop-33

weirdObject.prop-3计算结果为，而不是预期的NaN'tree'
weirdObject.3抛出一个！SyntaxError

为什么表达式 weirdObject.prop-3 的计算结果为 NaN？请在下面的评论中写下您的答案！

若要访问具有这些特殊名称的属性，请使用方括号属性访问器（将在下一节中介绍）：

const weirdObject = {

'prop-3': 'three',

'3': 'three'

};

weirdObject['prop-3']; // => 'three'

weirdObject[3]; // => 'three'

方括号语法可以毫无问题地访问具有特殊名称的属性：和。weirdObject['prop-3']weirdObject[3]

2. 方括号属性访问器

方括号属性访问器具有以下语法：

expression[expression]

第一个应计算为对象，第二个应计算为表示属性名称的字符串。expressionexpression

下面是一个示例：

const property = 'name';

const hero = {

name: 'Batman'

};

// Square brackets property accessor:

hero['name']; // => 'Batman'

hero[property]; // => 'Batman'

hero['name']，并且两者都使用方括号语法读取属性。hero[property]name

当属性名称是动态的时，即在运行时确定时，选择方括号属性访问器。

3. 对象解构

基本的对象解构语法非常简单：

const { identifier } = expression;

identifier是要访问的属性的名称，应计算为对象。解构后，变量包含属性值。expressionidentifier

下面是一个示例：

const hero = {

name: 'Batman'

};

// Object destructuring:

const { name } = hero;

name; // => 'Batman'

const { name } = hero是一个对象解构。解构定义了一个值为 property 的变量。namename

当您习惯于对象解构时，您会发现它的语法是将属性提取到变量中的好方法。

当您要创建具有属性值的变量时，请选择对象解构。

请注意，您可以根据需要提取任意数量的属性：

const { identifier1, identifier2, .., identifierN } = expression;

3.1 别名变量

如果要访问属性，但要创建与属性名称不同的变量名称，则可以使用别名。

const { identifier: aliasIdentifier } = expression;

identifier是要访问的属性的名称，是变量名称，应计算为对象。解构后，变量包含属性值。aliasIdentifierexpressionaliasIdentifier

下面是一个示例：

const hero = {

name: 'Batman'

};

// Object destructuring:

const { name: heroName } = hero;

heroName; // => 'Batman'

const { name: heroName } = hero是一个对象解构。推断定义一个新变量（而不是上一个示例），并赋值。heroNamenameheroNamehero.name

3.2 动态属性名称

使对象解构更加有用的是，您可以使用动态值提取到变量属性：

const { [expression]: identifier } = expression;

第一个应计算为属性名称，并且应指示在析构后创建的变量名称。第二个应该计算到您要取消结构的对象。expressionidentifierexpression

下面是一个示例：

const property = 'name';

const hero = {

name: 'Batman'

};

// Object destructuring:

const { [property]: name } = hero;

name; // => 'Batman'

const { [property]: name } = hero是一个对象析构，它在运行时动态地确定要提取的属性。

4. 当属性不存在时

如果访问的属性不存在，则所有 3 个访问器语法都评估为：undefined

const hero = {

characterName: 'Batman'

};

hero.name; // => undefined

hero['name']; // => undefined

const { name } = hero;

name; // => undefined

该属性在对象中不存在。因此点属性访问器、方括号属性访问器和解构后的变量的计算结果为。nameherohero.namehero['name']nameundefined

5. 结论

JavaScript 提供了一堆访问对象属性的好方法。

当您提前知道变量时，dot 属性访问器语法可以很好地工作。object.property

当属性名称是动态的或不是有效的标识符时，更好的替代方法是将属性访问器括起来：。object[propertyName]

对象解构将属性直接提取到变量：中。此外，还可以提取动态属性名称（在运行时确定）：。{ property } = object{ [propertName]: variable } = object

访问属性没有好或坏的方法。根据您的具体情况进行选择。