js判斷對象是否為空的幾種方法

1. 使用JSON.stringify()將對象轉換為json字符串

這個方法比較討巧，也是最容易想到的。我們都知道JSON.stringify()的作用是將Javascript對象轉換為JSON字符串。所以，可以通過該方法判斷對象是否為空：

const obj = {}
const obj2 = new Object()

console.log(JSON.stringify(obj) === '{}')  // true
console.log(JSON.stringify(obj2) === '{}')  // true

注意：

• • 該方法有個缺點，JSON.stringify()只能序列化對象的可枚舉的自有屬性，即如果有屬性是不可枚舉或繼承屬性的話，結果也是true 

const obj = {}
​
// 在原型上添加一個可枚舉屬性
Object.prototype.name = 'Jack'
​
console.log(JSON.stringify(obj) === '{}')  // true
​
// 在obj對象上添加一個不可枚舉屬性
Object.defineProperty(obj, 'age', {
    value: 18,
    enumerable: false
})
console.log(JSON.stringify(obj) === '{}')  // true

擴展：

在實際開發項目中，我覺得JSON.stringify()的使用場景還是挺多的，比如：

• • 使用 JSON.stringify() / JSON.parse() 結合 localStorage / sessionStorage 實現對象的緩存存取；

  • 實現對象的深拷貝（注意：若對象中包含時間對象、函數、undefined等該方法存在的問題）。

  • 更多內容請移步 MDN

 

2. for…in循環

使用for...in循環遍歷對象除Symbol以外的所有可枚舉屬性，當對象有屬性存在返回false， 否則返回true。

const obj = {}
​
function isObjectEmpty(obj){
    for(var key in obj){
        return false
    }
    return true
}
console.log(isObjectEmpty(obj)) // true

在實際開發工作中，有時需要只考慮對象自身的屬性，而不是繼承來的，這時可以配合Object.getOwnPropertyNames() 或 Object.hasOwnProperty() 來進行過濾。

function isObjectEmpty (obj) {
    for (let key in obj) {
        if(obj.hasOwnProperty(key)) return false
    }
    return true
}

 

3. Object.getOwnPropertyNames()

Object.getOwnPropertyNames() 方法會返回該對象所有可枚舉和不可枚舉屬性的屬性名（不含Symbol屬性）組成的數組。然后再通過判斷返回的數組長度是否為零，如果為零的話就是空對象。

const obj = {}
console.log(Object.getOwnPropertyNames(obj).length === 0)  // true

注意：該方法對於不可枚舉的屬性也能檢測出來。

Object.defineProperty(obj, 'age', {
    value: 18,
    enumerable: false
})
console.log(Object.getOwnPropertyNames(obj).length === 0)  // false

 

4. Object.keys()

Object.keys() 是 ES5 新增的一個對象方法，該方法返回一個數組，包含指定對象自有的可枚舉屬性（不含繼承的和Symbol屬性）。用此方法只需要判斷返回的數組長度是否為零，如果為零的話就是空對象。

const obj = {}
console.log(Object.keys(obj).length === 0)  //true
​
Object.prototype.name = 'Jack'
Object.defineProperty(obj, 'age', {
    value: 18,
    enumerable: false
})
​
console.log(Object.keys(obj).length === 0)  //true

 

5. 使用外部庫

有很多外部的庫也可以用來檢查空對象。並且，它們大多數對舊的瀏覽器有很好的支持。

• jQuery 中的 isEmptyObject 方法

  jQuery.isEmptyObject({})  // true

• Lodash的 isEmpty 方法

  _.isEmpty({})  // true

使用該方法的缺點就是需要安裝額外的庫。所以，根據開發情況選擇適合的就好。