前言

最近閑下來(lái)打算把8月的更文活動(dòng)搞一搞了，之前很長(zhǎng)一段時(shí)間沒(méi)有連續(xù)更文主要是工作時(shí)間有點(diǎn)吃緊的緣故。所以這一有時(shí)間就來(lái)繼續(xù)寫(xiě)文章了。這次要分享的主題是關(guān)于提升js編碼效率的方法。

在實(shí)際工作中，在寫(xiě)業(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)寫(xiě)。如下：

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)文章希望大家以后多多支持腳本之家！

最新評(píng)論