作者：Samantha Ming
译者：前端小智
起源：medium
点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。
github 地址：https://github.com/qq44924588...
上面的代码片段，用于查看对象是否为空。 对于较新的浏览器，你能够应用 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({});// trueUnderscore
_.isEmpty({});// truejQuery
jQuery.isEmptyObject({});// true原生 VS 库
答案是看状况而定!我十分喜爱尽可能地简化程序，因为我不喜爱内部库的开销。另外，对于较小的应用程序，我懒得设置内部库。但如果你的应用程序曾经装置了一个内部库，那么就持续应用它。你会比任何人都更理解你的应用程序。所以抉择最适宜你状况的办法
人才们的 【三连】 就是小智一直分享的最大能源，如果本篇博客有任何谬误和倡议，欢送人才们留言，最初，谢谢大家的观看。
编辑中可能存在的bug没法实时晓得，预先为了解决这些bug,花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。
原文：https://www.samanthaming.com/...
交换
文章每周继续更新，能够微信搜寻「 大迁世界 」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送Star和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。