时间:2022-12-04 12:55:18 | 栏目:JavaScript代码 | 点击:次
在自己的日常开发中,一般使用Object.keys()
来判断对象是否为空:
const obj = {}; Object.keys(obj).length === 0 // true 则为空对象
而在一篇文章中却是如此判断:
const obj = {}; Object.keys(obj).length === 0 && obj.constructor === Object
为什么还要额外判断对象的constructor
呢?即构造函数呢?
MDN 中关于Object.keys()
的介绍:
Object.keys()
方法会返回一个由一个给定对象的自身可枚举属性组成的数组。
var arr = ['a', 'b', 'c']; console.log(Object.keys(arr)); // ['0', '1', '2'] var obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.keys(obj); // ['0', '1', '2']
文章作者写到是为了覆盖包装器实例(当时看到这有点懵逼?),后面则解释清楚了。 在 JavaScript 中,有9个内置构造函数。
new Object(); new String(); new Number(); new Boolean(); new Array(); new RegExp(); new Function(); new Date(); new Error();
我们可以使用这些构造函数来创建对象,例如:new Object()
(日常不推荐使用)。
const obj = new Object(); Object.keys(obj).length === 0; // 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 badEmptyCheck(new Error();); // true
是不是有点明白了?
在添加构造函数判断后:
function goodEmptyCheck(value) { return Object.keys(value).length === 0 && value.constructor === Object; } 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 goodEmptyCheck(new Error();); // false
结果正确,实际上是我们对边界情况进行了处理。
Object.keys(null).length === 0; // TypeError Object.keys(undefined).length === 0; // TypeError
处理方法也很简单:
function goodEmptyCheck(value) { return value && Object.keys(value).length === 0 && value.constructor === Object; }
badEmptyCheck
和goodEmptyCheck
两个方法的区别主要在于添加了对边界情况的处理,所以后者更适用于公共组件和一些库上。
而如果我们在日常业务开发中可以确定需判断的对象的构造函数一定是Object
, 则可以选择前者。少打好多字,摸更多的鱼。