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

更新時間：2022年01月24日 12:35:24 作者：半夏的故事

編寫JS的過程中,我們經(jīng)常用到對象,也會用到對象中的屬性,下面這篇文章主要給大家介紹了關(guān)于JS判斷對象屬性是否存在的五種方案,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

背景

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

Object.hasOwn()，主要目標(biāo)是用來替代Object.prototype.hasOwnProperty()。目前本提案已經(jīng)進去第四階段，預(yù)計2022年納入標(biāo)準(zhǔn)。

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

檢查屬性是否存在

in

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

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

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

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

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

> 'toString' in {}
true

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

Reflect.has()

Reflect是在ES2015新增的一個內(nèi)置對象，提供了與Javascript對象交互的方法。

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

用法：Reflect.has(obj, propName)

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

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

hasOwnProperty

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

通過對象字面量或者構(gòu)造函數(shù)法創(chuàng)建的對象都從Object.prototype繼承了hasOwnProperty()。

構(gòu)造函數(shù)法

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);，接受兩個參數(shù)。請注意我們這里用到了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