Javascript中判斷對(duì)象是否具有屬性的5種方法分享
前言
最近閑下來(lái)打算把8月的更文活動(dòng)搞一搞了,之前很長(zhǎng)一段時(shí)間沒(méi)有連續(xù)更文主要是工作時(shí)間有點(diǎn)吃緊的緣故。所以這一有時(shí)間就來(lái)繼續(xù)寫文章了。這次要分享的主題是關(guān)于提升js
編碼效率的方法。
在實(shí)際工作中,在寫業(yè)務(wù)代碼時(shí)經(jīng)常需要判斷一個(gè)對(duì)象是否具有某種屬性,這是業(yè)務(wù)代碼中出現(xiàn)頻率很高的判斷邏輯。在此之前不管你掌握了多少種判斷方法,如果你耐心地看完這篇文章你至少能學(xué)會(huì)5
種方法,這會(huì)讓你在以后的工作中游刃有余。
話不多說(shuō),直接給你展示判斷對(duì)象是否具有屬性的5
種方法,請(qǐng)往下看→
5種方法
1. Reflect.has()方法
Reflect.has()
方法用于檢查一個(gè)對(duì)象是否擁有某個(gè)屬性中。
如下:
Reflect.has({x: 0}, "x"); // true Reflect.has({x: 0}, "y"); // false
執(zhí)行結(jié)果如下:
如果該屬性存在于原型鏈中,也會(huì)返回true
。
如下:
Reflect.has({x: 0}, "toString");
執(zhí)行結(jié)果如下:
2. in操作符
in
運(yùn)算符用于檢查對(duì)象是否包含某個(gè)屬性,如果包含就返回true
,否則返回 false
。它的作用和Reflect.has()
方法相同。
const obj = {p: 1}; 'p' in obj; // true 'toString' in obj; // true
執(zhí)行結(jié)果如下:
所以,從上可以看出in
操作符和Reflect.has()
方法有一個(gè)共同的問(wèn)題,那就是如果屬性來(lái)自對(duì)象的原型,它會(huì)返回true
。那如何解決這個(gè)問(wèn)題呢?請(qǐng)接著往下看→
3. Object.prototype.hasOwnPerporty()方法
針對(duì)in
操作符和Reflect.has()
方法上面的出現(xiàn)的問(wèn)題,就可以使用對(duì)象的hasOwnProperty()
方法來(lái)判斷,判斷'toString'
是否為對(duì)象自身的屬性。
如下:
const obj = {p: 1}; console.log(obj.hasOwnProperty('toString')); // false
執(zhí)行結(jié)果如下:
hasOwnProperty()
方法返回一個(gè)布爾值,指示對(duì)象是否具有指定具有指定的屬性(而不是繼承它)。它可以正確地區(qū)分對(duì)象本身的屬性和其原型的屬性。
但是這種判斷方法也有問(wèn)題,那就是如果對(duì)象是使用Object.create(null)
方式創(chuàng)建的,那么就不能使用hasOwnProperty()
方法進(jìn)行判斷了。
如下:
var obj = Object.create(null); obj.p = 1; obj.hasOwnProperty('p'); // 報(bào)錯(cuò)
執(zhí)行結(jié)果如下:
還有就是如果將hasOwnProperty()
作為對(duì)象的一個(gè)屬性,這樣也無(wú)法使用hasOwnProperty()
方法判斷屬性是否來(lái)自原型鏈了。如下:
var obj = { p: 1, hasOwnProperty: function () { return false; } } obj.hasOwnProperty('p'); // 始終返回false
執(zhí)行結(jié)果如下:
造成這種問(wèn)題的原因是由于javascript
沒(méi)有將hasOwnProperty
作為一個(gè)敏感詞,所以這樣就可以為對(duì)象聲明一個(gè)hasOwnProperty
的屬性,從而導(dǎo)致上述問(wèn)題。
那如果要解決這個(gè)問(wèn)題,該如何操作呢?那還得接著往下看→
4. Object.prototype.hasOwnPerporty.call()方法
如果要解決上面的問(wèn)題,就需要使用原型鏈上真正的hasOwnProperty
方法了。
如下:
即使用Object.prototype.hasOwnPerporty.call()
方法可以解決上面的問(wèn)題,也可以這樣來(lái)寫。如下:
Object.prototype.hasOwnPerporty.call(obj, 'p'); // true 或 ({}).hasOwnProperty.call(obj, 'p'); // true
5. Object.hasOwn()方法
Object.hasOwn()
方法是ES2022
新提出的,用于替代Object.prototype.hasOwnProperty()
的方法。根據(jù)MDN文檔中的介紹:如果指定的對(duì)象具有作為其自身屬性的指定屬性,則hasOwn()
方法返回true
;如果該屬性是繼承的或不存在,則該方法返回false
。
使用方法如下:
const object1 = {prop: 'exists'}; console.log(Object.hasOwn(object1, 'prop')); // true console.log(Object.hasOwn(object1, 'toString'));// false
其他示例如下:
const example = {}; Object.hasOwn(example, 'prop'); // false - 'prop' has not been defined example.prop = 'exists'; Object.hasOwn(example, 'prop'); // true - 'prop' has been defined example.prop = null; Object.hasOwn(example, 'prop'); // true - own property exists with value of null example.prop = undefined; Object.hasOwn(example, 'prop'); // true - own property exists with value of undefined
Object.hasOwn()
與Object.hasOwnPeoperty()
的區(qū)別:因?yàn)閷?shí)例的hasOwnProperty
方法是從Object
的原型上拿到的,如果使用Object.create(null)
的方式創(chuàng)建一個(gè)對(duì)象那么就拿不到hasOwnProperty
這個(gè)方法,而hasOwn
作為Object
的靜態(tài)方法是可以直接通過(guò)Object
來(lái)進(jìn)行調(diào)用。
如下:
const obj1 = Object.create(null); obj1.name = '111'; console.log(obj1.hasOwnProperty('name')); // 報(bào)錯(cuò) const obj2 = Object.create(null); obj2.name = '222'; console.log(Object.hasOwn(obj2, 'name')); // true const obj3 = { p: 1, hasOwnProperty: function () { return false } } console.log(Object.hasOwn(obj3, 'p')); // true
從上面的代碼結(jié)果可以看到,Object.hasOwn()
方法是可以解決上面所有出現(xiàn)的問(wèn)題的。但是它是ES2022
提出的,所以還得看看它的兼容性。
如下:
可以看到,瀏覽器對(duì)它的支持還是挺友好的,所以大家是可以放心用的。
到此這篇關(guān)于Javascript中判斷對(duì)象是否具有屬性的5種方法分享的文章就介紹到這了,更多相關(guān)Javascript判斷對(duì)象方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 獲得Javascript對(duì)象屬性個(gè)數(shù)的示例代碼
- 詳解js對(duì)象中屬性的兩種類型之?dāng)?shù)據(jù)屬性和訪問(wèn)器屬性
- js數(shù)組對(duì)象里面如何獲取某個(gè)屬性值相等的對(duì)象
- JS如何刪除對(duì)象中的某一屬性(delete)
- 你必須了解的JavaScript中的屬性描述對(duì)象詳解(下)
- 你必須了解的JavaScript中的屬性描述對(duì)象詳解(上)
- js刪除對(duì)象屬性的多種方法舉例
- js 如何刪除對(duì)象里的某個(gè)屬性
- JS 實(shí)現(xiàn)獲取對(duì)象屬性個(gè)數(shù)的方法小結(jié)
相關(guān)文章
實(shí)例詳解JSON取值(key是中文或者數(shù)字)方式
本文通過(guò)實(shí)例詳解JSON取值(key是中文或者數(shù)字)方式,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-08-08JavaScript NodeTree導(dǎo)航欄(菜單項(xiàng)JSON類型/自制)
利用閑暇時(shí)間自己做了個(gè)JavaScript NodeTree,網(wǎng)上有很多類似的效果,本例主要是練練手,鞏固下知識(shí),感興趣的朋友可以了解下,或許對(duì)你學(xué)習(xí)NodeTree導(dǎo)航欄有所幫助,認(rèn)為好的就分享嘍2013-02-02JavaScript的類型轉(zhuǎn)換(字符轉(zhuǎn)數(shù)字 數(shù)字轉(zhuǎn)字符)
不能把JavaScript中的類型轉(zhuǎn)換看作為強(qiáng)制類型轉(zhuǎn)換。2010-08-08Next.js項(xiàng)目實(shí)戰(zhàn)踩坑指南(筆記)
這篇文章主要介紹了Next.js項(xiàng)目實(shí)戰(zhàn)踩坑指南(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11基于Web?Components實(shí)現(xiàn)一個(gè)日歷原生組件
這篇文章主要為大家詳細(xì)介紹了如何利用Web?Components實(shí)現(xiàn)一個(gè)簡(jiǎn)單的日歷原生組件,文中的示例代碼講解詳細(xì),需要的小伙伴可以了解一下2023-07-07JS簡(jiǎn)單實(shí)現(xiàn)移動(dòng)端日歷功能示例
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)移動(dòng)端日歷功能的方法,涉及javascript針對(duì)日期與時(shí)間的操作及顯示相關(guān)技巧,需要的朋友可以參考下2016-12-12JavaScript實(shí)現(xiàn)表單注冊(cè)、表單驗(yàn)證、運(yùn)算符功能
在本篇文章里我們給大家整理了關(guān)于JavaScript中表單注冊(cè)、表單驗(yàn)證、運(yùn)算符的代碼示例,有興趣的朋友們可以測(cè)試學(xué)習(xí)下。2018-10-10