别说我没告诉你,你用的JS空对象检测方法都是错的。
看完这篇文章,我相信,你肯定不会再用错方法了。
如何判断对象是否为空是我们在开发过程中经常遇到的问题。今天我们将讨论几种常用的方法,以及如何在不同的场景中使用它们。
接下来、一起看看吧,对你肯定有帮助。
JSON.stringify
JSON.stringify
方法、大家都用过,我相信很多人也用它来判断一个js对象是否是空对象。
该方法可以序列化对象并将其转换为相应的JSON字符串格式。
比如:
javascript
const obj = {};
console.log(JSON.stringify(obj) === '{}') // true
注意:
如果存在未定义属性值,或函数,Symbol值,在序列化过程中,它们将被忽略或转换为空
请看代码:
javascript
const obj = {
a: undefined,
b: function() {},
c: Symbol()
}
console.log(JSON.stringify(obj) === '{}') // true
所以,不是很推荐使用该方法。
hasOwnProperty检测
第二种方法呢、就是for in
循环,使用hasOwnProperty
判断对象是否有属性。
为什么需要使用hasOwnProperty
,由于在执行对象遍历时,也会遍历对象原型上的属性。
请看代码:
javascript
const obj = {}
Object.prototype.a = 1
function isEmptyObj(obj) {
let flag = true
for (let o in obj) {
if (obj.hasOwnProperty(o)) {
flag = false
break
}
}
return flag
}
console.log(isEmptyObj(obj)) // true
但是,这种方法,也有一个问题,for in
不能遍历非枚举属性。具体可以看下面这个方法的演示。
Object.keys
第三种方法,也是一个常用的方法,也就是Object.keys
。大家也肯定用过,但是它也是有问题的。
先看一段代码:
javascript
const obj = {}
Object.prototype.a = 1
console.log(Object.keys(obj).length === 0) // true
看似没啥问题,但是Object.keys
只能遍历可枚举的属性,但不能遍历非枚举的属性。
我们使用Object.defineProperty
将enumerable
属性设置为false
进行测试。
示例如下:
javascript
const obj = {}
Object.defineProperty(obj, 'a', {
value: 1,
enumerable: false
})
console.log(obj.a) // 1
console.log(Object.keys(obj).length === 0) // true
所以,与前面的for in
类似,也不推荐使用。
Object.getOwnPropertyNames
既然,都无法获取非枚举属性,那有没有方法可以获取呢?
自然是有的。
我们可以使用Object.getOwnPropertyNames
获取由对象本身所有属性名称(包括非枚举属性)组成的数组。
javascript
const obj = {}
Object.defineProperty(obj, 'a', {
value: 1,
enumerable: false
})
console.log(Object.getOwnPropertyNames(obj)) // [ 'a' ]
但是这个方法也有一个缺点。
Object.getOwnPropertyNames
无法获取作为名称属性的Symbol
值。
请看下面的代码:
javascript
const a = Symbol()
const obj = {
[a]: 1
}
console.log(obj) // { [Symbol()]: 1 }
console.log(Object.getOwnPropertyNames(obj).length === 0) // true
console.log(JSON.stringify(obj) === '{}') // true
console.log(Object.keys(obj).length === 0) // true
所以,也不推荐。
Object.getOwnPropertyNames 和 Object.getOwnPropertySymbols
既然Object.getOwnPropertyNames
唯一已知的缺点是无法获取以Symbol
为名的属性。
那我们是不是可以进一步使用Object.getOwnPropertySymbols
来获取以Symbol
为名的属性的方式来结合一起使用。
小提示:
Object.getOwnPropertySymbols
只能获取以Symbol
为名的属性
两者的结合是否是完美的解决方案?让我们做一个简单的测试:
javascript
const a = Symbol()
const obj1 = {
[a]: 1
}
const obj2 = {b: 2}
const obj3 = {}
Object.defineProperty(obj3, 'a', {
value: 1,
enumerable: false
})
const obj4 = {}
function getLength(obj) {
return Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj)).length
}
console.log(getLength(obj1) === 0) // false
console.log(getLength(obj2) === 0) // false
console.log(getLength(obj3) === 0) // false
console.log(getLength(obj4) === 0) // true
经过测试,上述方法确实可以解决问题,但比较麻烦。有没有更好的方法呢?答案是肯定的。
Reflect.ownKeys
最后、再来介绍一个更简单,更靠谱的方法。那就是使用Reflect.ownKeys
;
Reflect.ownKeys
该方法返回一个由目标对象自身属性组成的数组。其返回值等同于Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))
;
如代码所示:
javascript
const a = Symbol()
const obj1 = {
[a]: 1
}
const obj2 = {b: 2}
const obj3 = {}
Object.defineProperty(obj3, 'a', {
value: 1,
enumerable: false
})
const obj4 = {}
console.log(Reflect.ownKeys(obj1).length === 0) // false
console.log(Reflect.ownKeys(obj2).length === 0) // false
console.log(Reflect.ownKeys(obj3).length === 0) // false
console.log(Reflect.ownKeys(obj4).length === 0) // true
你学会了吗?学会的话、点个赞吧。