js判断是否对象自身为空

文章目录

  • 一、前言
  • 二、`JSON.stringify`
  • 三、`for in` 配合 `hasOwnProperty`
  • 四、`Object.keys`
  • 五、`Object.getOwnPropertyNames`
  • 六、`Object.getOwnPropertyNames` 结合 `Object.getOwnPropertySymbols`
  • 七、`Reflect.ownKeys`
  • 八、最后

一、前言

如何判断一个对象为空?

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

今天我们来聊聊几种经常使用的方法,以及在不同的场景下我们如何去使用。

二、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

三、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))  // false

由于 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))  // true

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

四、Object.keys

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

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

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

缺点Object.keysfor 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

五、Object.getOwnPropertyNames

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

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

console.log(Object.getOwnPropertyNames(obj))  // [ 'a' ]

缺点:不能获取 Symbol 值作为名称的属性,以上的 JSON.stringifyfor 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

六、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

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

七、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

八、最后

本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注✨。一起加油☕

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

前端面试——CSS面经(持续更新)

1. CSS选择器及其优先级 !important > 行内样式 > id选择器 > 类/伪类/属性选择器 > 标签/伪元素选择器 > 子/后台选择器 > *通配符 2. 重排和重绘是什么?浏览器的渲染机制是什么? 重排(回流):当增加或删除dom节点&…

深入理解Dubbo-3.高级功能剖析和原理解析

👏作者简介:大家好,我是爱吃芝士的土豆倪,24届校招生Java选手,很高兴认识大家📕系列专栏:Spring源码、JUC源码、Kafka原理、分布式技术原理🔥如果感觉博主的文章还不错的话&#xff…

深入理解JavaScript的箭头函数

深入理解JavaScript的箭头函数 在ES6中,JavaScript引入了箭头函数的概念,它提供了一种更简洁的语法来定义匿名函数。虽然箭头函数看起来很简单,但它们在实际应用中有一些独特的特性和行为。让我们深入理解箭头函数并学习如何正确地使用它们。…

ES6之Map对象

ES6提供了 Map数据结构。它类似于对象,也是键值对的集合。但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。 创建方法 let m new Map()console.log(m)Map的方法 1.set( ) 添加元素 接收两个参数&#xff0c…

iMazing 2.17.10官方中文版含2023最新激活许可证码

iMazing是一款iOS设备管理软件,界面简洁功能丰富,但其中还有一个界面更简洁,功能更精炼的小工具,适合轻量级的用户日常来使用,更加方便快捷。接下来,小编就来教大家如何使用iMazing MiNi,以及它…

2-2、基本数据类型

语雀原文链接 文章目录 1、数据类型分类2、基本数据类型2-1、布尔型boolean2-2、字符型char2-3、整型 byte short int long2-4、浮点型float double 3、基本类型转换byte特例char特例 1、数据类型分类 Java 语言是一种强类型语言。通俗点说就是,在 Java 中存储的数…

卡码网 46携带研究材料 LeetCode 416分割等和数组 1049最后一块石头的重量-ii | 代码随想录25期训练营day42、43

动态规划算法4 卡码网 46 携带研究材料 2023.12.6 题目链接常规二维dp数组方法代码随想录讲解[链接]一维滚动数组方法代码随想录讲解[链接] //二维dp数组做法 #include<bits/stdc.h> using namespace std;int main() {//m为材料种类数&#xff0c;n为行李箱最大空间数…

手眼标定 - 最终精度和误差优化心得

手眼标定 - 标定误差优化项 一、TCP标定误差优化1、注意标定针摆放范围2、TCP标定时的点次态与工作姿态尽可能保持相近 二、深度相机对齐矩阵误差1、手动计算对齐矩阵 三、手眼标定拍照姿态1、TCP标定姿态优先2、水平放置棋盘格优先 为减少最终手眼标定的误差&#xff0c;可做或…

首次发布亚马逊云科技生成式AI技术堆栈,re:Invent大会重磅发布

亚马逊云科技总是在不断重构&#xff0c;以推动创新&#xff0c;而今年re:Invent的主角毫无疑问是生成式AI。这从亚马逊云科技副总裁、首席布道师Jeff Barr在re:Invent 2023之前就迫不及待地写了一篇关于PartyRock的体验试玩教程即可窥见一斑。 事实也确实如此。在Las Vegas&am…

什么是HTML?

✨前言✨ 本文主要介绍什么是HTML以及W3C &#x1f352;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f352;博主将持续更新学习记录收获&#xff0c;友友们有任何问题可以在评论区留言 文章目录 什么是HTMLHTML发展史HTML的特点什么…

编程怎么学才能快速入门,分享一款中文编程工具快速学习编程思路,中文编程工具之分组框构件简介

一、前言&#xff1a; 零基础自学编程&#xff0c;中文编程工具下载&#xff0c;中文编程工具构件之扩展系统菜单构件教程 编程系统化教程链接 https://jywxz.blog.csdn.net/article/details/134073098?spm1001.2014.3001.5502 给大家分享一款中文编程工具&#xff0c;零基础…

Linux权限命令详解

Linux权限命令详解 文章目录 Linux权限命令详解一、什么是权限&#xff1f;二、权限的本质三、Linux中的用户四、linux中文件的权限4.1 文件访问者的分类&#xff08;人&#xff09;4.2 文件类型和访问权限&#xff08;事物属性&#xff09; 五、快速掌握修改权限的做法【第一种…

windows下分卷解压文件

我的文件是这样的&#xff1a; 存放路径为&#xff1a;C:\Users\Luli_study\MICCAI_MMAC\fudanuniversity\DDR dataset 首先要进入分卷文件的目录cd&#xff1a; 第一步&#xff1a;cd /path/o/分卷问文件目录 第二步&#xff1a; 执行之后的结果(红色框出来的)&#xff1a; …

如何掌握构建 LMS 网站的艺术

目录 什么是学习管理系统 (LMS) 在线课程和 LMS 网站的好处 为什么 WordPress 对于 LMS 网站很重要 统一学习中心 多功能性和可扩展性 提高教育参与度 简化管理和监控 节省时间和费用 技能评估和绩效监督 持续学习和技能提升 使用 WordPress 插件构建成功的 LMS 课程 专注于您的…

力扣257. 二叉树的所有路径(递归回溯与迭代)

题目&#xff1a; 给你一个二叉树的根节点 root &#xff0c;按 任意顺序 &#xff0c;返回所有从根节点到叶子节点的路径。 叶子节点 是指没有子节点的节点。 示例 1&#xff1a; 输入&#xff1a;root [1,2,3,null,5] 输出&#xff1a;["1->2->5","…

【小白专用】Sql Server 连接Mysql 更新23.12.09

目标 已知mysql连接参数&#xff08;地址和用户&#xff09;&#xff0c;期望通过Microsoft Sql Server Management Studio &#xff08;以下简称MSSSMS&#xff09;连接Mysql&#xff0c;在MSSSMS中直接查询或修改Mysql中的数据。 一般是选最新的版本下载。 选64位还是32位&a…

java--包装类

1.包装类 ①包装类就是把基本类型的数据包装成对象。 ②自动装箱&#xff1a;基本数据类型可以自动转换为包装类型。 ②自动拆箱&#xff1a;包装类型可以自动转换为基本类型。 2.包装类的其他常见操作 ①可以把基本类型的数据换成字符串类型。 ②可以把字符串类型的数值转…

轻量封装WebGPU渲染系统示例<45>- 材质组装流水线(MaterialPipeline)灯光、阴影、雾(源码)

当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/feature/material/src/voxgpu/sample/MaterialPipelineFog.ts 当前示例运行效果: 此示例基于此渲染系统实现&#xff0c;当前示例TypeScript源码如下&#xff1a; export class MaterialPipelineFog {pr…

9.MySQL 索引

目录 ​​​​​​​概述 概念&#xff1a; 单列索引 普通索引 创建索引 查看索引 删除索引 唯一索引 创建唯一索引 删除唯一索引 主键索引 组合索引 创建索引 全文索引 概述 使用全文索引 空间索引 内部原理 相关算法&#xff1a; hash算法 二叉树算法 …

阿里二面:消息队列的事务消息可以用 TCC 模式实现吗?

大家好&#xff0c;我是君哥。 消息队列的主要功能是系统间解耦&#xff0c;实现流量的削峰填谷。主流的消息队列一般有三个核心操作&#xff1a;消费者发送消息&#xff0c;Broker 保存消息&#xff0c;消费者消费消息。如下图&#xff1a; 对于一个完整的事务消息&#xff0…