卡卡网

判断对象是否为空，我们可以用JavaScript，也可用jQuery，有写法较简单的，也有写法较复杂，有最原始的写法，也有最先进的写法。今天，我将给大家介绍3种可行的方法，判断对象是否为空，所有方法均经过实例验证。

最原始的JS方法

说是最原始的JS方法，原因是它完全不用考虑浏览器的问题，它可以在任何浏览器里运行正常，包括很老的IE8.0。

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

demodownload

执行结果

true

如果你要考虑IE8用户，又不想用JQuery，那么请用上面的JS方法。

JQuery方法

jQuery方法很简单，你不需要再写isObjectEmpty()这样的判断函数，你可以直接这样：

var obj = {};
document.write(jQuery.isEmptyObject(obj));

demodownload

输出

true

但是，对于IE8.0，只能引用较低版本的jQuery库文件，比如若你引用的是jquery-3.2.1.min.js，那么在IE8浏览器会提示“jQuery未定义”“对象不支持此属性或方法”的错误。

但在IE11，就不受jQuery库文件版本的限制。

因此使用此方法时要注意这个问题。

使用Object.keys方法

较新浏览器中，可以使用内置的Object.keys方法来检查空对象。

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

var obj = {};
document.write(isEmptyObject(obj));

demodownload

输出

true

但是此方法当对象是null或undefined时，返回的不是true或false，而是null或undefined：

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

var obj = null;
document.write(isEmptyObject(obj)); //null

var obj = undefined;
document.write(isEmptyObject(obj)); //undefined

demodownload

但若用前面介绍的最原始的JS方法，判断对象是null和undefined时，返回的是false。 

对内置JS构造函数的判断

JavaScript 有9个内置的原生对象构造函数：

new Object()   // Object 对象


new String()    // String 对象
new Number()    // Number 对象
new Boolean()   // Boolean 对象
new Array()     // Array 对象
new RegExp()    // RegExp 对象
new Function()  // Function 对象
new Date()      // Date 对象

Math()对象不在列表中。Math是一个全局对象。new关键字不能用于Math。

不同判断方法对这些对象构造函数的判断结果有所不同，使用最原始的JS判断方法，结果如下：

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


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

demodownload

使用Object.keys方法时，执行结果这样：

function isEmptyObject(value) {
     return value && Object.keys(value).length === 0 && value.constructor === Object;
  }
   
document.write(isEmptyObject({}));           // true
document.write(isEmptyObject(new Object())); // true

document.write(isEmptyObject(new String()));   // false
document.write(isEmptyObject(new Number()));   // false
document.write(isEmptyObject(new Boolean()));  // false
document.write(isEmptyObject(new Array()));    // false
document.write(isEmptyObject(new RegExp()));   // false
document.write(isEmptyObject(new Function())); // false
document.write(isEmptyObject(new Date()));     // false 

demodownload

使用jQuery方法时，执行结果这样：

document.write(jQuery.isEmptyObject(new Object())); // true

document.write(jQuery.isEmptyObject(new String())); // true
document.write(jQuery.isEmptyObject(new Number())); // true
document.write(jQuery.isEmptyObject(new Boolean())); // true
document.write(jQuery.isEmptyObject(new Array())); // true
document.write(jQuery.isEmptyObject(new RegExp())); // true
document.write(jQuery.isEmptyObject(new Function())); // true
document.write(jQuery.isEmptyObject(new Date())); // true

demodownload

总结-该用哪种方法？

上面介绍了判断对象是否为空的几种方法，那么我们该用哪种方法为好呢？

其实，如果从严密的角度来考虑，jQuery的判断方法并不完美，它判断内置对象构造函数是否为空属于误判了，比如new Date()对象，该对象并不是空，它本身是有值的。并且引用jQuery的库文件若版本过高，老浏览器（IE8.0）不能支持。

原始JS方法，表现很完美，它可以不被构造函数对象欺骗，并且它可以在老浏览器里使用。

新的Object.keys方法，在写法上有了一定的提升，代码较简短，不过它只适用新浏览器，在老浏览器不被支持。

标签: 对象