盤點JS判斷空物件的幾大方法

---

theme: channing-cyan

「這是我參與2022首次更文挑戰的第17天，活動詳情檢視：2022首次更文挑戰」

知識準備

在盤點JS判空方法之前我們先來了解下面的三個方法。

Object.keys

Object.keys()方法是以物件為引數，返回一個包含該物件內所匹配的屬性和方法的陣列

var obj = {    name: "cxy",    age: "19" };  var objArray = Object.getOwnPropertyNames(obj);  console.log(objArray)

可以看到objArray為返回值，且返回值為以物件內的屬性為內容的陣列

Object.getOwnPropertyNames

Object.getOwnPropertyNames()方法同樣是也是以物件為引數，返回一個包含該物件內所匹配的屬性和方法的陣列

大家在這裡會發出疑問，這兩個有啥區別？Object.getOwnPropertyNames()可以返回所有的屬性，而Object.keys()只能返回可列舉屬性，誒？到這裡大家又疑惑了可列舉屬性又是個啥？不要著急，我來解釋一下什麼叫可列舉屬性

可列舉屬性

可列舉或者不可列舉屬性是物件內部通過可列舉標誌enumerable來進行區分的，在預設情況下，我們obj.name = "cxy"為物件新增了一個屬性後，其可列舉標誌enumerable為ture，而當其值為false的時候它是不可列舉的，當我們對物件進行for,Object.keys(),JSON.stringify()的時候不可列舉屬性是找不出來的，我們可以理解為不可列舉屬性是隱身的

現在我們拿上面的Object.getOwnPropertyNames和Object.keys()進行實戰舉例，我們通過defineProperty來為物件新增age屬性，因為該方法可以設定列舉標誌，這裡設定為false，可以看到下面兩個不同的返回結果

var stuObj = {    name: "cxy" } Object.defineProperty(stuObj, 'age', {  value: "18",  enumerable: false }); console.log(Object.keys(stuObj)) console.log(Object.getOwnPropertyNames(stuObj))

hasOwnProperty

hasOwnProperty()是用來判斷某物件是否含有某屬性的，其引數為屬性名

var stuObj = {    name: "cxy" }  console.log(stuObj.hasOwnProperty('name'))

但是這裡要注意一個問題就是，hasOwnProperty()判斷繼承屬性的時候會返回false，繼承屬性即物件從原型物件上繼承的屬性，比如說toString

盤點判空方法

JSON.stringify判空

這種方式是比較簡單的了，使用JSON.stringify將物件轉換為字串，再通過等於判斷即可得到物件是否為空的布林值

let obj = {    name: "cxy" } console.log(JSON.stringify(obj) == '{}')

for in判空

使用for in的話可以當觸發迴圈的時候返回false沒有觸發迴圈的時候代表物件為空返回ture

let forNull = (items) => {    for (let item in items) {        return false   }    return true }

Object.getOwnPropertyNames判空

這裡使用了上文提及的Object.getOwnPropertyNames，將返回的陣列的length作為判斷依據。

let stuArray = Object.getOwnPropertyNames(obj) console.log(stuArray.length === 0)

Object.keys()判空

和上個方法一樣，使用陣列作為判斷依據

let stuArray = Object.getOwnPropertyNames(obj) console.log(stuArray.length === 0)

hasOwnProperty判空

使用hasOwnProperty是使用for迴圈將元素進行判斷如果含有則返回false說明不為空，反之則為空

let forNull = (items) => {    for (let item in items) {        if(items.hasOwnProperty(item)){            return false       }   }    return true }