JavaScript：如何精确判断一个变量是空对象？

JavaScript如何精确判断一个变量是空对象？下面为大家提供了3种解决方案，分别是在现代浏览器中使用Object.keys()判断，在旧浏览器中使用 Object.prototype.toString.call()判断，以及借助第三方库进行判断。下面为大家详细介绍一下这3种方案的具体实现。

一、在现代浏览器中使用Object.keys()判断

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

为何加了一个额外的constructor判断？

你可能很好奇，为何加了一个constructor检测？

且听我给你一一分析

我们都知道在js中有9种内置的构造函数

newObject();newString();newNumber();newBoolean();newArray();newRegExp();newFunction();newDate();

我们可以用new Object()来创建一个对象

但是最好不要这么用

constobj=newObject();Object.keys(obj).length===0;//true

这样，使用Object.keys去判断， 当对象为空的时候返回true ✅.

但是，但我们用其他构造函数创建实例会怎么样？

functionbadEmptyCheck(value){returnObject.keys(value).length===0;}badEmptyCheck(newString());//true?badEmptyCheck(newNumber());//true?badEmptyCheck(newBoolean());//true?badEmptyCheck(newArray());//true?badEmptyCheck(newRegExp());//true?badEmptyCheck(newFunction());//true?badEmptyCheck(newDate());//true?

奇怪的事情发生了

少了constructor判断以后，都为真

使用constructor检测来避免其他构造函数的创建的空对象

functiongoodEmptyCheck(value){Object.keys(value).length===0&&value.constructor===Object;//?constructorcheck}goodEmptyCheck(newString());//false✅goodEmptyCheck(newNumber());//false✅goodEmptyCheck(newBoolean());//false✅goodEmptyCheck(newArray());//false✅goodEmptyCheck(newRegExp());//false✅goodEmptyCheck(newFunction());//false✅goodEmptyCheck(newDate());//false✅

这样一来，避免了其他情况的影响

其他特殊值的判断，null, undefined

当碰到null, undefined时，会抛出错误

//TypeError:CannotcovertundefinedornullotobjectgoodEmptyCheck(undefined);goodEmptyCheck(null);

为了解决这个问题，可以加一个存在性判断, 解决错误抛出

functiongoodEmptyCheck(value){value&&Object.keys(value).length===0&&value.constructor===Object;//?constructorcheck}

二、旧浏览器中使用 Object.prototype.toString.call()判断

旧浏览器中不支持ES新方法

我们使用Object.prototype.toString.call()配合JSON.stringify(value) === '{}'来判断

functionisObjectEmpty(value){return(Object.prototype.toString.call(value)==='[objectObject]'&&JSON.stringify(value)==='{}');}

碰到空对象时会正确输出

isObjectEmpty({});//true✅isObjectEmpty(newObject());//true✅

不需要使用constructor检测

这种判断方式，避免了其他构造函数的影响

isObjectEmpty(newString());//false✅isObjectEmpty(newNumber());//false✅isObjectEmpty(newBoolean());//false✅isObjectEmpty(newArray());//false✅isObjectEmpty(newRegExp());//false✅isObjectEmpty(newFunction());//false✅isObjectEmpty(newDate());//false✅

null和undefined也可以正确处理

当然，即使是 null和undefined，也不需要额外处理

newObject();newString();newNumber();newBoolean();newArray();newRegExp();newFunction();newDate();0

三、其他方法：借助第三方库

Lodash

newObject();newString();newNumber();newBoolean();newArray();newRegExp();newFunction();newDate();1

Underscore

newObject();newString();newNumber();newBoolean();newArray();newRegExp();newFunction();newDate();1

jQuery

newObject();newString();newNumber();newBoolean();newArray();newRegExp();newFunction();newDate();3

作者：油炸皮卡丘