卡卡网

JavaScript访问对象属性有多种方法，本文将介绍三种JS访问对象属性的方法，介绍访问属性的每种方法是如何工作的，并根据情况了解何时使用一种或另一种方式是合理的。

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

1、点属性访问器

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

expression.identifier

expression 为一个对象，identifier 是要访问的属性的名称。

例如，访问name对象的属性hero：

const webkaka = {
  name: '卡卡网'
};
// 点属性访问器
webkaka.name; // => '卡卡网'

webkaka.name 是一个点属性访问器，它读取webkaka对象的属性name。

可以使用点属性访问器来访问更深层次的属性：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

因为prop-3和3是无效的标识符，所以点属性访问器不起作用：

weirdObject.prop-3 输出 NaN，而不是预期的'tree'。

weirdObject.3抛出一个 SyntaxError！

要使用这些特殊名称访问属性，请使用方括号属性访问器（将在下面介绍）。

const weirdObject = {
  'prop-3': 'three',
  '3': 'three'
};
weirdObject['prop-3']; // => 'three'
weirdObject[3];        // => 'three' 

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

2、方括号属性访问器

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

expression[expression]

第一个expression为一个对象，第二个expression为一个表示属性名称的字符串。

这是一个例子：

const property = 'name';
const webkaka = {
  name: '卡卡网'
};
// 方括号属性访问器
webkaka['name'];   // => '卡卡网'
webkaka[property]; // => '卡卡网'

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

当属性名称是动态的，选择方括号属性访问器。

3、对象解构

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

const { identifier } = expression;

identifier是要访问的属性的名称，expression为一个对象。解构后，变量identifier包含属性值。

这是一个例子：

const webkaka = {
  name: '卡卡网'
};
// 对象解构
const { name } = webkaka;
name; // => '卡卡网'

const { name } = webkaka 是一个对象解构，解构定义了一个变量name，它具有属性name的值。

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

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

你可以提取任意数量的属性：

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

别名变量

如果你想访问属性，但创建一个不同于属性名称的变量名称，则可以使用别名。

const { identifier: aliasIdentifier } = expression;

identifier是要访问的属性的名称，aliasIdentifier是变量名，expression为一个对象。解构后，变量aliasIdentifier包含属性值。

这是一个例子： 

const webkaka = {
  name: '卡卡网'
};
// 对象解构:
const { name: webkakaName } = webkaka;
webkakaName; // => '卡卡网'

const { name: webkakaName } = webkaka 是一个对象解构。解构定义了一个新变量webkakaName，并把webkaka.name的值分配给webkakaName。

动态属性名称

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

const { [expression]: identifier } = expression;

第一个expression为属性名称，identifier是解构后创建的变量名称。第二个expression是想要解构的对象。

这是一个例子：

const property = 'name';
const webkaka = {
  name: '卡卡网'
};
// 对象解构:
const { [property]: name } = webkaka;
name; // => '卡卡网'

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

4、当属性不存在时

如果访问的属性不存在，上述 3 种访问器语法都返回undefined：

const webkaka = {
  myName: '卡卡网'
};
webkaka.name;    // => undefined
webkaka['name']; // => undefined
const { name } = webkaka;
name;         // => undefined

webkaka对象中不存在属性name。因此点属性访问器webkaka.name、方括号属性访问器webkaka['name']和解构后name的变量输出为undefined。

因此，我们可以以此来判断对象属性是否存在：

if (typeof myVar === "undefined"){ //对象不存在
}

5、总结

JavaScript 提供了许多访问对象属性的好方法。

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

当属性名称是动态的或不是有效标识符时，更好的选择是方括号属性访问器：object[propertyName]。

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

访问属性没有好坏之分，应根据你的具体情况进行选择。

您可能对以下文章也感兴趣

• JS 5种方法判断某属性是否在指定对象中
• JS删除对象属性：这种方法比delete快50倍
• 【实例】演示2种方法JS从对象中删除属性

标签: 对象属性  属性  对象