在 JavaScript 中判斷對象是否空的正確姿式

下面是一個檢查對象是否爲空的代碼片斷。對於新的瀏覽器而言，你可使用普通的 JS 和 ES6 的語法 Object.keys。可是，爲了支持舊的瀏覽器，你能夠安裝 Lodash 和使用它的 isEmpty 方法。

const empty = {};/* -------------------------
  針對新瀏覽器的普通 JS
----------------------------*/Object.keys(empty).length === 0 && empty.constructor === Object// true/* -------------------------
  針對舊瀏覽器的 lodash 語法
----------------------------*/_.isEmpty(empty)// true複製代碼

1 什麼是普通的（Vanilla）的 JavaScript？

普通的（Vanilla）不是一個新的框架或庫。它是指常規的 JavaScript，而不使用像 Lodash 或 JQuery 之類的庫。

2 在新瀏覽器中檢查空對象

咱們可使用內置的 Object.keys 方法來檢查一個空對象：

const empty = {};Object.keys(empty).length === 0 && empty.constructor === Object;複製代碼

2.1 爲何咱們須要一個額外的構造方法 constructor 檢查？

你可能會想爲何咱們須要檢查構造方法 constructor。由於，這是爲檢查了覆蓋其包裹的實例。在 JavaScript 中，咱們有 9 個內置的構造方法。

new Object();new String();new Number();new Boolean();new Array();new RegExp();new Function();new Date();複製代碼

所以，咱們可使用 new Object() 來建立一個空的對象。注意⚠️：你不該該使用這個構造方法來建立一個對象。這被認爲是很差的作法，詳細講解能夠查看 Airbnb Style Guide 和 ESLint。

const obj = new Object();Object.keys(obj).length === 0; // true複製代碼

雖然，使用 Object.keys 方法，當對象爲空的時候它確實會返回 true。可是，當咱們使用下面這些其餘的構造方法建立一個新的對象實例時會發生什麼呢？

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 ????複製代碼

能夠看到，這裏咱們獲得了不正常的結果 ????。

2.2 檢查構造方法 constructor 來避免不正常的結果

咱們須要經過添加構造方法檢查來糾正上面的例子。

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 ✅複製代碼

漂亮！咱們覆蓋了這些邊緣的例子 ????

2.3 用其餘值來測試檢查空對象方法

接下來，用一些其餘值來測試咱們的方法，而且看看這會返回什麼 ????

function isEmptyObject(value) {  return Object.keys(value).length === 0 && value.constructor === Object;
}複製代碼

目前看來很好，對於不是對象它會返回 false

isEmptyObject(100)  // falseisEmptyObject(true) // falseisEmptyObject([])   // false複製代碼

???? 可是，請注意（當心）！如下這些值將會拋出異常。

// TypeError: Cannot covert undefined or null ot objectgoodEmptyCheck(undefined)
goodEmptyCheck(null)複製代碼

2.4 針對 null 和 undefined，改良檢查空對象方法

若是你不想它拋出 TypeError 的異常，你能夠添加一個額外的檢查。

let value;
value // ???? null and undefined check
 && Object.keys(value).length === 0 && value.constructor === Object;
value = null;       // nullvalue = undefined;  // undefined複製代碼

完美，已經不會拋出錯誤了 ????

3 在舊的瀏覽器檢查空對象

若是你須要支持舊瀏覽器呢？見鬼，我在和誰開玩笑！咱們都知道當咱們說舊瀏覽器時，指的是 IE 瀏覽器 ????。這個時候，咱們有兩個選擇，咱們能夠選擇普通的（vanilla） JavaScript 或利用庫。

3.1 使用普通的 JavaScript 檢查空對象

使用普通的 JavaScript 的方式沒有那麼簡潔。可是，它確實起了做用 ????。

function isObjectEmpty(value) {  return Object.prototype.toString.call(value) === "[object Object]" && JSON.stringify(value) === "{}"}複製代碼

對於對象它會返回 true。

isObjectEmpty({});           // true ✅isObjectEmpty(new Object()); // true ✅複製代碼

很好地是，它不會被咱們的構造函數所欺騙 ????

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);      // falseisObjectEmpty(undefined); // false複製代碼

3.2 使用外部的庫（libraries）來檢查空對象

有不少外部的庫能夠用來檢查空對象。而且，它們大多數對舊的瀏覽器有很好的支持 ????

Lodash

_.isEmpty({});// true複製代碼

Underscore

_.isEmpty({});// true複製代碼

jQuery

jQuery.isEmptyObject({});// true複製代碼

4 對比普通的 JavaScript、庫

這個答案須要應狀況而定！我很是喜歡儘量地去使用普通的 JavaScript，由於我不喜歡外部庫的開銷。並且，對於小型應用，我也很是懶得去安裝額外的庫。可是，若是你的應用已經安裝了外部的庫，你能夠繼續使用它。由於，你比任何人都瞭解你的應用程序。因此，能夠選擇最合適你的狀況 ????

❤️ 愛心三連擊

寫做不易，能夠的話麻煩點個贊，這會成爲我堅持寫做的動力！！！

我是五柳，喜歡創新、搗鼓源碼，專一於 Vue3 源碼、Vite 源碼、前端工程化等技術分享，歡迎關注個人微信公衆號：Code center。