如何检测一个对象是空对象

437 阅读3分钟

以下是检查对象是否为空的代码块。 对于较新的浏览器,您可以使用普通的JS并使用新的“Object.key”,但是对于较旧的浏览器支持,您可以安装Lodash库并使用它们的“isEmpty”方法

const empty = {};/* -------------------------
 对于较新的游览器环境
----------------------------*/
Object.keys(empty).length === 0 && empty.constructor === Object
// true/* -------------------------
  针对旧游览器的Lodash库的isEmpty函数
----------------------------*/
_.isEmpty(empty)
// true

A. 在较新的浏览器中检查空对象

我们可以使用内置的“ Object.keys”方法来检查一个空对象

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

为什么我们需要额外的“构造函数”检查?

您可能想知道为什么我们需要“构造函数”检查。 在JavaScript中,我们有9个内置的构造函数。

new Object();new String();
new Number();
new Boolean();
new Array();
new RegExp();
new Function();
new Date();

因此,我们可以使用new Object()创建一个空对象(但永远不要这么做!)。查阅 Airbnb Style GuideESLint.

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

因此,仅使用Object.keys,当Object为空时,它确实会返回true。 但是当我们使用这些其他构造函数创建新的对象实例时会发生什么呢?

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 

并没有按照我们预期的情况执行

用“构造函数”检查解决误报

让我们通过添加构造函数检查来更正此问题。

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 

对其他值进行空查测试

好的,让我们在一些值上测试我们的方法,看看会发生什么

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

到目前为止看起来还不错,对于非对象,它返回`false‘

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

但是要小心! 这些值将抛出错误

// TypeError: Cannot covert undefined or null ot object
goodEmptyCheck(undefined)
goodEmptyCheck(null)

改进对null和undefined的空检查

如果您不想抛出TypeError,可以添加额外的检查:

let value;
value && Object.keys(value).length === 0 && value.constructor === Object;
value = null;       // null
value = undefined;  // undefined

B. 旧浏览器中的空对象检查

如果您需要支持较旧的浏览器,该怎么办? 我们都知道,当说是老式浏览器时,指的是IE.

使用JavaScript检查空对象

普通的js并不那么简洁。 但这确实可以完成功能

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

对象返回true

isObjectEmpty({});           // true 
isObjectEmpty(new Object()); // true 

很好,它没有被我们的构造函数对象误导

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”。 它将返回false而不抛出TypeError

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

使用外部库检查空对象

您可以使用大量的外部库来检查空对象。 而且它们中的大多数都对较旧的浏览器有很好的支持

Lodash

_.isEmpty({});
// true

Underscore

_.isEmpty({});
// true

jQuery

jQuery.isEmptyObject({});
// true

其他方法

for (var key in object) {
  if (object.hasOwnProperty(key)) {
    return false
  }
}
return true
Object.prototype.toString.call(a) == "[object Object]" && JSON.stringify(a) == "{}"