在程序編寫中，當你要使用某個屬性時，你可能要首先判斷該屬性是否存在，以免拋出錯誤。在本文中，將介紹3種方法，判斷JS對象是否具有某一屬性。

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

1、hasOwnProperty()方法

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

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

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

webkaka.hasOwnProperty('name')返回true，因為屬性name存在于webkaka對象中。

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

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

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

2、in運算符

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

我們可以使用in運算符來檢測webkaka對象中的name和realName的存在：

const webkaka = {
  name: '卡卡網'
};
'name' in webkaka;     // => true
'realName' in webkaka; // => false

'name' in webkaka 為true，因為webkaka有一個屬性name。

另一方面，'realName' in webkaka 結果為false，因為webkaka沒有名為'realName'的屬性。

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

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

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

3、與undefined比較

從對象訪問不存在的屬性會導致undefined：

const webkaka = {
  name: '卡卡網'
};
webkaka.name;     // => '卡卡網'
webkaka.realName; // => undefined

webkaka.realName為undefined是因為webkaka缺少realName屬性。

現在可以看到一個思路：可以通過比較undefined來判斷屬性的存在：

const webkaka = {
  name: '卡卡網'
};
webkaka.name !== undefined;     // => true
webkaka.realName !== undefined; // => false

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

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

如果某屬性存在，但具有undefined（這種情況很少發生），則比較undefined就會錯誤地認為為false：

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

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

4、總結

本文介紹了3種方法來檢查屬性是否存在。

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

hasOwnProperty()僅在對象自身的屬性內搜索。

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

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

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

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

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

標簽: 對象  屬性