[[338448]]

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

const empty = {}; 
 
/* ------------------------- 
  較新的瀏覽器 
----------------------------*/ 
Object.keys(empty).length === 0 && empty.constructor === Object 
// true 
 
/* ------------------------- 
  老版本的瀏覽器可以使用 Lodash 
----------------------------*/ 
_.isEmpty(empty) 
// true 

什么是原生 JavaScript

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

A.在較新的瀏覽器中檢查空對象

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

const empty = {}; 
 
Object.keys(empty).length === 0 && empty.constructor === object; 

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

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

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

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

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

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

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

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

接著，我們用一些值上測試我們的方法，看看我們會得到了什么 🧪

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

到目前為止看起來不錯，對于非對象它返回 false。

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

但是要當(dāng)心!下面這些值會引發(fā)錯誤。

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

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

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

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

B.舊版本瀏覽器中的空對象檢查如果你需要支持較舊的瀏覽器怎么辦?大家都知道，當(dāng)說舊的瀏覽器時，指的是 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 ✅ 

其它類型的構(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 也不會報 TypeError。

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

使用外部庫檢查空對象

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

Lodash

_.isEmpty({}); 
// true 

Underscore

_.isEmpty({}); 
// true 

jQuery

jQuery.isEmptyObject({}); 
// true 

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

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

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

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

本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。