js判斷對象中是否含有某個屬性

判斷對象中是否含有某個屬性也是實際項目中常見的場景，現總結如下幾種方法來判斷。

本文關聯文章之js遍歷對象的幾種方法

一、點( . )或者方括號( [ ] ) + undefined判斷

我們知道，通過點或者方括號可以獲取對象的屬性值，如果對象上不存在該屬性，則會返回 undefined。這種方式可以判斷指定對象的自有屬性和繼承屬性，如果對象自身沒有檢測的屬性，而原型鏈上有該屬性，則會返回原型鏈上的屬性值。

// 創建對象
let obj = {
    name: 'Scarlett',
    age: 37
}
console.log(obj.name !== undefined)  // true 自身屬性存在
console.log(obj['name'] !== undefined)  // true
console.log(obj.gender !== undefined)  // false gender屬性不存在

// 在原型上添加一個可枚舉屬性
Object.prototype.nationality = 'America'

// 在obj對象上添加一個不可枚舉屬性
Object.defineProperty(obj, 'occupation', {
    value: 'actress',
    enumerable: false
})

console.log(obj.nationality !== undefined) // true
console.log(obj['occupation'] !== undefined)  // true

簡單的，我們可以通過 Object.propertyName !== undefined 的返回值來判斷對象上是否含有某屬性。但有一種情況，即：屬性名存在，屬性值為 undefined 的情況下，就不能返回想要的結果。

// 新增一個值為undefined的屬性
obj.birthday = undefined

console.log(obj.birthday !== undefined);  // false

那么，我們可以使用 in 運算符來解決這個問題。

 

二、in 運算符

該方法可以判斷指定對象的自有屬性和繼承屬性中是否存在某屬性，如果存在則返回 true。 in 運算符也能檢測到原型鏈上的屬性。

附：MDN 上對in運算符的介紹。

'name' in obj  // true 自身屬性存在
'occupation' in obj  // true 不可枚舉屬性存在
'nationality' in obj  // true 繼承屬性
'birthday' in obj  // true 值為undefined的屬性

in 運算符的語法也很簡單，作用范圍和效果與點( . )或方括號( [ ] )相同，不同的是值為 undefined 的屬性也可以正常判斷。

 

以上這兩種方法的局限性就是：不能准確區分是自有屬性還是原型鏈上的屬性。如果僅檢測自身屬性是否存在時，就需要 Object.hasOwnProperty() 了。

 

三、Object.hasOwnProperty()

Object.hasOwnProperty() 用來判斷指定對象自身是否含有某個屬性（非繼承），返回布爾值。

obj.hasOwnProperty('name')  // true 自身屬性
obj.hasOwnProperty('occupation')  // true 不可枚舉屬性
obj.hasOwnProperty('birthday')  // true
obj.hasOwnProperty('nationality')  // false 原型鏈上繼承的屬性

該方法會過濾掉那些繼承來的屬性，當檢測屬性為自有屬性時返回 true。

 

四、Object.keys()

Object.keys() ES5 新增的一個對象方法，該方法返回指定對象自身的可枚舉屬性（不含繼承的和Symbol屬性）組成的數組。

一般的，利用以上三種方法就可以判斷指定對象中是否包含某個屬性。從上面實例中，我們可以看到當給對象增加一個不可枚舉的屬性 occupation 時，使用 obj.occupation !== undefined，'occupation' in obj 和 obj.hasOwnProperty('occupation') 都返回 true。

但如果我想忽略這個屬性，只判斷對象中是否含有某個可枚舉的屬性呢？這就需要用到 Object.keys() 方法了。完整示例如下：

// 創建對象
let obj = {
    name: 'Scarlett',
    age: 37
}

// 在原型上添加一個可枚舉屬性
Object.prototype.nationality = 'America'

// 添加一個不可枚舉屬性
Object.defineProperty(obj, 'occupation', {
    value: 'actress',
    enumerable: false
})

// 在得到了obj對象自有的可枚舉屬性之后，剩下的操作就是在數組中查找符合條件的元素了。
Object.keys(obj).includes('occupation')  // false
Object.keys(obj).indexOf('occupation')   // -1

 

總結

• 判斷一個對象及其原型鏈是否含有某個屬性（枚舉、不可枚舉及繼承屬性），使用 in 運算符或點( . )或方括號( [ ] )；

• 判斷一個對象自身是否含有某個屬性（含枚舉、不可枚舉屬性，不含繼承的屬性），使用 Object.hasOwnProperty() 方法；

• 判斷一個對象自身是否含有某個可枚舉屬性，使用 Object.keys() 方法獲得可枚舉屬性名組成的數組，然后檢查該屬性名是否存在於這個數組中。