JS判斷對象屬性是否存在的方法是什么

這篇文章主要介紹了JS判斷對象屬性是否存在的方法是什么的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇JS判斷對象屬性是否存在的方法是什么文章都會有所收獲，下面我們一起來看看吧。

背景

在這篇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判斷對象屬性是否存在的方法是什么”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。