别说我没告诉你,你用的JS空对象检测方法都是错的。

别说我没告诉你,你用的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.definePropertyenumerable属性设置为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

你学会了吗?学会的话、点个赞吧。

相关推荐
wuxia21184 小时前
微信小程序单击元素切换元素的显示和隐藏
javascript·微信小程序·setdata
JustHappy4 小时前
古法编程秘籍(二):什么是代码模块化?别背概念,把房间收拾明白就够了
前端·后端
小江的记录本4 小时前
【JVM虚拟机】堆内存分代模型:年轻代(Eden+Survivor)、老年代、元空间Metaspace(附《思维导图》+《面试高频考点清单》)
java·前端·jvm·后端·python·spring·面试
weixin_471383034 小时前
图片预解码缓存
前端·浏览器缓存·图片预解码
一起学开源5 小时前
一文读懂 ReAct 范式:让 AI Agent 真正学会“思考+行动“
java·javascript·react.js·ecmascript·react·alibaba·智能体开发
郑洁文6 小时前
基于网络爬虫的Web敏感信息泄露自动化检测工具
前端·爬虫·网络安全·自动化
游九尘6 小时前
JavaScript 实现三段式版本号对比函数(app升级用)
javascript·uni-app
zhiSiBuYu05176 小时前
Claude-Code 新手极速上手指南
javascript·node.js
郑洁文7 小时前
可视化Web渗透分析工具的设计与实现
前端
罗超驿7 小时前
18.Web API 实战:元素与表单属性的获取和修改
开发语言·前端·javascript