您可以通过 3 种方式访问 JavaScript 中对象的属性:
object.property
object['property']
const { property } = object
让我们看看访问属性的每种语法是如何工作的。并了解何时合理,根据情况,使用这种或那种方式。
访问对象属性的常用方法是点属性访问器语法:
expression.identifier
expression
应计算为对象,并且是要访问的属性的名称。identifier
例如,让我们访问对象的属性:name
hero
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
hero.name
是一个点属性访问器,用于读取对象 的属性。name
hero
可以使用链中的点属性访问器来访问更深层次的属性:。object.prop1.prop2
提前知道属性名称时选择点属性访问器。
当属性名称是有效的标识符时,点属性访问器可以正常工作。JavaScript 中的标识符包含 Unicode 字母、、和数字,但不能以数字开头。$_0..9
这不是问题,因为通常,属性名称是有效的标识符:例如,,。。name
address
street
createdBy
但有时属性不是有效的标识符:
const weirdObject = {
'prop-3': 'three',
'3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3; // throws SyntaxError: Unexpected number
由于 和 是无效的标识符,因此 dot 属性访问器不起作用:prop-3
3
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]
方括号属性访问器具有以下语法:
expression[expression]
第一个应计算为对象,第二个应计算为表示属性名称的字符串。expression
expression
下面是一个示例:
const property = 'name';
const hero = {
name: 'Batman'
};
// Square brackets property accessor:
hero['name']; // => 'Batman'
hero[property]; // => 'Batman'
hero['name']
,并且两者都使用方括号语法读取属性。hero[property]
name
当属性名称是动态的时,即在运行时确定时,选择方括号属性访问器。
基本的对象解构语法非常简单:
const { identifier } = expression;
identifier
是要访问的属性的名称,应计算为对象。解构后,变量包含属性值。expression
identifier
下面是一个示例:
const hero = {
name: 'Batman'
};
// Object destructuring:
const { name } = hero;
name; // => 'Batman'
const { name } = hero
是一个对象解构。解构定义了一个值为 property 的变量。name
name
当您习惯于对象解构时,您会发现它的语法是将属性提取到变量中的好方法。
当您要创建具有属性值的变量时,请选择对象解构。
请注意,您可以根据需要提取任意数量的属性:
const { identifier1, identifier2, .., identifierN } = expression;
如果要访问属性,但要创建与属性名称不同的变量名称,则可以使用别名。
const { identifier: aliasIdentifier } = expression;
identifier
是要访问的属性的名称,是变量名称,应计算为对象。解构后,变量包含属性值。aliasIdentifier
expression
aliasIdentifier
下面是一个示例:
const hero = {
name: 'Batman'
};
// Object destructuring:
const { name: heroName } = hero;
heroName; // => 'Batman'
const { name: heroName } = hero
是一个对象解构。推断定义一个新变量(而不是上一个示例),并赋值 。heroName
name
heroName
hero.name
使对象解构更加有用的是,您可以使用动态值提取到变量属性:
const { [expression]: identifier } = expression;
第一个应计算为属性名称,并且应指示在析构后创建的变量名称。第二个应该计算到您要取消结构的对象。expression
identifier
expression
下面是一个示例:
const property = 'name';
const hero = {
name: 'Batman'
};
// Object destructuring:
const { [property]: name } = hero;
name; // => 'Batman'
const { [property]: name } = hero
是一个对象析构,它在运行时动态地确定要提取的属性。
如果访问的属性不存在,则所有 3 个访问器语法都评估为 :undefined
const hero = {
characterName: 'Batman'
};
hero.name; // => undefined
hero['name']; // => undefined
const { name } = hero;
name; // => undefined
该属性在对象 中不存在。因此点属性访问器、方括号属性访问器和解构后的变量的计算结果为 。name
hero
hero.name
hero['name']
name
undefined
JavaScript 提供了一堆访问对象属性的好方法。
当您提前知道变量时,dot 属性访问器语法可以很好地工作。object.property
当属性名称是动态的或不是有效的标识符时,更好的替代方法是将属性访问器括起来:。object[propertyName]
对象解构将属性直接提取到变量:中。此外,还可以提取动态属性名称(在运行时确定):。{ property } = object
{ [propertName]: variable } = object
访问属性没有好或坏的方法。根据您的具体情况进行选择。