如何在JavaScript中檢查對像是否為空

本文將快速介紹如何在JavaScript 中檢查對像是否為空。

在日常JavaScript 開發中，您可能需要檢查對像是否為空。如果您曾經做過這件事，您可能知道沒有單一的直接解決方案。但是，您可以使用不同的技術來創建適合您自己用例的自定義解決方案。除此之外，如果您在項目中使用JavaScript 實用程序庫，則該庫可能已經提供了一種內置方法來檢查對像是否為空。

現代方法(ES5 )

在本節中，我們將討論您可以在支持ES5 版本的現代瀏覽器中使用的不同方法。

1. Object.keys()方法返回給定對象的枚舉屬性名稱的數組。因此，我們可以通過計算此數組的長度來檢查對像是否具有任何屬性。

讓我們來看下面的例子。

 function isEmptyObject(obj) {
    return Object.keys(obj).length === 0;
}

console.log(isEmptyObject({})); // 輸出：true

var bar = {"foo": "1"};
console.log(Object.keys(bar).length); // 輸出：1
console.log(isEmptyObject(bar)); // 輸出：false

如上例所示，附加的foo屬性，因此isEmptyObject函數將返回具有不同值的isEmptyObject函數。

請注意， isEmptyObject將對RegExp 對象返回true 。

 console.log(isEmptyObject(Date.now())); //輸出：true
console.log(isEmptyObject(new RegExp())); //輸出：true

此外，請小心，因為使用未定義值調用此方法。它們會導致異常。稍後，我們將創建一個防彈解決方案，該解決方案不會在空輸入時失敗。

 console.log(isEmptyObject(null)); //拋出Uncaught TypeError: Cannot convert undefined or null to object

2. Object.getOwnPropertyNames()方法返回給定對象的所有屬性的數組。儘管它可能看起來與Object.keys()方法相同，但Object.getOwnPropertyNames()方法還會考慮不可枚舉的屬性，而Object.keys()會錯過某些聲明為不可枚舉的屬性。

讓我們來看下面的例子。

 function isEmptyObject(obj) {
    return Object.getOwnPropertyNames(obj).length === 0;
}

console.log(isEmptyObject({})); // 輸出：true

var bar = {"foo": "1"};
console.log(Object.getOwnPropertyNames(bar).length); // 輸出：1
console.log(isEmptyObject(bar)); // 輸出：false

如您所見，使用Object.keys()測試空值。

但是，邊緣情況略有不同—— Date ，但對於null或JSON.stringify將返回false 。

使用{}檢查給定對像是否為空。

讓我們來看下面的例子。

 function isEmptyObject(obj){
    return JSON.stringify(obj) === '{}';
}

console.log(isEmptyObject({})); // 輸出：true

var bar = {"foo":"1"};
console.log(JSON.stringify(bar)); // 輸出：{"foo":"1"}
console.log(isEmptyObject(bar)); // 輸出：false

同樣，邊緣情況略有不同。 “1651283138454” 用於RegExp。因此使用Object.getOwnPropertyNames方法！

 console.log(isEmptyObject(Date.now())); //輸出：false
console.log(isEmptyObject(new RegExp())); //輸出：true

另一個變化是false ，這可能不是您期望的。

 console.log(isEmptyObject(null)); //輸出：false

4. Object.entries()方法返回一個數組的數組，每個元素都是一個對象屬性的鍵值對數組。

讓我們來看下面的例子來了解它的確切工作原理。

 function isEmptyObject(obj) {
    return Object.entries(obj).length === 0;
}

console.log(isEmptyObject({})); // 輸出：true

var bar = {"foo":"1"};
console.log(Object.entries(bar)); // 輸出：[['foo', '1']]
console.log(Object.entries(bar).length); // 輸出：1
console.log(isEmptyObject(bar)); // 輸出：false

如您所見， Object.keys()方法將對我們的RegExp 對象邊緣案例示例給出相同的結果。對於未定義的輸入，它也會拋出異常。

 console.log(isEmptyObject(Date.now())); //輸出：true
console.log(isEmptyObject(new RegExp())); //輸出：true

防彈解決方案

上述簡單解決方案的一個問題是它們對邊緣情況給出了不一致的結果：特殊對象（如Date）、未定義的值或基元（如整數）。這是一個簡單但更可靠的解決方案。

 function isEmptyObject(value) {
  const type = typeof value
  const isObject = value != null && type === 'object'
  return isObject && Object.keys(value).length === 0;
}

此方法完全按照其名稱執行：當且僅當輸入值既是對象又是空對象時，它才返回true 。它將與null和undefined值一起工作——返回false ，因為它們不是對象。對於像RegExp 這樣的特殊對象，它將返回true ，因為它們沒有定義任何特殊鍵。它還將對空數組返回true ，對非空數組返回false 。

ES5 之前的方案

在本節中，我們將討論一種即使在較舊的瀏覽器中也能工作的解決方案。在JavaScript ES5 時代之前，經常使用這種方法，那時沒有內置方法可用於檢查對像是否為空。

讓我們來看下面的例子。

 function isEmptyObject(obj) {
    for (var property in obj) {
        if (obj.hasOwnProperty(property)) {
            return false;
        }
    }

    return true;
}

console.log(isEmptyObject({})); // 輸出：true
console.log(isEmptyObject({"foo":"1"})); // 輸出：false

在上面的例子中，我們構建了一個自定義函數，您可以調用它來檢查對像是否為空。它接受一個參數，您需要傳遞要測試的對象。在FALSE 中，否則我們將使用不同的值返回isEmptyObject函數。如上例所示，我們使用不同的值調用它並使用isEmptyObject方法記錄輸出，這允許您檢查對像是否為空。

讓我們快速瀏覽下面的例子。

 jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({"foo":"1"}); // false

如您所見，使用_.isEmpty()非常簡單。

結論

在本文中，我們討論了在JavaScript 中檢查對像是否為空的幾種不同方法。查看我們關於JavaScript 編程的其他教程！

此帖子已更新，其中包含Neema Muganga 的貢獻。

以上是如何在JavaScript中檢查對像是否為空的詳細內容。更多資訊請關注PHP中文網其他相關文章！