[[338448]]

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

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

什么是原生 JavaScript

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

A.在較新的瀏覽器中檢查空對(duì)象

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

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

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

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

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

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

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

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

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

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

接著，我們用一些值上測(cè)試我們的方法，看看我們會(huì)得到了什么 🧪

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

到目前為止看起來不錯(cuò)，對(duì)于非對(duì)象它返回 false。

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

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

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

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

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

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

B.舊版本瀏覽器中的空對(duì)象檢查如果你需要支持較舊的瀏覽器怎么辦?大家都知道，當(dāng)說舊的瀏覽器時(shí)，指的是 IE，我們有2個(gè)選擇，使用原生或利用庫(kù)。

使用 JavaScript 檢查空對(duì)象

原生的 JS 并不那么簡(jiǎn)潔，但判斷用來空對(duì)象是沒問題的。

function isObjectEmpty(value) { 
  return ( 
    Object.prototype.toString.call(value) === '[object Object]' && JSON.stringify(value) === '{}' 
  ); 
} 

對(duì)于對(duì)象，它返回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 也不會(huì)報(bào) TypeError。

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

使用外部庫(kù)檢查空對(duì)象

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

Lodash

_.isEmpty({}); 
// true 

Underscore

_.isEmpty({}); 
// true 

jQuery

jQuery.isEmptyObject({}); 
// true 

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

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

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

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

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