JavaScript 判斷對(duì)象中是否有某屬性的常用方法
判斷對(duì)象中是否有某屬性的常見方式總結(jié)，不同的場(chǎng)景要使用不同的方式。
一、點(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 = undefined
test.un //undefined 不能用在屬性值存在，但可能為 undefined的場(chǎng)景
所以，我們可以根據(jù) Obj.x !== undefined 的返回值 來判斷Obj是否有x屬性。
這種方式很簡(jiǎn)單方便，局限性就是：不能用在x的屬性值存在，但可能為 undefined的場(chǎng)景。 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。適用于只判斷自身屬性的場(chǎng)景。
總結(jié)
三種方式各有優(yōu)缺點(diǎn)，不同的場(chǎng)景使用不同的方式，有時(shí)還需要結(jié)合使用，比如遍歷自身屬性的時(shí)候，就會(huì)把 for ··· in ···和 hasOwnProperty()結(jié)合使用。
以上所述是小編給大家介紹的JavaScript 判斷對(duì)象中是否有某屬性的常用方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
js獲取form表單所有數(shù)據(jù)的簡(jiǎn)單方法
下面小編就為大家?guī)硪黄猨s獲取form表單所有數(shù)據(jù)的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
prototype與jquery下Ajax實(shí)現(xiàn)的差別
Ajax技術(shù)在web中應(yīng)用的相當(dāng)廣泛,最近項(xiàng)目需要用到Ajax，由于主站所用的是Jquey，而某個(gè)欄目的開發(fā)用的是prototype，這樣一來就必須對(duì)JS代碼做調(diào)整了。2009-09-09
本文主要分享了js+div+css下拉導(dǎo)航菜單的完整代碼?？芍苯訌?fù)制保存到HTML文件就可以體驗(yàn)效果。下面跟著小編一起來看下吧2016-12-12
這篇文章主要介紹了BootStrap表單寬度設(shè)置方法,僅僅是小編日常遇到問題記錄，寫的不好還請(qǐng)見諒，需要的朋友可以參考下2017-03-03
堆疊柱狀圖將每個(gè)柱子進(jìn)行分割以顯示相同類型下各個(gè)數(shù)據(jù)的大小情況。可以形象得展示一個(gè)大分類包含的每個(gè)小分類的數(shù)據(jù)，以及各個(gè)小分類的占比，顯示的是單個(gè)項(xiàng)目與整體之間的關(guān)系。本文將利用JavaScript實(shí)現(xiàn)堆疊柱狀圖的繪制，需要的可以參考一下2022-03-03
JavaScript 開發(fā)中規(guī)范性的一點(diǎn)感想
在開發(fā)中通用的幾個(gè)方法，我們把它們放到utility目錄下或者utility.js中；所有的提示信息和報(bào)錯(cuò)信息統(tǒng)一放置在一起。看起來都是小小的幾步，卻能讓咱們開發(fā)的代碼同事讀起來更順暢，下個(gè)項(xiàng)目中也能用上。2009-06-06
JavaScript中eval和with語句如何影響作用域鏈的深度探索
這篇文章主要為大家介紹了JavaScript中eval和with語句如何影響作用域鏈的深度探索，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
javascript自定義in_array()函數(shù)實(shí)現(xiàn)方法
這篇文章主要介紹了javascript自定義in_array()函數(shù)實(shí)現(xiàn)方法,涉及javascript數(shù)組的遍歷與查找相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
前端 javascript 實(shí)現(xiàn)文件下載的示例
這篇文章主要介紹了前端 javascript 實(shí)現(xiàn)文件下載的示例2020-11-11
JS數(shù)組是一種特殊的對(duì)象,JS沒有真正的數(shù)組,只是用對(duì)象模擬數(shù)組,下面這篇文章主要給大家介紹了關(guān)于JS在數(shù)組頭部添加元素的3種方法,需要的朋友可以參考下2023-10-10