您可以通过 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
访问属性没有好或坏的方法。根据您的具体情况进行选择。