在 JavaScript 中如何檢查物件為空
下面的程式碼片段,用於檢查物件是否為空。 對於較新的瀏覽器,你可以使用 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()
建立一個空物件。
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 庫
答案是看情況而定!我非常喜歡儘可能地簡化程式,因為我不喜歡外部庫的開銷。另外,對於較小的應用程式,我懶得設定外部庫。但如果你的應用程式已經安裝了一個外部庫,那麼就繼續使用它。你會比任何人都更瞭解你的應用程式。