前言

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

在實際工作中，在寫業(yè)務(wù)代碼時經(jīng)常需要判斷一個對象是否具有某種屬性，這是業(yè)務(wù)代碼中出現(xiàn)頻率很高的判斷邏輯。在此之前不管你掌握了多少種判斷方法，如果你耐心地看完這篇文章你至少能學會5種方法，這會讓你在以后的工作中游刃有余。

話不多說，直接給你展示判斷對象是否具有屬性的5種方法，請往下看→

5種方法

1. Reflect.has()方法

Reflect.has()方法用于檢查一個對象是否擁有某個屬性中。

如下：

Reflect.has({x: 0}, "x"); // true
Reflect.has({x: 0}, "y"); // false

執(zhí)行結(jié)果如下：

如果該屬性存在于原型鏈中，也會返回true。

如下：

Reflect.has({x: 0}, "toString");

執(zhí)行結(jié)果如下：

2. in操作符

in運算符用于檢查對象是否包含某個屬性，如果包含就返回true，否則返回 false。它的作用和Reflect.has()方法相同。

const obj = {p: 1};
'p' in obj; // true
'toString' in obj; // true

執(zhí)行結(jié)果如下：

所以，從上可以看出in操作符和Reflect.has()方法有一個共同的問題，那就是如果屬性來自對象的原型，它會返回true。那如何解決這個問題呢？請接著往下看→

3. Object.prototype.hasOwnPerporty()方法

針對in操作符和Reflect.has()方法上面的出現(xiàn)的問題，就可以使用對象的hasOwnProperty()方法來判斷，判斷'toString'是否為對象自身的屬性。

如下：

const obj = {p: 1}; 
console.log(obj.hasOwnProperty('toString')); // false 

執(zhí)行結(jié)果如下：

hasOwnProperty()方法返回一個布爾值，指示對象是否具有指定具有指定的屬性（而不是繼承它）。它可以正確地區(qū)分對象本身的屬性和其原型的屬性。

但是這種判斷方法也有問題，那就是如果對象是使用Object.create(null)方式創(chuàng)建的，那么就不能使用hasOwnProperty()方法進行判斷了。

如下：

var obj = Object.create(null);
obj.p = 1;
obj.hasOwnProperty('p'); // 報錯

執(zhí)行結(jié)果如下：

還有就是如果將hasOwnProperty()作為對象的一個屬性，這樣也無法使用hasOwnProperty()方法判斷屬性是否來自原型鏈了。如下：

var obj = {
    p: 1,
    hasOwnProperty: function () {
        return false;
    }
}
obj.hasOwnProperty('p'); // 始終返回false

執(zhí)行結(jié)果如下：

造成這種問題的原因是由于javascript沒有將hasOwnProperty作為一個敏感詞，所以這樣就可以為對象聲明一個hasOwnProperty的屬性，從而導致上述問題。

那如果要解決這個問題，該如何操作呢？那還得接著往下看→

4. Object.prototype.hasOwnPerporty.call()方法

如果要解決上面的問題，就需要使用原型鏈上真正的hasOwnProperty方法了。

如下：

即使用Object.prototype.hasOwnPerporty.call()方法可以解決上面的問題，也可以這樣來寫。如下：

Object.prototype.hasOwnPerporty.call(obj, 'p'); // true
或
({}).hasOwnProperty.call(obj, 'p'); // true

5. Object.hasOwn()方法

Object.hasOwn()方法是ES2022新提出的，用于替代Object.prototype.hasOwnProperty()的方法。根據(jù)MDN文檔中的介紹：如果指定的對象具有作為其自身屬性的指定屬性，則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ū)別：因為實例的hasOwnProperty方法是從Object的原型上拿到的，如果使用Object.create(null)的方式創(chuàng)建一個對象那么就拿不到hasOwnProperty這個方法，而hasOwn作為Object的靜態(tài)方法是可以直接通過Object來進行調(diào)用。

如下：

const obj1 = Object.create(null);
obj1.name = '111';
console.log(obj1.hasOwnProperty('name')); // 報錯

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)的問題的。但是它是ES2022提出的，所以還得看看它的兼容性。

如下：

可以看到，瀏覽器對它的支持還是挺友好的，所以大家是可以放心用的。

到此這篇關(guān)于Javascript中判斷對象是否具有屬性的5種方法分享的文章就介紹到這了,更多相關(guān)Javascript判斷對象方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論