下面的代碼片段，用于檢查對象是否為空。對于較新的瀏覽器，你可以使用 ES6 的 “Object.keys”。對于較舊的瀏覽器，可以安裝Lodash庫并使用其“ isEmpty”方法。
const empty = {};
/* -------------------------
較新的瀏覽器
----------------------------*/
Object.keys(empty).length === 0 && empty.constructor === Object
// true
/* -------------------------
老版本的瀏覽器可以使用 Lodash
----------------------------*/
_.isEmpty(empty)
// true
什么是原生 JAVAScript
原生 JavaScript 指的是不使用框架或庫。它只是常規的普通 JavaScript，沒有使用Lodash或jQuery之類的庫。
A.在較新的瀏覽器中檢查空對象
我們可以使用內置的Object.keys方法檢查空對象。
const empty = {};
Object.keys(empty).length === 0 && empty.constructor === object;
為什么我們需要額外的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
通過檢查 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 ?
Nice，干的漂亮
對其他值進行空檢查
接著，我們用一些值上測試我們的方法，看看我們會得到了什么
function isEmptyObject(value) {
return Object.keys(value).length === 0 && value.constructor === Object;
}
到目前為止看起來不錯，對于非對象它返回 false。
isEmptyObject(100) // false
isEmptyObject(true) // false
isEmptyObject([]) // false
但是要當心！下面這些值會引發錯誤。
// 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.舊版本瀏覽器中的空對象檢查
如果你需要支持較舊的瀏覽器怎么辦？大家都知道，當說舊的瀏覽器時，指的是 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 ?
其它類型的構造函數也能正常判斷
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
使用外部庫檢查空對象
有大量的外部庫可以用來檢查空對象。而且大多數都對舊瀏覽器有很好的支持
Lodash
_.isEmpty({});
// true
Underscore
_.isEmpty({});
// true
jQuery
jQuery.isEmptyObject({});
// true
原生 VS 庫
答案是看情況而定!我非常喜歡盡可能地簡化程序，因為我不喜歡外部庫的開銷。另外，對于較小的應用程序，我懶得設置外部庫。但如果你的應用程序已經安裝了一個外部庫，那么就繼續使用它。你會比任何人都更了解你的應用程序。所以選擇最適合你情況的方法
人才們的 【三連】 就是小智不斷分享的最大動力，如果本篇博客有任何錯誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。
作者：Samantha Ming 譯者：前端小智 來源：medium
原文：https://www.samanthaming.com/tidbits/94-how-to-check-if-object-is-empty/#what-is-javascript
