JS判断空对象的几个方法大盘点

 更新时间:2022年02月15日 16:06:18   作者:猪痞恶霸  
在做数据交互的时候,我们经常需要判断数据或者对象是不是为空,避免当接口异常时候前端页面崩溃,下面这篇文章主要给大家介绍了关于JS判断空对象的几个方法,需要的朋友可以参考下

知识准备

在盘点JS判空方法之前我们先来了解下面的三个方法。

Object.keys

Object.keys()方法是以对象为参数,返回一个包含该对象内所匹配的属性和方法的数组

  var obj = {
    name: "cxy",
    age: "19"
  }; 
  var objArray = Object.getOwnPropertyNames(obj);
  console.log(objArray)

可以看到objArray为返回值,且返回值为以对象内的属性为内容的数组

Object.getOwnPropertyNames

Object.getOwnPropertyNames()方法同样是也是以对象为参数,返回一个包含该对象内所匹配的属性和方法的数组

大家在这里会发出疑问,这两个有啥区别?Object.getOwnPropertyNames()可以返回所有的属性,而Object.keys()只能返回可枚举属性,诶?到这里大家又疑惑了可枚举属性又是个啥?不要着急,我来解释一下什么叫可枚举属性

可枚举属性

可枚举或者不可枚举属性是对象内部通过可枚举标志enumerable来进行区分的,在默认情况下,我们obj.name = "cxy"为对象新增了一个属性后,其可枚举标志enumerable为ture,而当其值为false的时候它是不可枚举的,当我们对对象进行for,Object.keys(),JSON.stringify()的时候不可枚举属性是找不出来的,我们可以理解为不可枚举属性是隐身

现在我们拿上面的Object.getOwnPropertyNamesObject.keys()进行实战举例,我们通过defineProperty来为对象添加age属性,因为该方法可以设置枚举标志,这里设置为false,可以看到下面两个不同的返回结果

var stuObj = {
    name: "cxy"
}
Object.defineProperty(stuObj, 'age', {
  value: "18",
  enumerable: false
});
console.log(Object.keys(stuObj))
console.log(Object.getOwnPropertyNames(stuObj))

hasOwnProperty

hasOwnProperty()是用来判断某对象是否含有某属性的,其参数为属性名

  var stuObj = {
    name: "cxy"
  }
  console.log(stuObj.hasOwnProperty('name'))

但是这里要注意一个问题就是,hasOwnProperty()判断继承属性的时候会返回false,继承属性即对象从原型对象上继承的属性,比如说toString

盘点判空方法

JSON.stringify判空

这种方式是比较简单的了,使用JSON.stringify将对象转换为字符串,再通过等于判断即可得到对象是否为空的布尔值

let obj = {
    name: "cxy"
}
console.log(JSON.stringify(obj) == '{}')

for in判空

使用for in的话可以当触发循环的时候返回false没有触发循环的时候代表对象为空返回ture

let forNull = (items) => {
    for (let item in items) {
        return false
    }
    return true
}

Object.getOwnPropertyNames判空

这里使用了上文提及的Object.getOwnPropertyNames,将返回的数组的length作为判断依据。

let stuArray = Object.getOwnPropertyNames(obj)
console.log(stuArray.length === 0)

Object.keys()判空

和上个方法一样,使用数组作为判断依据

let stuArray = Object.getOwnPropertyNames(obj)
console.log(stuArray.length === 0)

hasOwnProperty判空

使用hasOwnProperty是使用for循环将元素进行判断如果含有则返回false说明不为空,反之则为空

let forNull = (items) => {
    for (let item in items) {
        if(items.hasOwnProperty(item)){
            return false
        }
    }
    return true
}

附将对象转换为字符串进行比较

这种方法很不推荐,但也确实是最容易想到的,主要使用JSON.stringify()这个方法对对象进行强转,贴出来仅供一看: 

var a={};
var b=new Object();
console.log("对象字面量的比较结果:"+(JSON.stringify(a)=="{}"))
console.log("构造函数的比较结果:"+(JSON.stringify(b)=="{}"))

总结

到此这篇关于JS判断空对象方法的文章就介绍到这了,更多相关JS判断空对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS实现倒计时和文字滚动的效果实例

    JS实现倒计时和文字滚动的效果实例

    这篇文章主要介绍了JS实现倒计时和文字滚动的效果,以实例的形式分析了倒计时与文字滚动效果的具体实现方法,并附有js时间变量的说明,非常具有实用价值,需要的朋友可以参考下
    2014-10-10
  • JS连接SQL数据库与ACCESS数据库的方法实例

    JS连接SQL数据库与ACCESS数据库的方法实例

    这篇文章主要介绍了JS连接SQL数据库与ACCESS数据库的方法实例,有需要的朋友可以参考一下
    2013-11-11
  • ion content 滚动到底部会遮住一部分视图的快速解决方法

    ion content 滚动到底部会遮住一部分视图的快速解决方法

    本文给大家带来了ion content 滚动到底部会遮住一部分视图的快速解决方法,其实解决方法超简单的,只要在你的controller里面预先注入$ionicScrollDelegate就可以了,感兴趣的朋友通过本文一起学习吧
    2016-09-09
  • javascript DOM 操作基础知识小结

    javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的。
    2010-04-04
  • js中复选框的取值及赋值示例详解

    js中复选框的取值及赋值示例详解

    这篇文章主要给大家介绍了关于js中复选框的取值及赋值的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • 微信小程序数据监听器使用实例详解

    微信小程序数据监听器使用实例详解

    这篇文章主要介绍了微信小程序数据监听器使用实例,数据监听器用于监听和响应任何属性和数据字段的变化,从而执行特定的操作。它的作用类似于vue中的watch侦听器
    2023-04-04
  • 微信JSAPI Ticket接口签名详解

    微信JSAPI Ticket接口签名详解

    这篇文章主要为大家详细介绍了微信JSAPI Ticket接口签名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • css transform 3D幻灯片特效实现步骤解读

    css transform 3D幻灯片特效实现步骤解读

    3D幻灯片特效想必大家以不在陌生至于表现形式一般都是拘泥于传统接下来为大家介绍下使用css3 transform配合js以及html实现3D幻灯片特效
    2013-03-03
  • 详解如何优雅迭代JavaScript字面对象

    详解如何优雅迭代JavaScript字面对象

    迭代是访问集合元素的一种方法,可以被迭代的对象称为可迭代对象,下面这篇文章主要给大家介绍了关于如何优雅迭代JavaScript字面对象的相关资料,需要的朋友可以参考下
    2022-05-05
  • 英文首字母全大写的js实现脚本

    英文首字母全大写的js实现脚本

    输入内容活直接点转换即可,讲单词的首字母大写。
    2008-09-09

最新评论