欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript中判斷對(duì)象是否具有屬性的5種方法分享

 更新時(shí)間:2022年08月19日 11:03:15   作者:小黑豆豆???????  
這篇文章主要介紹了Javascript中判斷對(duì)象是否具有屬性的5種方法分享,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下

前言

最近閑下來(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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論