用JS判断对象是否为空的几种常用方法
JSON.stringify
JSON.stringify 方法、大家都用过，我相信很多人也用它来判断一个js对象是否是空对象。
该方法可以序列化对象并将其转换为相应的JSON字符串格式。
比如：
const obj = {};
console.log(JSON.stringify(obj) === '{}') // true
注意:
如果存在未定义属性值，或函数，Symbol值，在序列化过程中，它们将被忽略或转换为空
请看代码:
const obj = {
a: undefined,
b: function() {},
c: Symbol()
}
console.log(JSON.stringify(obj) === '{}') // true
所以，不是很推荐使用该方法。
hasOwnProperty检测
第二种方法呢、就是for in循环，使用hasOwnProperty判断对象是否有属性。
为什么需要使用hasOwnProperty,由于在执行对象遍历时，也会遍历对象原型上的属性。
请看代码:
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。大家也肯定用过，但是它也是有问题的。
先看一段代码:
const obj = {}
Object.prototype.a = 1
console.log(Object.keys(obj).length === 0) // true
看似没啥问题，但是Object.keys只能遍历可枚举的属性，但不能遍历非枚举的属性。
我们使用Object.defineProperty将enumerable属性设置为false进行测试。
示例如下：
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获取由对象本身所有属性名称（包括非枚举属性）组成的数组。
const obj = {}
Object.defineProperty(obj, 'a', {
value: 1,
enumerable: false
})
console.log(Object.getOwnPropertyNames(obj)) // [ 'a' ]
但是这个方法也有一个缺点。
Object.getOwnPropertyNames无法获取作为名称属性的Symbol值。
请看下面的代码:
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为名的属性
两者的结合是否是完美的解决方案？让我们做一个简单的测试：
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));
如代码所示:
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
你学会了吗？学会的话、点个赞吧。
到此这篇关于用JS判断对象是否为空的几种常用方法的文章就介绍到这了,更多相关JS判断对象是否为空内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家带来一篇js 模仿锚点定位的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要介绍了前端使用fetch接收流式数据处理的相关资料,文中描述了一个流式数据处理的demo,需要后端服务配合进行接口调试,需要的朋友可以参考下2025-02-02
html2pdf.js是基于html2canvas和jsPDF的轻量级库,可以在客户端实现网页到PDF的转换,这篇文章主要介绍了如何使用html2pdf.js生成pdf文件的相关资料,需要的朋友可以参考下2025-04-04
最近开始练习js的基本操作,常常因为一些小疏忽导致页面效果无法实现,下面这篇文章主要给大家介绍了关于利用JavaScript实现简单全选和不全选的思路和方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了js跨浏览器的事件侦听器和事件对象的使用方法,需要的朋友可以参考下2015-12-12
这篇文章介绍了javascript中直接写php代码的方法，有需要的朋友可以参考一下2013-07-07
这篇文章我们来看看如何利用原生的JavaScript实现统计文本的行数，代码实现起来很简单，有需要的可以参考借鉴。2016-08-08
Bootstrap 粘页脚，说得具体一点就是“将固定高度的页脚紧贴页面底部”，本文给大家分享具有实现代码，感兴趣的朋友参考下吧2016-03-03
登录功能是许多小程序必备的一个功能，通过登录系统，我们可以记录用户在我们的小程序里一些行为，在后台我们也可以模糊地确认用户。下面这篇文章主要给大家介绍了关于小程序登录鉴权的相关资料，需要的朋友可以参考下。2018-04-04
这篇文章主要介绍了javascript改变this指向的方法汇总的相关资料,需要的朋友可以参考下2022-09-09
最新评论