js判断对象为空_在 JavaScript 中如何检查对象为空
下面的代码片段,用于检查对象是否为空。对于较新的浏览器,你可以使用 ES6 的 “Object.keys”。?对于较旧的浏览器,可以安装Lodash库并使用其“ isEmpty”方法。
const empty = {};
/* ------------------------- 较新的浏览器----------------------------*/Object.keys(empty).length === 0 && empty.constructor === Object// true
/* ------------------------- 老版本的浏览器可以使用 Lodash----------------------------*/_.isEmpty(empty)// true
什么是原生 JavaScript
原生 JavaScript 指的是不使用框架或库。它只是常规的普通 JavaScript,没有使用Lodash
或jQuery
之类的库。
A.在较新的浏览器中检查空对象
我们可以使用内置的Object.keys
方法检查空对象。
const empty = {};
Object.keys(empty).length === 0 && empty.constructor === object;
为什么我们需要额外的constructor
检查?
你可能想知道为什么我们需要对 constructor
进行检查。它是为了覆盖包装器实例。在JavaScript中,我们有9个内置的构造函数。
new Object();
new String();new Number();new Boolean();new Array();new RegExp();new Function();new Date();
这里,我们可以使用new Object()
创建一个空对象。
注:永远不要使用构造函数创建对象。这被认为是不好的做法,请参阅 Airbnb Style Guide 和 ESLint。
const obj = new Object();
Object.keys(obj).length === 0; // true
因此,仅使用Object.keys
,当对象为空时,它的确会返回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 ?
通过检查 constructor 解决误报
通过添加构造函数检查来纠正这个错误。
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 ✅
Nice,干的漂亮 ?
对其他值进行空检查
接着,我们用一些值上测试我们的方法,看看我们会得到了什么 ?
function isEmptyObject(value) { return Object.keys(value).length === 0 && value.constructor === Object;}
到目前为止看起来不错,对于非对象它返回 false
。
isEmptyObject(100) // falseisEmptyObject(true) // falseisEmptyObject([]) // false
?但是要当心!下面这些值会引发错误。
// TypeError: Cannot covert undefined or null to objectisEmptyObject(undefined);isEmptyObject(null);
改进对null
和undefined
的空检查
如果不想让它抛出TypeError
,可以添加额外的检查
function isEmptyObject(value) { return value && Object.keys(value).length === 0 && value.constructor === Object;}
B.旧版本浏览器中的空对象检查
如果你需要支持较旧的浏览器怎么办?大家都知道,当说旧的浏览器时,指的是 IE,我们有2个选择,使用原生或利用库。
使用 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
也不会报 TypeError
。
isObjectEmpty(null); // falseisObjectEmpty(undefined); // false
使用外部库检查空对象
有大量的外部库可以用来检查空对象。而且大多数都对旧浏览器有很好的支持?
Lodash
_.isEmpty({});// true
Underscore
_.isEmpty({});// true
jQuery
jQuery.isEmptyObject({});// true
原生 VS 库
答案是看情况而定!我非常喜欢尽可能地简化程序,因为我不喜欢外部库的开销。另外,对于较小的应用程序,我懒得设置外部库。但如果你的应用程序已经安装了一个外部库,那么就继续使用它。你会比任何人都更了解你的应用程序。所以选择最适合你情况的方法
人才们的 【三连】 就是小智不断分享的最大动力,如果本篇博客有任何错误和建议,欢迎人才们留言,最后,谢谢大家的观看。
作者:Samantha Ming 译者:前端小智 来源:medium
原文:https://www.samanthaming.com/tidbits/94-how-to-check-if-object-is-empty/#what-is-javascript
相关热门推荐在 JS 中检查变量是否为数组的多种方式,并说说 ES6 引入检查数组的缘起!提升布局能力!理解 CSS 的多种背景及使用场景和技巧17 个实用的图像特效库8 种用于前端性能分析工具【网络特效】12 个炫酷背景特效库Vue 中如何从插槽中发出数据要深入 JavaScript,你需要掌握这 36 个概念一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景5 个 JS 数组技巧可提高你的开发技能
js判断对象为空_在 JavaScript 中如何检查对象为空相关推荐
- 如何判断map为空_在Java中如何优雅地判空
来自:李良逸 链接:http://blog.imuxuan.com/archives/86 判空灾难 作为搬砖党的一族们,我们对判空一定再熟悉不过了,不要跟我说你很少进行判空,除非你喜欢 NullPo ...
- python一切皆对象的理解_在 Python 中万物皆对象
在 Python 中一切都是对象,并且几乎一切都有属性和方法.所有的函数都有一个内置的 __doc__ 属性,它会返回在函数源代码中定义的 doc string:sys 模块是一个对象,它有一个叫作 ...
- word2013插入excel对象报错_使用Excel中的插入对象功能在Excel中插入Word文档
使用Excel中的插入对象功能在Excel中插入Word文档 时间:2016-05-17 作者:snow 来源:互联网 使用Excel中的插入对象功能,就可以很容易地在Excel中插入Word ...
- 实验报告类与对象水井问题_物业设施设备巡检检查对象、周期和频次
点击上方"物业精英俱乐部",关注公众号,中国物业管理行业精英联盟,中国百强物业企业精英学习平台. 来源:百度文库 版权归原创作者所有 一 巡检对象.周期和频次 所谓巡检,并不是说将 ...
- python中一切都是对象对吗_在 Python 中一切皆对象,它完全支持()
皆对1.词具有的特征是 全支What is the advantage of good listening 皆对The six stages for listening are Receive, Co ...
- 选择嵌套_如何优雅地在JavaScript中访问嵌套对象
在JavaScript中访问嵌套对象 以超酷的方式安全地访问JavaScript中的嵌套对象 JavaScript是惊人的,我们都知道.但是JavaScript中的一些东西真的很奇怪,它们让我们大开眼 ...
- JavaScript id_好程序员web前端分享Javascript中函数作为对象
好程序员web前端分享Javascript中函数作为对象,Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性, ...
- html判断坐标,js判断鼠标位置是否在某个div中的方法
本文实例讲述了js判断鼠标位置是否在某个div中的方法.分享给大家供大家参考,具体如下: div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判 ...
- 前端:JS/28/CSS DOM动态样式(style对象,style 对象属性与CSS属性的转换),Event DOM,事件对象简介(DOM和IE中的Event对象),实例:点出满天小星星
CSS DOM动态样式 使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...
最新文章
- 分享:RethinkDB 1.3 发布,分布式 JSON 数据库
- Windows下solr的安装与部署
- LeetCode 1095. 山脉数组中查找目标值(二分查找)
- CoreImage使用介绍
- 《编程珠玑(续)(修订版)》—第2章2.1节Awk中的关联数组
- matlab 约束函数,【优化求解】MATLAB约束优化之惩罚函数法
- java读取配置文件properties_让我来告诉你Spring框架是怎么样通过properties来获得对象的?...
- 在Leangoo里怎么修改密码?
- GitHub开源推荐 | 一套绝佳的图标字体库
- Java敏感词过滤 工具类
- 国际直拨电话号码格式
- dpi,分辨率,屏幕尺寸,dp,px,dip
- 通信原理SNR EbN0 EsN0理解
- 如果你觉得累,这三个“高内耗”行为,一定要戒掉!
- python基础之文件处理
- 【深度学习】ONNX 模型文件修改节点的名称,修改输入名称,修改输出名称
- Ubuntu下安装PCL1.12.1点云库经验分享
- Laravel Excel实现Excel/CSV文件导入导出的功能详解(合并单元格,设置单元格样式)
- 使用Google word2vec训练我们自己的词向量模型
- 比Postman还好用的API神器Eolink,效率担当
热门文章
- 基于JAVA+JSP+MYSQL的小说网站阅读管理系统
- 基于JAVA+SpringMVC+MYSQL的健康档案管理系统
- php post获取dvi,如何利用http来发送post请求
- mysql数据生产数据分析_基于MySQL玩转SQL数据分析课程 互联网数据分析师-SQL数据分析实战视频教程...
- linux ubuntu mysql 安装_1.MySQL的安装(linux Ubuntu环境下)
- 英特尔“硬盘内存一体化”首款产品正式发布,读写速度超千倍,存储密度扩充十倍...
- 【MySQL】添加多个字段
- Java Web入门之tomcat数据库连接池
- 转:android学习帖子大汇集
- struts2上传文件