首頁  >  文章  >  web前端  >  es6怎麼判斷物件有沒有某屬性

es6怎麼判斷物件有沒有某屬性

青灯夜游
青灯夜游原創
2022-04-11 15:15:185003瀏覽

判斷方法:1、用「物件.屬性名稱!== undefined」語句判斷,如果傳回值為true,則物件上有某個屬性;2、用「'屬性名稱' in 物件」語句,如果回傳true則有某屬性;3、用「物件.hasOwnProperty('屬性名稱')」語句。

es6怎麼判斷物件有沒有某屬性

本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

es6判斷物件有沒有某屬性

#方法1:點( .) undefined判斷

#我們知道,透過點或方括號可以取得物件的屬性值,如果物件上不存在該屬性,則會傳回 undefined。這種方式可以判斷指定物件的自有屬性和繼承屬性,如果物件本身沒有偵測到的屬性,而原型鏈上有該屬性,則會傳回原型鏈上的屬性值。

// 创建对象
let obj = {
    name: 'Scarlett',
    age: 37
}
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
})

簡單的,我們可以透過 Object.propertyName !== undefined 的回傳值來判斷物件上是否含有某個屬性。但有一種情況,即:屬性名存在,屬性值為 undefined 的情況下,就無法傳回想要的結果。

// 新增一个值为undefined的属性
obj.birthday = undefined

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

那麼,我們可以使用 in 運算子來解決這個問題。

方法2:in 運算子

該方法可以判斷指定物件的自有屬性和繼承屬性中是否存在某屬性,如果存在則傳回 true。 in 運算子也能偵測到原型鏈上的屬性。

'name' in obj  // true 自身属性存在
'occupation' in obj  // true 不可枚举属性存在
'nationality' in obj  // true 继承属性
'birthday' in obj  // true 值为undefined的属性

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

  • 以上這兩種方法的限制是:不能準確區分是自有屬性還是原型鏈上的屬性。如果偵測自身屬性是否存在時,就需要 Object.hasOwnProperty() 了。

方法3:Object.hasOwnProperty()

#Object.hasOwnProperty() 用來判斷指定物件本身是否含有某個屬性(非繼承),返回布林值。

obj.hasOwnProperty('name')  // true 自身属性
obj.hasOwnProperty('occupation')  // true 不可枚举属性
obj.hasOwnProperty('birthday')  // true
obj.hasOwnProperty('nationality')  // false 原型链上继承的属性

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

【相關推薦:javascript影片教學web前端

以上是es6怎麼判斷物件有沒有某屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn