JavaScript判断对象是否为空对象的几种方法

2023-11-05

var data = {};
var b = $.isEmptyObject(data); //true

判断是否为空对象

1、空对象对应的字符串为 “{}”

var data = {};
var b = JSON.stringify(data) == "{}";
console.log(b); // true

2、for in

var obj = {};
var b = function () {
  for (var key in obj) {
    return false;
  }
  return true;
};
console.log(b()); //true

3、jquery 的 isEmptyObject()方法

这个方法是对第二个方法的封装

var data = {};
var b = $.isEmptyObject(data);
console.log(b); //true

4、Object.getOwnPropertyNames()

Object 对象的 getOwnPropertyNames 方法,获取到对象中的属性名,存到一个数组中,返回数组对象,我们可以通过判断数组的 length 来判断此对象是否为空。

var data = {};
var arr = Object.getOwnPropertyNames(data);
console.log(arr.length == 0); // true

5、ES6 的 Object.keys()

此方法也是返回对象中属性名组成的数组。

var data = {};
var arr = Object.keys(data);
console.log(arr.length == 0); // true

6、JSON.stringify()扩展

JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
语法:

JSON.stringify(value[, replacer[, space]])

参数说明:

  • value:必需,要转换的 JavaScript 值(通常为对象或数组)。

  • replacer: 可选。用于转换结果的函数或数组。 如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值。使用返回值而不是原始值。 如果此函数返回 undefined,则排除成员。根对象的键是一个空字符串:“”。如果 replacer 是一个数组,则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。

  • space:可选,文本添加缩进、空格和换行符,如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 space 大于 10,则文本缩进 10 个空格。space 也可以使用非数字,如:\t。

  • 返回值:返回包含 JSON 文本的字符串。

JSON.stringify()特性具体如下:

(一)

undefined、任意的函数以及 symbol 作为对象属性值时 JSON.stringify() 对跳过(忽略)它们进行序列化。

  • undefined、任意的函数以及 symbol 作为数组元素值时,JSON.stringify() 将会将它们序列化为 null。

  • undefined、任意的函数以及 symbol 被 JSON.stringify() 作为单独的值进行序列化时,都会返回 undefined。

(二)

非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。因为 JSON.stringify() 序列化时会忽略一些特殊的值,所以不能保证序列化后的字符串还是以特定的顺序出现(数组除外)。

const data = {
  a: "aaa",
  b: undefined,
  c: Symbol("dd"),
  fn: function () {
    return true;
  },
  d: "ddd",
};
JSON.stringify(data); // 输出:?
// "{"a":"aaa","d":"ddd"}"
 
JSON.stringify([
  "aaa",
  undefined,
  function aa() {
    return true;
  },
  Symbol("dd"),
  "eee",
]); // 输出:?
 
// "["aaa",null,null,null,"eee"]"

(三)

JSON.stringify() 将会正常序列化 Date 的值。

JSON.stringify({ now: new Date() });
// "{"now":"2019-12-08T07:42:11.973Z"}"

(四)

转换值如果有 toJSON() 函数,该函数返回什么值,序列化结果就是什么值,并且忽略其他属性的值。

JSON.stringify({
    say: "hello JSON.stringify",
    toJSON: function() {
      return "today i learn";
    }
  })
// "today i learn"

(五)

NaN 和 Infinity 格式的数值及 null 都会被当做 null。

JSON.stringify(NaN)
// "null"
JSON.stringify(null)
// "null"
JSON.stringify(Infinity)
// "null"

(六)

布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。

JSON.stringify([new Number(1), new String("false"), new Boolean(false)]);
// "[1,"false",false]"

(七)

其他类型的对象,包括 Map/Set/WeakMap/WeakSet,仅会序列化可枚举的属性。

// 不可枚举的属性默认会被忽略:
JSON.stringify( 
    Object.create(
        null, 
        { 
            x: { value: 'json', enumerable: false }, 
            y: { value: 'stringify', enumerable: true } 
        }
    )
);
// "{"y":"stringify"}"

(八)

深拷贝最粗暴的方式是JSON.parse(JSON.stringify()),这个方式实现深拷贝会因为序列化的诸多特性从而导致诸多的坑点:比如现在我们要说的循环引用问题。

// 对包含循环引用的对象(对象之间相互引用,形成无限循环)执行此方法,会抛出错误。 
const obj = {
  name: "loopObj"
};
const loopObj = {
  obj
};
// 对象之间形成循环引用,形成闭环
obj.loopObj = loopObj;
 
// 封装一个深拷贝的函数
function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}
// 执行深拷贝,抛出错误
deepClone(obj)
/**
 VM44:9 Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'loopObj' -> object with constructor 'Object'
    --- property 'obj' closes the circle
    at JSON.stringify (<anonymous>)
    at deepClone (<anonymous>:9:26)
    at <anonymous>:11:13
 */
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript判断对象是否为空对象的几种方法 的相关文章

  • 如何在 Electron 应用程序中通过 navigator.geolocation 获取当前位置?

    当我尝试获取当前位置时 navigator geolocation getCurrentPosition handleCoordinates handleError timeout 10000 它返回 网络位置提供商位于 https www
  • 跨域iframe自动调整大小

    我正在使用 iframe 和 javascript 制作一个 Web 小部件 我想让我的 iframe 能够根据其内容 从其他域加载 调整大小 我做了一些搜索 包括在 Stack Overflow 上 我找到了几个主题 但我找不到关于这个问
  • Javascript 函数与 php 一样吗?

    我在网站上使用 WebIM 提供聊天支持 我希望能够在客户端启动聊天会话时设置一个计时器 如果操作员 技术人员在 x 秒内没有响应 我希望页面重定向到客户端可以留言的另一个页面 有点像 请稍等 我们尝试联系您 这样 如果所有技术人员都太忙或
  • 将按键和焦点事件附加到 contenteditable div 内的元素

    我想附上keypress and focusoutcontenteditable 内段落的事件处理程序div 下面的代码似乎不起作用 div p Test p p Test p p Test p div p1 bind keypress f
  • WebGL iOS 渲染为浮点纹理

    我正在尝试在 iOS Safari 上的 WebGL 中渲染浮点纹理 而不是在本机应用程序中 我已经设法让 iOS 读取手动 例如从 JavaScript 创建的浮点纹理 但是当我创建浮点类型的帧缓冲区并使用 GPU 渲染到其中时 它不起作
  • 单击量角器中元素的给定坐标

    我想点击我的特定位置canvas元素 所以我编写了以下量角器代码 var canvas element by id canvas var clickCanvas function toRight toBottom browser actio
  • 如何将元素的每个单词包装在span标签中?

    div date contents filter function return this nodeType 1 wrap span span 我是新手 认为代码可以解决问题 但它将所有内容都包含在 span 像这样 div class d
  • ExitFullScreen 不起作用 + 无论如何要按键盘单击按钮?

    我的浏览器 Google Chrome 版本 33 0 1750 154 m Script function exitFullscreen var element document documentElement if element mo
  • 如何处理 d3 中 Beeswarm 图中的碰撞?

    我一直在玩这个例子here https gf neocities org co2bs co2bee html一会儿 我想做的是突出显示图中的单个节点 圆圈 通过使用边框使其变大 稍后我也想在其中添加文本或字母 目前 我已经圈了Bhutan图
  • 如何延迟 NavLink 的反应?

    Delay e gt e preventDefault setTimeout gt e unpreventDefault make this work 500 render
  • JavaScript:参数列表后缺少 )

    这个 JavaScript 产生一个错误 参数列表后缺少 在 firebug 中使用代码 我究竟做错了什么 功能d缺少左括号 answer after 不应该逃避 只需常规报价即可
  • Angular - Safari 无法正确显示 DOM

    我是 Angular 的新手 使用 Angular 4 我尝试通过在关联的组件类文件中设置属性来更新特定元素 但是 除非我尝试强制重新绘制网页 通过调整窗口大小等 否则页面不会更新 我打开检查器 看到 DOM 已更改 但显示与元素检查器中的
  • JQuery 可排序嵌套可排序 div

    这个问题与这个有关Nest jQuery UI 可排序 https stackoverflow com questions 19129476 nest jquery ui sortables 但我无法解决我的问题 问题是 我有一个包含项目的
  • 使用 jQuery 的 javascript 关联数组长度

    我正在使用 javascript 关联数组 例如 var testarray testarray one 1 testarray two 2 testarray three 3 我也在旁边使用jquery 如何使用 jquery 或任何其他
  • 如何使用javascript隐藏div

    我想使用 Javascript 隐藏一个 div 下面是我的div div class ui dialog titlebar ui widget header ui corner all ui helper clearfix span cl
  • 在js中检测浏览器的最佳方法

    JavaScript 中有很多浏览器检测方法 据我所知 使用navigator userAgent或检测特征 例如XMLHttpRequest 等等 谁能告诉我哪种方法最好 最有效 如果你真的需要知道什么browser他们正在使用 你主要需
  • 设置股票数据 Highcharts xAxis 的格式

    我已经浏览了需要为 xAxis 属性设置的 Highcharts 选项来格式化时间标签 但没有运气了解这对于这种情况到底是如何工作的 我在白天 盘中 检索了股票的动态数据 我需要显示这些数据 因为检索的数据每天从 9 30 开始到 17 0
  • 在 React JSX 中返回配对元素

    问题 在 React 中 您希望通过映射数组来创建 DOM 结构 但数组中的每个项目应返回 2 个元素 例如 import React from react import from lodash let Component React ex
  • 如何在 JSP 编辑器中激活 javascript 的语法着色 - Eclipse

    在某些情况下 javascript 确实必须位于 JSP 页面中 而不是位于单独的文件中 有些框架还使用Javascript做一些事情 以便用户将其包含到JSP标签中 这样JS就不会出现在
  • 如何用时刻找到与给定时间最接近的时间?

    所以我有一个简单的代码 一个工作代码 它使用 moment 获取最接近给定时间的时间 Current time in millis const now moment 10 16 HH mm format x List of times co

随机推荐

  • java获取微信用户信息(UnionID)

    本篇主要是针对用户关注公众号 然后利用接口获取用户的信息包括unionid信息 首先就是获取微信access token的值 官方文档 https mp weixin qq com wiki t resource res main id m
  • rockchip rk3368(px5)车载开发之路2,屏幕正常显示(不对的地方是UI)

    本系列记载作者来到一个新的车载后装市场小公司 负责从新开始维护一套代码的心路过程 系统使用瑞芯微的rk3368芯片 版本是PX5 Android 8 0 release 20180726 从无到有的每个patch修改以及思考 其中着重点是驱
  • 不好意思,list.contain 去重该换换了!

    程序员的成长之路 互联网 程序员 技术 资料共享 关注 阅读本文大概需要 3 5 分钟 来自 blog csdn net qq 35387940 article details 129885310 最近又是一轮代码review 发现了一些实
  • 法宣在线积分小程序python学满指定分钟数自动关闭

    微信 法宣在线积分学习小程序 可自动学 有不明白的可以联系我 这种只是辅助 不能一天刷很多 比如一天100多分就可以了不要太多 不然会被查 如果没电脑的 可以发账号给我 我把法宣在线的账号登录上每天自动积分就可以了 电脑端exe 打包下载
  • Memcached简单介绍

    介绍 Memcached 是一个高性能的分布式内存对象缓存系统 用于动态Web应用以减轻数据库负载 它通过在内存中缓存数据和对象来减少读取数据库的次数 从而提高动态 数据库驱动网站的速度 Memcached基于一个存储键 值对的hashma
  • flutter 导出iOS问题2

    问题1 The Swift pod FirebaseCoreInternal depends upon GoogleUtilities which does not define modules To opt into those targ
  • Vue 之 Toast 消息提示插件的简单封装

    Vue 之 Toast 消息提示插件的简单封装 目录 Vue 之 Toast 消息提示插件的简单封装 一 简单介绍 二 实现原理 三 注意事项 四 效果预览 五 实现 六 项目源码 一 简单介绍 Vue 开发的一些知识整理 方便后期遇到类似
  • vue 报错:Cannot read property 'xxx' of undefined",但是页面能渲染上数据

    有时候会遇到给页面绑定数据的时候 可以绑定成功 但vue warn xxx属性of undefined 如果本组件只是绑定简单的数据倒是可以忽略 如果本组件还引入了其他组件或第三方组件 插件 则就渲染不出来 就需要解决了
  • SQL WHERE语句

    文章目录 WHERE基础语法 WHERE AND OR WHERE ORDER BY ORDER BY ORDER BY ASC DESC ORDER BY 多列 WHERE基础语法 SELECT FROM table name WHERE
  • npm run dev 报错:missing script:dev

    在 npm run dev 或 npm start 报错 打开package js 发现没有script 里面的内容 本应该有如图内容 解决方法 1 vue init webpack package js文件中会添加内容 2 npm run
  • C# ThreadPool 线程池

    线程 被定义为程序的执行路径 每个线程都定义了一个独特的控制流 如果您的应用程序涉及到复杂的和耗时的操作 那么设置不同的线程执行路径往往是有益的 每个线程执行特定的工作 线程是轻量级进程 一个使用线程的常见实例是现代操作系统中并行编程的实现
  • IPv4地址分类(A类 B类 C类 D类 E类)

    5类地址 A类 B类 C类 D类 E类 IPv4地址由四段组成 每个字段是一个字节 8位 最大值是255 IPv4地址由两部分组成 即网络地址和主机地址 网络地址表示其属于互联网的哪一个网络 主机地址表示其属于该网络中的哪一台主机 二者是主
  • 在windows上配置git支持多账号

    1 背景 现在大多数人都采用git进行版本管理 在git下面进行开发被越来越多的程序员所接受 还有越来越多的人参与开源社区的建设 现在有一个问题就是 在windows环境下 如何在git客户端上通过ssh key的方式配置多个账号 不需要输
  • 算法也要面向对象OO

    直接去模糊的去写 通过调试 一步步改 就算最后写出来了也不知道怎么写出来的 一定要先有整体思路 面向操作会很凌乱 算法也要面向对象 识别出变量 定义有确切含义的变量 以及这边变量之间互动的关系 时刻维护变量意义的正确性 也就是invaria
  • Flutter项目——静态页面布局4详情页

    详情页 override Widget build BuildContext context return Scaffold appBar AppBar widget代表了我们的 MovieDetail 这个类 当前类是控制器 需要用 wi
  • python模拟点击网页按钮_网页自动化开发(第一章)

    Web网页可以用许多工具进行开发 本文重点是介绍如何在python中使用Selenium实现网页自动化开发 主要先介绍Selenium的概念 开发环境搭建 selenium模拟用户打开浏览器并实现自动操作浏览的网页 比较适用于seleium
  • Centos7如何安装图形化界面 and 设置开机默认进入图形化界面

    因为VMware安装虚拟机的时候默认是最小安装的 所以没有图形化界面 这样将本机文件转移到虚拟机上的时候特别不方便 而装好图形化界面之后只需在本机复制 crtl c 然后在虚拟机中对应位置右键paste即可 1 打开命令行 输入 yum y
  • 蛇形/回形矩阵(超详细!看了不会你来打我)

    回型矩阵 给你一个整数n 按要求输出n n的回型矩阵 例如输入n 4 输出如下 分析 回形矩阵的填充轨迹如下所示 填充顺序 最上面的行 gt 最右边的列 gt 最下面的行 gt 最左边的列 gt 最上面的行 gt 首先 我们可以看出 填充轨
  • 使用SQL语句查询经纬度之间的距离和一定范围内的数据

    declare a decimal 18 7 经度 declare b decimal 18 7 维度 set a 119 921001 set b 35 943285 declare c decimal 18 7 set c 6371 地
  • JavaScript判断对象是否为空对象的几种方法

    目录 1 空对象对应的字符串为 2 for in 3 jquery 的 isEmptyObject 方法 4 Object getOwnPropertyNames 5 ES6 的 Object keys 6 JSON stringify 扩