JavaScript 中怎么檢查對象是否為空

這期內容當中小編將會給大家帶來有關JavaScript 中怎么檢查對象是否為空，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

什么是原生 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

上述就是小編為大家分享的JavaScript 中怎么檢查對象是否為空了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。