JavaScript如何判斷對(duì)象有某屬性
判斷對(duì)象中是否有某屬性的常見方式總結(jié)，不同的場景要使用不同的方式。
一、點(diǎn)( . )或者方括號(hào)( [ ] )
通過點(diǎn)或者方括號(hào)可以獲取對(duì)象的屬性值，如果對(duì)象上不存在該屬性，則會(huì)返回undefined。當(dāng)然，這里的“不存在”指的是對(duì)象自身和原型鏈上都不存在，如果原型鏈有該屬性，則會(huì)返回原型鏈上的屬性值。
// 創(chuàng)建對(duì)象
let test = {name : 'lei'}
// 獲取對(duì)象的自身的屬性
test.name //"lei"
test["name"] //"lei"
// 獲取不存在的屬性
test.age //undefined
// 獲取原型上的屬性
test["toString"] //toString() { [native code] }// 新增一個(gè)值為undefined的屬性test.un = undefinedtest.un //undefined 不能用在屬性值存在，但可能為 undefined的場景
所以，我們可以根據(jù) Obj.x !== undefined 的返回值 來判斷Obj是否有x屬性。
這種方式很簡單方便，局限性就是：不能用在x的屬性值存在，但可能為 undefined的場景。 in運(yùn)算符可以解決這個(gè)問題
二、 in 運(yùn)算符
MDN 上對(duì)in運(yùn)算符的介紹：如果指定的屬性在指定的對(duì)象或其原型鏈中，則in 運(yùn)算符返回true。
'name' in test //true
'un' in test //true
'toString' in test //true
'age' in test //false
示例中可以看出，值為undefined的屬性也可正常判斷。
這種方式的局限性就是無法區(qū)分自身和原型鏈上的屬性，在只需要判斷自身屬性是否存在時(shí)，這種方式就不適用了。這時(shí)需要hasOwnProperty()
三、hasOwnProperty()
test.hasOwnProperty('name') //true 自身屬性
test.hasOwnProperty('age') //false 不存在
test.hasOwnProperty('toString') //false 原型鏈上屬性
可以看到，只有自身存在該屬性時(shí)，才會(huì)返回true。適用于只判斷自身屬性的場景。
四、propertyIsEnumerable()
const object1 = {};
const array1 = [];
object1.property1 = 42;
array1[0] = 42;
console.log(object1.propertyIsEnumerable('property1'));
// expected output: true
console.log(array1.propertyIsEnumerable(0));
// expected output: true
console.log(array1.propertyIsEnumerable('length'));
// expected output: false
propertyIsEnumerable() 方法返回一個(gè)布爾值，表示指定的屬性是否可枚舉。
總結(jié)
四種方式各有優(yōu)缺點(diǎn)，不同的場景使用不同的方式，有時(shí)還需要結(jié)合使用，比如遍歷自身屬性的時(shí)候，就會(huì)把 for ··· in ···和 hasOwnProperty()結(jié)合使用。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS前端知識(shí)點(diǎn)總結(jié)之頁面加載事件，數(shù)組操作，DOM節(jié)點(diǎn)操作，循環(huán)和分支
這篇文章主要介紹了JS前端知識(shí)點(diǎn)總結(jié)之頁面加載事件，數(shù)組操作，DOM節(jié)點(diǎn)操作，循環(huán)和分支,結(jié)合實(shí)例形式總結(jié)分析了JS頁面加載事件，數(shù)組操作，DOM節(jié)點(diǎn)操作，循環(huán)和分支所涉及的相關(guān)事件、函數(shù)及操作注意事項(xiàng),需要的朋友可以參考下2019-07-07
這篇文章主要給大家介紹了關(guān)于微信小程序如何監(jiān)聽全局變量的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
JS實(shí)現(xiàn)動(dòng)態(tài)生成html table表格的方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)動(dòng)態(tài)生成html table表格的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)數(shù)組數(shù)據(jù)的讀取、遍歷以及動(dòng)態(tài)生成相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
微信小程序錄音實(shí)現(xiàn)功能并上傳(使用node解析接收)
在我們的日常開發(fā)中經(jīng)常會(huì)遇到錄音功能，并上傳到服務(wù)器，今天小編給大家分享微信小程序錄音功能實(shí)現(xiàn)并上傳錄音文件，使用node解析接收,需要的朋友可以參考下2020-02-02
這篇文章主要為大家詳細(xì)介紹了由html、css、javascript結(jié)合實(shí)現(xiàn)的簡單日歷，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要介紹了全面解析Bootstrap圖片輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-12-12
js自動(dòng)閉合html標(biāo)簽(自動(dòng)補(bǔ)全html標(biāo)記)
假如我有一個(gè)DIV，如果沒有閉合后面的樣式都會(huì)亂了，這樣的代碼可能會(huì)影響后面的樣式，我希望用ＪＳ去自動(dòng)閉合這種沒有閉合的標(biāo)簽2012-10-10
JavaScript中的console.profile()函數(shù)詳細(xì)介紹
這篇文章主要介紹了JavaScript中的console.profile()函數(shù)詳細(xì)介紹,本文講解了console.profile()函數(shù)的瀏覽器支持情況、console.profile()的使用、Firebug中Profile按鈕的使用等內(nèi)容,需要的朋友可以參考下2014-12-12
wangEditor編輯器失去焦點(diǎn)后仍然可以在原位置插入圖片分析
本文給大家?guī)淼氖且豢罘浅２诲e(cuò)的富文本編輯器WangEditor，他最大的特點(diǎn)是它在ie6,7,8上都可以做到失去焦點(diǎn)后仍然可以在原位置插入圖片，而且代碼量很少，下面我們就來分析下他是如何實(shí)現(xiàn)的呢2015-05-05
下面小編就為大家?guī)硪黄獁indow.open打開窗口被攔截的快速解決方法。覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08