在 JavaScript 中如何檢查對象為空

下面的代碼片段，用于檢查對象是否為空。對于較新的瀏覽器，你可以使用 ES6 的 “Object.keys”。?對于較舊的瀏覽器，可以安裝Lodash庫并使用其“ isEmpty”方法。

const?empty?=?{};

/*?-------------------------
??較新的瀏覽器
----------------------------*/
Object.keys(empty).length?===?0?&&?empty.constructor?===?Object
//?true

/*?-------------------------
??老版本的瀏覽器可以使用?Lodash
----------------------------*/
_.isEmpty(empty)
//?true

什么是原生 JavaScript

原生 JavaScript 指的是不使用框架或庫。它只是常規(guī)的普通 JavaScript，沒有使用Lodash或jQuery之類的庫。

A.在較新的瀏覽器中檢查空對象

我們可以使用內(nèi)置的Object.keys方法檢查空對象。

const?empty?=?{};

Object.keys(empty).length?===?0?&&?empty.constructor?===?object;

為什么我們需要額外的constructor 檢查？

你可能想知道為什么我們需要對 constructor 進行檢查。它是為了覆蓋包裝器實例。在JavaScript中，我們有9個內(nèi)置的構(gòu)造函數(shù)。

new?Object();

new?String();
new?Number();
new?Boolean();
new?Array();
new?RegExp();
new?Function();
new?Date();

這里，我們可以使用new Object()創(chuàng)建一個空對象。

注：永遠(yuǎn)不要使用構(gòu)造函數(shù)創(chuàng)建對象。這被認(rèn)為是不好的做法，請參閱 Airbnb Style Guide 和 ESLint。

const?obj?=?new?Object();

Object.keys(obj).length?===?0;?//?true

因此，僅使用Object.keys，當(dāng)對象為空時，它的確會返回true。但是，當(dāng)我們使用其他構(gòu)造函數(shù)創(chuàng)建新的對象實例時會發(fā)生什么。

function?badEmptyCheck(value)?{
??return?Object.keys(value).length?===?0;
}

badEmptyCheck(new?String());????//?true??
badEmptyCheck(new?Number());????//?true??
badEmptyCheck(new?Boolean());???//?true??
badEmptyCheck(new?Array());?????//?true??
badEmptyCheck(new?RegExp());????//?true??
badEmptyCheck(new?Function());??//?true??
badEmptyCheck(new?Date());??????//?true??

通過檢查 constructor 解決誤報

通過添加構(gòu)造函數(shù)檢查來糾正這個錯誤。

function?goodEmptyCheck(value)?{
??Object.keys(value).length?===?0
????&&?value.constructor?===?Object;?//???constructor?check
}

goodEmptyCheck(new?String());???//?false??
goodEmptyCheck(new?Number());???//?false??
goodEmptyCheck(new?Boolean());??//?false??
goodEmptyCheck(new?Array());????//?false??
goodEmptyCheck(new?RegExp());???//?false??
goodEmptyCheck(new?Function());?//?false??
goodEmptyCheck(new?Date());?????//?false??

Nice，干的漂亮 ?

對其他值進行空檢查

接著，我們用一些值上測試我們的方法，看看我們會得到了什么 ?

function?isEmptyObject(value)?{
??return?Object.keys(value).length?===?0?&&?value.constructor?===?Object;
}

到目前為止看起來不錯，對于非對象它返回 false。

isEmptyObject(100)??//?false
isEmptyObject(true)?//?false
isEmptyObject([])???//?false

?但是要當(dāng)心！下面這些值會引發(fā)錯誤。

//?TypeError:?Cannot?covert?undefined?or?null?to?object
isEmptyObject(undefined);
isEmptyObject(null);

改進對null和undefined的空檢查

如果不想讓它拋出TypeError，可以添加額外的檢查

function?isEmptyObject(value)?{
??return?value?&&?Object.keys(value).length?===?0?&&?value.constructor?===?Object;
}

B.舊版本瀏覽器中的空對象檢查

如果你需要支持較舊的瀏覽器怎么辦？大家都知道，當(dāng)說舊的瀏覽器時，指的是 IE，我們有2個選擇，使用原生或利用庫。

使用 JavaScript 檢查空對象

原生的 JS 并不那么簡潔，但判斷用來空對象是沒問題的。

function?isObjectEmpty(value)?{
??return?(
????Object.prototype.toString.call(value)?===?'[object?Object]'?&&?JSON.stringify(value)?===?'{}'
??);
}

對于對象，它返回true。

isObjectEmpty({});???????????//?true??
isObjectEmpty(new?Object());?//?true??

其它類型的構(gòu)造函數(shù)也能正常判斷 ?

isObjectEmpty(new?String());???//?false??
isObjectEmpty(new?Number());???//?false??
isObjectEmpty(new?Boolean());??//?false??
isObjectEmpty(new?Array());????//?false??
isObjectEmpty(new?RegExp());???//?false??
isObjectEmpty(new?Function());?//?false??
isObjectEmpty(new?Date());?????//?false??

傳入 null 和 undefined 也不會報 TypeError。

isObjectEmpty(null);??????//?false
isObjectEmpty(undefined);?//?false

使用外部庫檢查空對象

有大量的外部庫可以用來檢查空對象。而且大多數(shù)都對舊瀏覽器有很好的支持?

Lodash

_.isEmpty({});
//?true

Underscore

_.isEmpty({});
//?true

jQuery

jQuery.isEmptyObject({});
//?true

原生 ?VS 庫

答案是看情況而定!我非常喜歡盡可能地簡化程序，因為我不喜歡外部庫的開銷。另外，對于較小的應(yīng)用程序，我懶得設(shè)置外部庫。但如果你的應(yīng)用程序已經(jīng)安裝了一個外部庫，那么就繼續(xù)使用它。你會比任何人都更了解你的應(yīng)用程序。所以選擇最適合你情況的方法

人才們的 【三連】 就是小智不斷分享的最大動力，如果本篇博客有任何錯誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。

作者：Samantha Ming ?譯者：前端小智 ?來源：medium

原文：https://www.samanthaming.com/tidbits/94-how-to-check-if-object-is-empty/#what-is-javascript