首页/文章/javascript

js 如何判断对象自身为空

2023-12-06
7733 分钟
...

前言

如何判断一个对象为空是我们在开发中经常会遇到的问题,今天我们来聊聊几种经常使用的方法,以及在不同的场景下我们如何去使用。

1. JSON.stringify

JSON.stringify 方法可以使对象序列化,转为相应的 JSON 格式。

const obj = {};

console.log(JSON.stringify(obj) === '{}')  

缺点:如果存在 undefined、任意的函数以及 symbol 值,在序列化过程中会被忽略(出现在非数组对象的属性值中时)或者被转换成 null(出现在数组中时)。更多

如下示例:

const obj = {
  a: undefined,
  b: function() {},
  c: Symbol()
}

console.log(JSON.stringify(obj) === '{}')  

2. for in 配合 hasOwnProperty

使用 for in 对当前对象进行遍历:

const obj = {}
Object.prototype.a = 1

function isEmptyObj(obj) {
  let flag = true
  for (let o in obj) {
    flag = false
    break
  }
  return flag
}

console.log(isEmptyObj(obj))  

由于 for in 在进行对象遍历时,会遍历对象原型上的属性,而我们只希望得到其自身的属性,这时可以使用 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))  

缺点:for in 不能遍历不可枚举的属性。

3. Object.keys

Object.keys 会返回对象自身可枚举属性组成的数组,而不会遍历原型上的属性。

const obj = {}
Object.prototype.a = 1

console.log(Object.keys(obj).length === 0)  

缺点:Object.keysfor in 都只能遍历可枚举属性,不能遍历不可枚举的属性。

我们使用 Object.defineProperty 将属性 enumerable 设置为 false 来进行测试,示例如下:

const obj = {}
Object.defineProperty(obj, 'a', {
  value: 1,
  enumerable: false
})

console.log(obj.a)  
console.log(isEmptyObj(obj))  
console.log(Object.keys(obj).length === 0)  

4. Object.getOwnPropertyNames

使用 Object.getOwnPropertyNames 可以得到对象自身的所有属性名组成的数组(包括不可枚举属性)。

const obj = {}
Object.defineProperty(obj, 'a', {
  value: 1,
  enumerable: false
})

console.log(Object.getOwnPropertyNames(obj))  

缺点:不能获取 Symbol 值作为名称的属性,以上的 JSON.stringifyfor in 以及 Object.keys 方法也不能获取Symbol 值作为名称的属性,示例如下:

const a = Symbol()
const obj = {
  [a]: 1
}

console.log(obj)  
console.log(Object.getOwnPropertyNames(obj).length === 0)  
console.log(JSON.stringify(obj) === '{}')  
console.log(isEmptyObj(obj))  
console.log(Object.keys(obj).length === 0)  

5. Object.getOwnPropertyNames 结合 Object.getOwnPropertySymbols

已知 Object.getOwnPropertyNames 唯一的缺点是不能获取 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)  
console.log(getLength(obj2) === 0)  
console.log(getLength(obj3) === 0)  
console.log(getLength(obj4) === 0)  

经过测试,上面这种方法的确可以解决,但是比较繁琐,那有没有更好的方法呢?答案是有的。

6. 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)  
console.log(Reflect.ownKeys(obj2).length === 0)  
console.log(Reflect.ownKeys(obj3).length === 0)  
console.log(Reflect.ownKeys(obj4).length === 0)  

总结

判断一个对象是否为空时,使用 Reflect.ownKeys 方法最为完美。

如果您觉得这篇文章有帮助,请点个赞吧~

分享文章

相关文章

更多文章 →
javascript2025-09-18
JavaScript 的多线程能力:Worker
如果你写过一些计算量稍大的 JavaScript 代码,比如图像处理、大量数据排序或者复杂的算法,你几乎肯定遇到过浏览器“卡死”的现象。点击页面没反应,动画也停了,就像整个世界都静止了。 这就是主线程被阻塞的典型后果。因为主线程既要负责执行 JavaScript,又要负责渲染页面、响应用户操作,一旦它被繁重的计算任务占满,就无暇顾及其他,用户体验便直线下降。 这个问题的根源,正是“主线程是单线程的”。那么,如何解决呢? 答案很简单:把这...
学习面试
javascript2025-09-10
手把手教你实现一个EventEmitter
你是不是也遇到过这种情况:代码里各种事件监听和触发,回调函数套了一层又一层,最后自己都理不清哪个事件先触发、哪个后触发了? 别担心,今天我就带你从零开始实现一个自己的事件触发器(EventEmitter),让你彻底掌握事件驱动的精髓,代码清晰度直接提升200%! 为什么要懂EventEmitter? 先说说为什么我们要关心这个。Node.js的核心就是事件驱动,比如文件读写、网络请求,都是通过事件来处理的。不会EventEmitter,...
学习面试
javascript2025-08-09
Web Worker 多线程魔法
你是否曾遇到过网页因为复杂计算而卡顿的情况?今天,让我们一起探索Web Worker的神奇世界,看看如何用多线程技术解决性能瓶颈,并实现流畅的图片压缩功能! 为什么需要Web Worker? 想象一下,你在一个繁忙的餐厅里,只有一位服务员(主线程)负责点餐、上菜、结账所有工作。当客人突然暴增时,这位服务员就会手忙脚乱,其他客人只能干等着… 这就是JavaScript的现状—— 单线程 !所有任务都在一个线程中排队执行,一旦遇到复杂计算(...
学习面试
javascript2025-08-07
🌐AST抽象语法树
AST 是前端开发中一个非常重要的概念,它就像是代码的“编译器”,能够帮助我们理解和操作代码。本文将深入探讨 AST 的原理和应用,带你从零开始了解 AST。 一、什么是 AST? AST(抽象语法树)是一种树形结构,用于表示程序代码的语法结构。它将代码分解为一系列的节点,每个节点代表代码中的一个元素,如变量、函数、表达式等。AST 是编译器和解释器的基础,也是代码分析和转换的关键工具。 1\. AST 的结构 AST 的结构通常包括以...
学习面试
javascript2025-08-05
打字机效果是如何实现的
分析效果 使用 AI 对话的时候,文字是一个字一个字蹦出来的?它不是等所有内容生成完毕后一次性展示,而是以一种流畅、实时的“打字机”效果呈现,这种体验的背后,隐藏着一种高效的Web技术。它就是 服务器推送事件(Server Sent Events,简称 SSE) 什么是 SSE 从根本上说,SSE 是一种允许服务器 单向 、 持续 地向客户端(浏览器)推送数据的Web技术。 可以把它想象成一个 电台广播 : 服务器 是广播电台,持续不断...
学习面试
javascript2025-08-04
Promise 从原理到实现
前言 是 异步编程的核心概念之一,它为我们提供了一种更优雅的方式来处理异步操作。 本文将全面剖析 的工作原理,并逐步实现一个符合 规范的 。 正文 一、Promise 基础概念 代表一个异步操作的最终完成(或失败)及其结果值。它有 种状态: 1. pending : ,既不是成功,也不是失败状态 2. fulfilled :意味着操作 完成 3. rejected :意味着操作 状态一旦改变就不能再变,只能从 变为 ,或从 变为 。 二...
学习面试

评论

请登录后发表评论

去登录
加载评论中...

目录