脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS判断对象是否为空

用JS判断对象是否为空的几种常用方法

 更新时间：2024年01月03日 08:33:08   作者：前端后腿哥  
如何判断对象是否为空是我们在开发过程中经常遇到的问题,今天我们将讨论几种常用的方法,以及如何在不同的场景中使用它们,接下来、一起看看吧,对你肯定有帮助

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实现小时钟效果

    js实现小时钟效果

    这篇文章主要为大家详细介绍了js实现小时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析

    微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析

    这篇文章主要介绍了微信小程序获取用户信息的两种方法wx.getUserInfo与open-data,结合实例形式分析了wx.getUserInfo与open-data获取用户信息的相关操作技巧与使用注意事项,需要的朋友可以参考下
    2019-05-05
  • 理解javascript中try...catch...finally

    理解javascript中try...catch...finally

    这篇文章主要帮助大家理解javascript中try...catch...finally，从浅入深，一步步掌握javascript中try...catch...finally的使用方法，感兴趣的小伙伴们可以参考一下
    2015-12-12
  • javascript 动态样式添加的简单实现

    javascript 动态样式添加的简单实现

    下面小编就为大家带来一篇javascript 动态样式添加的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 细说webpack源码之compile流程-rules参数处理技巧(2)

    细说webpack源码之compile流程-rules参数处理技巧(2)

    这篇文章主要介绍了webpack源码之compile流程-rules参数处理技巧的相关知识，需要的朋友参考下吧
    2017-12-12
  • 静态页面html中跳转传值的JS处理技巧

    静态页面html中跳转传值的JS处理技巧

    这篇文章主要介绍了静态页面html中跳转传值的JS处理技巧,结合实例形式分析了HTML页面跳转通过URL传递参数的方法与javascript处理技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • js判断手机号是否正确并返回的实现代码

    js判断手机号是否正确并返回的实现代码

    这篇文章主要介绍了js判断手机号是否正确并返回的实现代码，以及使用正则表达式判断手机号是否正确，需要的的朋友参考下
    2017-01-01
  • layui动态加载多表头的实例

    layui动态加载多表头的实例

    今天小编就为大家分享一篇layui动态加载多表头的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript图片url地址转base64简单示例

    JavaScript图片url地址转base64简单示例

    这篇文章主要给大家介绍了关于JavaScript图片url地址转base64的相关资料,图片URL转Base64是把图片URL转化为一个以base64编码的字符串格式,使得图片可以直接在HTML或CSS中使用,需要的朋友可以参考下
    2023-10-10
  • JavaScript设计模式经典之工厂模式

    JavaScript设计模式经典之工厂模式

    工厂模式定义一个用于创建对象的接口，这个接口由子类决定实例化哪一个类。接下来通过本文给大家介绍JavaScript设计模式经典之工厂模式，感兴趣的朋友一起学习吧
    2016-02-02

最新评论