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

Posted on by

前言

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

在實際工作中，在寫業務代碼時經常需要判斷一個對象是否具有某種屬性，這是業務代碼中出現頻率很高的判斷邏輯。在此之前不管你掌握瞭多少種判斷方法，如果你耐心地看完這篇文章你至少能學會5種方法，這會讓你在以後的工作中遊刃有餘。

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

5種方法

1. Reflect.has()方法

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

如下：

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

執行結果如下：

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

如下：

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

執行結果如下：

2. in操作符

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

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

執行結果如下：

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

3. Object.prototype.hasOwnPerporty()方法

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

如下：

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

執行結果如下：

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

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

如下：

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

執行結果如下：

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

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

執行結果如下：

造成這種問題的原因是由於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()的方法。根據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()的區別：因為實例的hasOwnProperty方法是從Object的原型上拿到的，如果使用Object.create(null)的方式創建一個對象那麼就拿不到hasOwnProperty這個方法，而hasOwn作為Object的靜態方法是可以直接通過Object來進行調用。

如下：

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

從上面的代碼結果可以看到，Object.hasOwn()方法是可以解決上面所有出現的問題的。但是它是ES2022提出的，所以還得看看它的兼容性。

如下：

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

到此這篇關於Javascript中判斷對象是否具有屬性的5種方法分享的文章就介紹到這瞭,更多相關Javascript判斷對象方法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：