卡卡網(wǎng)

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

• 點(diǎn)屬性訪問(wèn)器：object.property
• 方括號(hào)屬性訪問(wèn)：object['property']
• 對(duì)象解構(gòu)：const { property } = object

1、點(diǎn)屬性訪問(wèn)器

訪問(wèn)對(duì)象屬性的常用方法是點(diǎn)屬性訪問(wèn)器。其語(yǔ)法是：

expression.identifier

expression 為一個(gè)對(duì)象，identifier 是要訪問(wèn)的屬性的名稱。

例如，訪問(wèn)name對(duì)象的屬性hero：

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

webkaka.name 是一個(gè)點(diǎn)屬性訪問(wèn)器，它讀取webkaka對(duì)象的屬性name。

可以使用點(diǎn)屬性訪問(wèn)器來(lái)訪問(wèn)更深層次的屬性：object.prop1.prop2。

如果提前知道屬性名稱，請(qǐng)選擇點(diǎn)屬性訪問(wèn)器。

點(diǎn)屬性訪問(wèn)器需要標(biāo)識(shí)符

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

這不是問(wèn)題，因?yàn)橥ǔ傩悦Q是有效的標(biāo)識(shí)符：例如name, address, street, createdBy。

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

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

因?yàn)?code>prop-3和3是無(wú)效的標(biāo)識(shí)符，所以點(diǎn)屬性訪問(wèn)器不起作用：

weirdObject.prop-3 輸出 NaN，而不是預(yù)期的'tree'。

weirdObject.3拋出一個(gè) SyntaxError！

要使用這些特殊名稱訪問(wèn)屬性，請(qǐng)使用方括號(hào)屬性訪問(wèn)器（將在下面介紹）。

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

方括號(hào)語(yǔ)法可以訪問(wèn)具有特殊名稱的屬性：weirdObject['prop-3']和weirdObject[3]。

2、方括號(hào)屬性訪問(wèn)器

方括號(hào)屬性訪問(wèn)器具有以下語(yǔ)法：

expression[expression]

第一個(gè)expression為一個(gè)對(duì)象，第二個(gè)expression為一個(gè)表示屬性名稱的字符串。

這是一個(gè)例子：

const property = 'name';
const webkaka = {
  name: '卡卡網(wǎng)'
};
// 方括號(hào)屬性訪問(wèn)器
webkaka['name'];   // => '卡卡網(wǎng)'
webkaka[property]; // => '卡卡網(wǎng)'

webkaka['name']和webkaka[property]都使用方括號(hào)語(yǔ)法，并且讀取name屬性。

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

3、對(duì)象解構(gòu)

基本的對(duì)象解構(gòu)語(yǔ)法非常簡(jiǎn)單：

const { identifier } = expression;

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

這是一個(gè)例子：

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

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

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

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

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

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

別名變量

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

const { identifier: aliasIdentifier } = expression;

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

這是一個(gè)例子： 

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

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

動(dòng)態(tài)屬性名稱

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

const { [expression]: identifier } = expression;

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

這是一個(gè)例子：

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

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

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

如果訪問(wèn)的屬性不存在，上述 3 種訪問(wèn)器語(yǔ)法都返回undefined：

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

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

因此，我們可以以此來(lái)判斷對(duì)象屬性是否存在：

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

5、總結(jié)

JavaScript 提供了許多訪問(wèn)對(duì)象屬性的好方法。

當(dāng)提前知道變量時(shí)，點(diǎn)屬性訪問(wèn)器語(yǔ)法object.property可以很好地工作。

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

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

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

您可能對(duì)以下文章也感興趣

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

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