JavaScript中如何判斷對象是否為空的方法
在自己的日常開發(fā)中，一般使用Object.keys()來判斷對象是否為空：
const obj = {};
Object.keys(obj).length === 0 // true 則為空對象而在一篇文章中卻是如此判斷：
const obj = {};
Object.keys(obj).length === 0 && obj.constructor === Object為什么還要額外判斷對象的constructor呢？即構(gòu)造函數(shù)呢？
Object.keys()
MDN 中關(guān)于Object.keys()的介紹：
Object.keys()方法會返回一個由一個給定對象的自身可枚舉屬性組成的數(shù)組。
示例
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // ['0', '1', '2']
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj); // ['0', '1', '2']為什么需要額外判斷對象的構(gòu)造函數(shù)呢？
文章作者寫到是為了覆蓋包裝器實例（當(dāng)時看到這有點懵逼??），后面則解釋清楚了。 在 JavaScript 中，有9個內(nèi)置構(gòu)造函數(shù)。
new Object(); new String(); new Number(); new Boolean(); new Array(); new RegExp(); new Function(); new Date(); new Error();
我們可以使用這些構(gòu)造函數(shù)來創(chuàng)建對象，例如：new Object()(日常不推薦使用)。
const obj = new Object(); Object.keys(obj).length === 0; // true
平常使用的判斷方法也沒問題啊??????
但是當(dāng)使用剩下的內(nèi)置構(gòu)造函數(shù)創(chuàng)建就會出現(xiàn)問題。
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
badEmptyCheck(new Error();); // true是不是有點明白了？
在添加構(gòu)造函數(shù)判斷后：
function goodEmptyCheck(value) {
return Object.keys(value).length === 0 && value.constructor === Object;
}
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
goodEmptyCheck(new Error();); // false結(jié)果正確，實際上是我們對邊界情況進(jìn)行了處理。
另一種邊界情況
Object.keys(null).length === 0; // TypeError Object.keys(undefined).length === 0; // TypeError
處理方法也很簡單：
function goodEmptyCheck(value) {
return value && Object.keys(value).length === 0 && value.constructor === Object;
}總結(jié)
badEmptyCheck和goodEmptyCheck兩個方法的區(qū)別主要在于添加了對邊界情況的處理，所以后者更適用于公共組件和一些庫上。
而如果我們在日常業(yè)務(wù)開發(fā)中可以確定需判斷的對象的構(gòu)造函數(shù)一定是Object, 則可以選擇前者。少打好多字，摸更多的魚。
到此這篇關(guān)于JavaScript中如何判斷對象是否為空的方法的文章就介紹到這了,更多相關(guān)JavaScript判斷對象為空內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文介紹了使用clip()方法實現(xiàn)一個探照燈效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章全面解析了Bootstrap表單的使用方法，本文重點介紹Bootstrap表單樣式，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了JS實現(xiàn)的跨瀏覽器解析XML文件的方法,結(jié)合實例形式分析了javascript基于ActiveXObject操作xml文件的加載與解析相關(guān)技巧,需要的朋友可以參考下2016-06-06
javascript中的prototype屬性使用說明(函數(shù)功能擴(kuò)展)
一說到prototype很多人可能第一個想到的是著名的prototype.js框架，當(dāng)然我們今天說的不是它，而是Javascript中的prototype屬性，一般都被翻譯為“原型”。2010-08-08
這篇文章主要為大家詳細(xì)介紹了H5用戶注冊表單頁的相關(guān)代碼，注冊模態(tài)框，如何設(shè)計用戶注冊表單頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了在Js中去掉字符串中空格的實現(xiàn)方法。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
微信小程序中獲取用戶手機(jī)號授權(quán)登錄詳細(xì)步驟
這篇文章主要給大家介紹了關(guān)于微信小程序中獲取用戶手機(jī)號授權(quán)登錄的詳細(xì)步驟,在微信小程序中開發(fā)者可以通過微信提供的API接口實現(xiàn)用戶登錄和獲取用戶的手機(jī)號,需要的朋友可以參考下2023-07-07
js或jquery動態(tài)輸出select option的實現(xiàn)代碼
在 JavaScript 中動態(tài)生成 <option> 元素并添加到 <select> 下拉列表中,可以通過以下幾種方式實現(xiàn),以下是不同場景下的完整代碼示例2025-03-03
TypeScript?Typeof運(yùn)算符的5個實用技巧詳解
這篇文章主要為大家介紹了TypeScript?Typeof運(yùn)算符的5個實用技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
本文主要JavaScript常見的五種數(shù)組去重的方式進(jìn)行一一思路分析實例介紹，易于理解與學(xué)習(xí)，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12