JavaScript訪問對象屬性有多種方法，本文將介紹三種JS訪問對象屬性的方法，介紹訪問屬性的每種方法是如何工作的，并根據(jù)情況了解何時使用一種或另一種方式是合理的。

• 點屬性訪問器：object.property
• 方括號屬性訪問：object['property']
• 對象解構(gòu)：const { property } = object

1、點屬性訪問器

訪問對象屬性的常用方法是點屬性訪問器。其語法是：

expression.identifier

expression 為一個對象，identifier 是要訪問的屬性的名稱。

例如，訪問name對象的屬性hero：

const webkaka = {
  name: '卡卡網(wǎng)'
};
// 點屬性訪問器
webkaka.name; // => '卡卡網(wǎng)'

webkaka.name 是一個點屬性訪問器，它讀取webkaka對象的屬性name。

可以使用點屬性訪問器來訪問更深層次的屬性：object.prop1.prop2。

如果提前知道屬性名稱，請選擇點屬性訪問器。

點屬性訪問器需要標(biāo)識符

當(dāng)屬性名稱是有效標(biāo)識符時，點屬性訪問器可以正常工作。JavaScript 中的標(biāo)識符包含 Unicode 字母、、、$和_數(shù)字0..9，但不能以數(shù)字開頭。

這不是問題，因為通常屬性名稱是有效的標(biāo)識符：例如name, address, street, createdBy。

但有時屬性不是有效的標(biāo)識符： 

const weirdObject = {
  'prop-3': 'three',
  '3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3;      // throws SyntaxError: Unexpected number

因為prop-3和3是無效的標(biāo)識符，所以點屬性訪問器不起作用：

weirdObject.prop-3 輸出 NaN，而不是預(yù)期的'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: '卡卡網(wǎng)'
};
// 方括號屬性訪問器
webkaka['name'];   // => '卡卡網(wǎng)'
webkaka[property]; // => '卡卡網(wǎng)'

webkaka['name']和webkaka[property]都使用方括號語法，并且讀取name屬性。

當(dāng)屬性名稱是動態(tài)的，選擇方括號屬性訪問器。

3、對象解構(gòu)

基本的對象解構(gòu)語法非常簡單：

const { identifier } = expression;

identifier是要訪問的屬性的名稱，expression為一個對象。解構(gòu)后，變量identifier包含屬性值。

這是一個例子：

const webkaka = {
  name: '卡卡網(wǎng)'
};
// 對象解構(gòu)
const { name } = webkaka;
name; // => '卡卡網(wǎng)'

const { name } = webkaka 是一個對象解構(gòu)，解構(gòu)定義了一個變量name，它具有屬性name的值。

當(dāng)你習(xí)慣了對象解構(gòu)時，你會發(fā)現(xiàn)它的語法是一種將屬性提取到變量中的好方法。

當(dāng)你想創(chuàng)建具有屬性值的變量時，請選擇對象解構(gòu)。

你可以提取任意數(shù)量的屬性：

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

別名變量

如果你想訪問屬性，但創(chuàng)建一個不同于屬性名稱的變量名稱，則可以使用別名。

const { identifier: aliasIdentifier } = expression;

identifier是要訪問的屬性的名稱，aliasIdentifier是變量名，expression為一個對象。解構(gòu)后，變量aliasIdentifier包含屬性值。

這是一個例子： 

const webkaka = {
  name: '卡卡網(wǎng)'
};
// 對象解構(gòu):
const { name: webkakaName } = webkaka;
webkakaName; // => '卡卡網(wǎng)'

const { name: webkakaName } = webkaka 是一個對象解構(gòu)。解構(gòu)定義了一個新變量webkakaName，并把webkaka.name的值分配給webkakaName。

動態(tài)屬性名稱

使對象解構(gòu)更加有用的是，可以將具有動態(tài)值的屬性提取到變量中：

const { [expression]: identifier } = expression;

第一個expression為屬性名稱，identifier是解構(gòu)后創(chuàng)建的變量名稱。第二個expression是想要解構(gòu)的對象。

這是一個例子：

const property = 'name';
const webkaka = {
  name: '卡卡網(wǎng)'
};
// 對象解構(gòu):
const { [property]: name } = webkaka;
name; // => '卡卡網(wǎng)'

const { [property]: name } = webkaka 是一個對象解構(gòu)，在運行時動態(tài)確定要提取的屬性。

4、當(dāng)屬性不存在時

如果訪問的屬性不存在，上述 3 種訪問器語法都返回undefined：

const webkaka = {
  myName: '卡卡網(wǎng)'
};
webkaka.name;    // => undefined
webkaka['name']; // => undefined
const { name } = webkaka;
name;         // => undefined

webkaka對象中不存在屬性name。因此點屬性訪問器webkaka.name、方括號屬性訪問器webkaka['name']和解構(gòu)后name的變量輸出為undefined。

因此，我們可以以此來判斷對象屬性是否存在：

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

5、總結(jié)

JavaScript 提供了許多訪問對象屬性的好方法。

當(dāng)提前知道變量時，點屬性訪問器語法object.property可以很好地工作。

當(dāng)屬性名稱是動態(tài)的或不是有效標(biāo)識符時，更好的選擇是方括號屬性訪問器：object[propertyName]。

對象解構(gòu)將屬性直接提取到變量中：{ property } = object ，此外，可以提取動態(tài)屬性名稱（在運行時確定）：{ [propertName]: variable } = object。

訪問屬性沒有好壞之分，應(yīng)根據(jù)你的具體情況進(jìn)行選擇。

您可能對以下文章也感興趣

• JS 5種方法判斷某屬性是否在指定對象中
• JS刪除對象屬性：這種方法比delete快50倍
• 【實例】演示2種方法JS從對象中刪除屬性

標(biāo)簽: 對象屬性  屬性  對象