乐趣区

关于html:在-JS-中如何检查对象为空

jiezi

作者：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)  // false
isEmptyObject(true) // false
isEmptyObject([])   // false

???? 然而要当心！上面这些值会引发谬误。

// TypeError: Cannot covert undefined or null to object
isEmptyObject(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);      // false
isObjectEmpty(undefined); // false

应用内部库查看空对象

有大量的内部库能够用来查看空对象。而且大多数都对旧浏览器有很好的反对????

Lodash

_.isEmpty({});
// true

Underscore

_.isEmpty({});
// true

jQuery

jQuery.isEmptyObject({});
// true

原生 VS 库

答案是看状况而定! 我十分喜爱尽可能地简化程序，因为我不喜爱内部库的开销。另外，对于较小的应用程序，我懒得设置内部库。但如果你的应用程序曾经装置了一个内部库，那么就持续应用它。你会比任何人都更理解你的应用程序。所以抉择最适宜你状况的办法

人才们的 【三连】 就是小智一直分享的最大能源，如果本篇博客有任何谬误和倡议，欢送人才们留言，最初，谢谢大家的观看。

编辑中可能存在的 bug 没法实时晓得，预先为了解决这些 bug, 花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://www.samanthaming.com/…

交换

文章每周继续更新，能够微信搜寻「大迁世界」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送 Star 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复 福利，即可看到福利，你懂的。

退出移动版