在 JavaScript 中如何檢查對(duì)象為空

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

const?empty?=?{};

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

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

什么是原生 JavaScript

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

A.在較新的瀏覽器中檢查空對(duì)象

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

const?empty?=?{};

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

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

你可能想知道為什么我們需要對(duì) constructor 進(jìn)行檢查。它是為了覆蓋包裝器實(shí)例。在JavaScript中，我們有9個(gè)內(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)建一個(gè)空對(duì)象。

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

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

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

因此，僅使用Object.keys，當(dāng)對(duì)象為空時(shí)，它的確會(huì)返回true。但是，當(dāng)我們使用其他構(gòu)造函數(shù)創(chuàng)建新的對(duì)象實(shí)例時(shí)會(huì)發(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 解決誤報(bào)

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

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，干的漂亮 ?

對(duì)其他值進(jìn)行空檢查

接著，我們用一些值上測(cè)試我們的方法，看看我們會(huì)得到了什么 ?

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

到目前為止看起來不錯(cuò)，對(duì)于非對(duì)象它返回 false。

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

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

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

改進(jìn)對(duì)null和undefined的空檢查

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

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

B.舊版本瀏覽器中的空對(duì)象檢查

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

使用 JavaScript 檢查空對(duì)象

原生的 JS 并不那么簡(jiǎn)潔，但判斷用來空對(duì)象是沒問題的。

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

對(duì)于對(duì)象，它返回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 也不會(huì)報(bào) TypeError。

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

使用外部庫(kù)檢查空對(duì)象

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

Lodash

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

Underscore

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

jQuery

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

原生 ?VS 庫(kù)

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

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

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

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