技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

3种方法JS和jQuery判断对象是否为空

作者:admin    时间:2022-5-12 14:21:58    浏览:

判断对象是否为空,我们可以用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

但是此方法当对象是nullundefined时,返回的不是truefalse,而是nullundefined

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方法,判断对象是nullundefined时,返回的是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方法,在写法上有了一定的提升,代码较简短,不过它只适用新浏览器,在老浏览器不被支持。

标签: 对象  
  • IT热文
  • 站长推荐