在JavaScript开发中,如何判断对象自身为空?

前言

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

1. JSON.stringify

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

const obj = {};console.log(JSON.stringify(obj) === '{}')  // true

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

如下示例:

const obj = {a: undefined,b: function() {},c: Symbol()
}console.log(JSON.stringify(obj) === '{}')  // true

2. for in 配合 hasOwnProperty

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

const obj = {}
Object.prototype.a = 1function isEmptyObj(obj) {let flag = truefor (let o in obj) {flag = falsebreak}return flag
}console.log(isEmptyObj(obj))  // false

由于 for in 在进行对象遍历时,会遍历对象原型上的属性,而我们只希望得到其自身的属性,这时可以使用 hasOwnProperty 来实现,如下:

const obj = {}
Object.prototype.a = 1function isEmptyObj(obj) {let flag = truefor (let o in obj) {if (obj.hasOwnProperty(o)) {flag = falsebreak}}return flag
}console.log(isEmptyObj(obj))  // true

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

3. Object.keys

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

const obj = {}
Object.prototype.a = 1console.log(Object.keys(obj).length === 0)  // true

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

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

const obj = {}
Object.defineProperty(obj, 'a', {value: 1,enumerable: false
})console.log(obj.a)  // 1
console.log(isEmptyObj(obj))  // true
console.log(Object.keys(obj).length === 0)  // true

4. Object.getOwnPropertyNames

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

const obj = {}
Object.defineProperty(obj, 'a', {value: 1,enumerable: false
})console.log(Object.getOwnPropertyNames(obj))  // [ 'a' ]

缺点:不能获取 Symbol 值作为名称的属性,以上的 JSON.stringify、for in 以及 Object.keys 方法也不能获取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(isEmptyObj(obj))  // true
console.log(Object.keys(obj).length === 0)  // true

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)  // false
console.log(getLength(obj2) === 0)  // false
console.log(getLength(obj3) === 0)  // false
console.log(getLength(obj4) === 0)  // true

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

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)  // 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

总结

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

关于优联前端

        武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办,是一家致力于H5前端技术研究的科技创新型公司,为合作伙伴提供专业高效的前端解决方案,合作伙伴遍布中国及东南亚地区,行业涵盖广告,教育, 医疗,餐饮等。有效的解决了合作伙伴的前端技术难题,节约了成本,实现合作共赢。可进行Web前端、微信小程序、小游戏,2D/3D游戏,动画交互与UI广告设计等各种技术研发。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/504186.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud系列教程:微服务的未来(十)服务调用、注册中心原理、Nacos注册中心

本博客将重点介绍服务调用和注册中心的原理,特别是以 Nacos 为例,详细讲解 Nacos 注册中心如何实现服务的注册与发现。同时,分析 Nacos 注册中心在分布式微服务中的应用,帮助开发者更好地理解其工作机制。 目录 前言 微服务拆分…

NRC优先级中比较特殊的—NRC0x13和NRC0x31

1、基础知识 大家都了解 NRC0x13,表示长度错误和格式错误 NRC0x31,表示DID不支持和数据格式不支持 2、为什么说这两个NRC比较特殊 看下图的标注部分: 2.1、先看NRC0x13 步骤一:仔细看是先判断Minmun Length Check &#xff0…

Redis 笔记(二)-Redis 安装及测试

一、什么是 Redis 中文网站 Redis(Remote Dictionary Server ),即远程字典服务,是一个开源的使用 ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value,并提供多种语言的 API。 Redis 开源,遵循 BSD 基…

eNSP之家——路由器--入门实例详解

eNSP路由器配置:IP、DHCP与DNS详解-CSDN博客 练习1:两个路由器配置ip地址,并用ping命令测试连通性。 打开ensp,拉进来两个路由器AR2220,再用auto连接两个路由器。 选中两个路由器,右键启动,等待半分钟路由…

Electron快速入门——跨平台桌面端应用开发框架

个人简介 👀个人主页: 前端杂货铺 🙋‍♂️学习方向: 主攻前端方向,正逐渐往全干发展 📃个人状态: 研发工程师,现效力于中国工业软件事业 🚀人生格言: 积跬步…

机器学习基础-机器学习的常用学习方法

目录 半监督学习的概念 规则学习的概念 基本概念 机器学习里的规则 逻辑规则 规则集 充分性与必要性 冲突消解 命题逻辑 → 命题规则 序贯覆盖 单条规则学习 剪枝优化 强化学习的概念 1. 强化学习对应了四元组 2. 强化学习的目标 强化学习常用马尔可夫决策过程…

Qt QDockWidget详解以及例程

Qt QDockWidget详解以及例程 引言一、基本用法二、深入了解2.1 窗口功能相关2.2 停靠区域限制2.3 在主窗体布局 引言 QDockWidget类提供了一个可以停靠在QMainWindow内的小窗口 (理论上可以在QMainWindow中任意排列),也可以作为QMainWindow上的顶级窗口浮动 (类似一…

【设计模式-2】23 种设计模式的分类和功能

在软件工程领域,设计模式是解决常见设计问题的经典方案。1994 年,Erich Gamma、Richard Helm、Ralph Johnson 和 John Vlissides(四人帮,GoF)在《设计模式:可复用面向对象软件的基础》一书中系统性地总结了…

【Linux 之 二十 】使用 ln 命令创建符号链接

ln(英文全拼:link files)是Linux中非常重要的一个命令,用创建一个硬链接或者一个符号链接(也叫软链接)。它的功能是为某一个文件或目录在另外一个位置建立一个同步的链接。当我们需要在多个目录下都能显示某…

B树及其Java实现详解

文章目录 B树及其Java实现详解一、引言二、B树的结构与性质1、节点结构2、性质 三、B树的操作1、插入操作1.1、插入过程 2、删除操作2.1、删除过程 3、搜索操作 四、B树的Java实现1、节点类实现2、B树类实现 五、使用示例六、总结 B树及其Java实现详解 一、引言 B树是一种多路…

Nature Electronics——近传感器计算:50 nm异构集成技术的革命

创新点:1.高密度互联设计:基于二维材料,开发出互连密度高达62,500 I/O每平方毫米的M3D集成结构。2.异构层堆叠:整合了第二层石墨烯化学传感器和第一层MoS₂记忆晶体管,实现功能互补。3.超短传感器与计算元件距离&#…

如何用 ESP32-CAM 做一个实时视频流服务器

文章目录 ESP32-CAM 概述ESP32-S 处理器内存Camera 模块MicroSD 卡槽天线板载 LED 和闪光灯其他数据手册和原理图ESP32-CAM 功耗 ESP32-CAM 引脚参考引脚排列GPIO 引脚哪些 GPIO 可以安全使用?GPIO 0 引脚MicroSD 卡引脚 ESP32-CAM 的烧录方式使用 ESP32-CAM-MB 编程…

江科大STM32入门——IIC通信笔记总结

wx:嵌入式工程师成长日记 (一)简介 STM32内部集成了硬件I2C收发电路,可以由硬件自动执行时钟生成、起始终止条件生成、应答位收发、数据收发等功能,减轻CPU的负担 支持多主机 支持7位/10位地址模式 支持不同的通讯速…

vue2日历组件

这个代码可以直接运行&#xff0c;未防止有组件库没安装&#xff0c;将组件库的代码&#xff0c;转成文字了 vue页面 <template><div class"about"><div style"height: 450px; width: 400px"><div style"height: 100%; overflo…

Java语法总结

Java的数据类型分为基本数据类型和引用数据类型。 1.基本数据类型&#xff1a;四类八种 byte 和short 比较特殊&#xff0c;不必考虑int类型&#xff0c;只关注是否超出了表示范围。 数据超出了int的范围&#xff0c;改正&#xff1a;在后边添加L &#xff0c;定义变量报错…

自动驾驶控制与规划——Project 6: A* Route Planning

目录 零、任务介绍一、算法原理1.1 A* Algorithm1.2 启发函数 二、代码实现三、结果分析四、效果展示4.1 Dijkstra距离4.2 Manhatten距离4.3 欧几里德距离4.4 对角距离 五、后记 零、任务介绍 carla-ros-bridge/src/ros-bridge/carla_shenlan_projects/carla_shenlan_a_star_p…

闲谭SpringBoot--ShardingSphere分库分表探究

文章目录 1. 背景2. 创建数据库3. 修改yml配置文件4. 分片算法类5. 测试6 小结 1. 背景 接上文&#xff0c;我们对日志表&#xff0c;进行了按月的分表&#xff0c;这样每个月几百万条数据量还是扛得住的。 但是如果数据再多呢&#xff0c;除了提高硬件性能&#xff0c;还有一…

IT面试求职系列主题-Jenkins

想成功求职&#xff0c;必要的IT技能一样不能少&#xff0c;先说说Jenkins的必会知识吧。 1) 什么是Jenkins Jenkins 是一个用 Java 编写的开源持续集成工具。它跟踪版本控制系统&#xff0c;并在发生更改时启动和监视构建系统。 2&#xff09;Maven、Ant和Jenkins有什么区别…

STM32供电参考设计

STM32供电参考设计 ​ 在图中有VDD&#xff0c;VSS和VDDA&#xff0c;VSSA两种类型的供电引脚&#xff0c;其数据手册解释如下&#xff1a; ​ 令我不解的是&#xff1a;VDDA和VSSA必须分别连接到VDD和VSS&#xff0c;这是什么意思&#xff1f;有大佬能够解答一下吗&#xff1f…

和为0的四元组-蛮力枚举(C语言实现)

目录 一、问题描述 二、蛮力枚举思路 1.初始化&#xff1a; 2.遍历所有可能的四元组&#xff1a; 3.检查和&#xff1a; 4.避免重复&#xff1a; 5.更新计数器&#xff1a; 三、代码实现 四、运行结果 五、 算法复杂度分析 一、问题描述 给定一个整数数组 nums&…