JS判斷對象屬性是否存在的五種方案分享

Posted on by

背景

在這篇Accessible Object.prototype.hasOwnProperty() 提案中，提出瞭一個更簡單的方法來檢查對象時候具有特定的屬性-

Object.hasOwn()，主要目標是用來替代Object.prototype.hasOwnProperty()。目前本提案已經進去第四階段，預計2022年納入標準。

隨著Object.hasOwn()的加入，目前我們已經有瞭5個判斷對象屬性是否存在的方法！

檢查屬性是否存在

in

JavaScript的in操作符可以用來判斷一個屬性是否屬於一個對象，也可以用來變量一個對象的屬性

本文我們隻討論in的檢查作用

in運算符檢查對象是否具有給定名稱的屬性：

> 'name' in {name: '搞前端的半夏'}
true
> 'name' in {}
false

但是因為in會判斷繼承過來的屬性！

> 'toString' in {}
true

那是因為{}繼承瞭方法Object.prototype.toString()

Reflect.has()

Reflect是在ES2015新增的一個內置對象，提供瞭與Javascript對象交互的方法。

判斷一個對象是否存在某個屬性，和 in 運算符] 的功能完全相同。

用法：Reflect.has(obj, propName)

Reflect.has({name:"搞前端的半夏"}, "name"); // true
Reflect.has({name:"搞前端的半夏"}, "age"); // false

Reflect.has({name:"搞前端的半夏"}, "toString"); //true

hasOwnProperty

hasOwnProperty這個方法可以用來檢測一個對象是否含有特定的自身屬性，即是用來判斷一個屬性是定義在對象本身而不是繼承自原型鏈的，

通過對象字面量或者構造函數法創建的對象都從Object.prototype繼承瞭hasOwnProperty()。

構造函數法

o = new Object();
o.name = '搞前端的半夏';
o.hasOwnProperty('name');             // 返回 true
o.hasOwnProperty('toString');         // 返回 false
o.hasOwnProperty('hasOwnProperty');   // 返回 false

對象字面量

o={name:"搞前端的半夏"}
o.hasOwnProperty('name');             // 返回 true
o.hasOwnProperty('toString');         // 返回 false
o.hasOwnProperty('hasOwnProperty');   // 返回 false

缺點

不支持create

但是下面這種情況：

o =  Object.create(null)
o.hasOwnProperty('name');             // 返回 true

會直接報錯：

Uncaught TypeError: o.hasOwnProperty is not a function
    at <anonymous>:1:3

覆蓋報錯

如果一個對象有一個自己的名為 name 的屬性'hasOwnProperty'，那麼該屬性將被覆蓋Object.prototype.hasOwnProperty並且我們無法訪問它：

o={hasOwnProperty:"搞前端的半夏"}
o.hasOwnProperty('name');

直接報錯

VM123:3 Uncaught TypeError: o.hasOwnProperty is not a function
    at <anonymous>:3:3

Object.prototype.hasOwnProperty()

用法：Object.prototype.hasOwnProperty.call(obj, propName);，接受兩個參數。請註意我們這裡用到瞭call。改變this的指向。

Object.prototype.hasOwnProperty除瞭支持hasOwnProperty的相同用法，同時還解決瞭hasOwnProperty的兩個缺點。

o={hasOwnProperty:"搞前端的半夏"}
Object.prototype.hasOwnProperty.call.hasOwnProperty(o,'name'); // 返回false

ES13（ES2022）Object.hasOwn()

Object.hasOwn()，目前來看就是替代Object.prototype.hasOwnProperty.call()。

如果用Object.prototype.hasOwnProperty.call() 來封裝的話，代碼如下：

function hasOwn(obj, propName) {
  return Object.prototype.hasOwnProperty.call(obj, propName);
}
Object.hasOwn({name: '搞前端的半夏'}, 'name')  // true
Object.hasOwn({}, 'name')               //false
Object.hasOwn({}, 'toString')             //false
Object.hasOwn(Object.create(null), 'name')     //false
Object.hasOwn({hasOwnProperty: 'yes'}, 'name')  //false
Object.hasOwn({hasOwn: 'yes'}, 'name')		 //false

總結

到此這篇關於JS判斷對象屬性是否存在的五種方案的文章就介紹到這瞭,更多相關JS判斷對象屬性存在內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：