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