卡卡網(wǎng)

在程序編寫中，當(dāng)你要使用某個(gè)屬性時(shí)，你可能要首先判斷該屬性是否存在，以免拋出錯(cuò)誤。在本文中，將介紹3種方法，判斷JS對(duì)象是否具有某一屬性。

• hasOwnProperty()方法
• in運(yùn)算符
• 與undefined的比較

1、hasOwnProperty()方法

每個(gè) JavaScript 對(duì)象都有一個(gè)特殊的方法 object.hasOwnProperty('myProp')，它返回一個(gè)布爾值，指示是否object有一個(gè)屬性myProp。

在以下示例中，hasOwnProperty()確定屬性name和realName的存在：

const webkaka = {
  name: '卡卡網(wǎng)'
};
webkaka.hasOwnProperty('name');     // => true
webkaka.hasOwnProperty('realName'); // => false

webkaka.hasOwnProperty('name')返回true，因?yàn)閷傩?code>name存在于webkaka對(duì)象中。

另一方面，webkaka沒(méi)有realName屬性，因此webkaka.hasOwnProperty('realName')返回false。

方法名稱hasOwnProperty()表明它查看對(duì)象自身的屬性，自己的屬性是直接在對(duì)象上定義的屬性，而沒(méi)有檢測(cè)到繼承的屬性：

const webkaka = {
  name: '卡卡網(wǎng)'
};
webkaka.toString; // => function() {...}
webkaka.hasOwnProperty('toString'); // => false

2、in運(yùn)算符

'myProp' in object還確定myProp屬性是否存在于object。

我們可以使用in運(yùn)算符來(lái)檢測(cè)webkaka對(duì)象中的name和realName的存在：

const webkaka = {
  name: '卡卡網(wǎng)'
};
'name' in webkaka;     // => true
'realName' in webkaka; // => false

'name' in webkaka 為true，因?yàn)?code>webkaka有一個(gè)屬性name。

另一方面，'realName' in webkaka 結(jié)果為false，因?yàn)?code>webkaka沒(méi)有名為'realName'的屬性。

in運(yùn)算符的語(yǔ)法很短，我更喜歡它而不是hasOwnProperty()方法。

hasOwnProperty()方法和in操作符之間的主要區(qū)別在于后者能檢查對(duì)象自身和繼承的屬性：

const webkaka = {
  name: '卡卡網(wǎng)'
};
webkaka.toString; // => function() {...}
'toString' in webkaka;              // => true
webkaka.hasOwnProperty('toString'); // => false

3、與undefined比較

從對(duì)象訪問(wèn)不存在的屬性會(huì)導(dǎo)致undefined：

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

webkaka.realName為undefined是因?yàn)?code>webkaka缺少realName屬性。

現(xiàn)在可以看到一個(gè)思路：可以通過(guò)比較undefined來(lái)判斷屬性的存在：

const webkaka = {
  name: '卡卡網(wǎng)'
};
webkaka.name !== undefined;     // => true
webkaka.realName !== undefined; // => false

webkaka.name !== undefined 結(jié)果為true，這表明屬性是存在的。

另一方面，webkaka.realName !== undefined 是 false，表示realName屬性是不存在的。

如果某屬性存在，但具有undefined（這種情況很少發(fā)生），則比較undefined就會(huì)錯(cuò)誤地認(rèn)為為false：

const webkaka = {
  name: undefined
};
webkaka.name !== undefined; // => false

即使屬性name存在（但有undefined值），webkaka.name !== undefined 判斷為false，錯(cuò)誤地認(rèn)為缺少name屬性。

4、總結(jié)

本文介紹了3種方法來(lái)檢查屬性是否存在。

第一種方法是調(diào)用 object.hasOwnProperty(propName)，如果propName存在于object對(duì)象中，則該方法返回true，否則返回false。

hasOwnProperty()僅在對(duì)象自身的屬性內(nèi)搜索。

第二種方法使用propName in object運(yùn)算符，存在屬性則運(yùn)算符判斷結(jié)果為true，否則為false。

in運(yùn)算符在自己的和繼承的屬性中查找屬性是否存在。

最后，可以直接使用object.propName !== undefined和undefined比較，但這種方法有誤判斷的可能。

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

• 【如何合理使用】JavaScript訪問(wèn)對(duì)象屬性的3種方法
• JS刪除對(duì)象屬性：這種方法比delete快50倍
• 【實(shí)例】演示2種方法JS從對(duì)象中刪除屬性

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