详解如何解决使用JSON.stringify时遇到的循环引用问题


Posted in Javascript onMarch 23, 2021

程序员在日常做TypeScript/JavaScript开发时,经常需要将复杂的JavaScript对象通过JSON.stringify序列化成json字符串,保存到本地以便后续具体分析。

详解如何解决使用JSON.stringify时遇到的循环引用问题

然而如果JavaScript对象本身包含循环引用,则JSON.stringify不能正常工作,错误消息:

VM415:1 Uncaught TypeError: Converting circular structure to JSON

详解如何解决使用JSON.stringify时遇到的循环引用问题

解决方案,使用下面这段来自这个网站的代码,定义一个全局cache数组,每当待序列化的JavaScript对象的属性被遍历时,将该属性对应的值存储到cache数组去。

如果遍历时发现,有属性值已经在cache数组里有值了,说明检测到了循环引用,此时直接return退出循环即可。

var cache = [];
var str = JSON.stringify(o, function(key, value) {
  if (typeof value === 'object' && value !== null) {
    if (cache.indexOf(value) !== -1) {
      // 移除
      return;
    }
    // 收集所有的值
    cache.push(value);
  }
  return value;
});
cache = null; // 清空变量,便于垃圾回收机制回收

使用这种办法,我成功将一个存在循环引用的JavaScript对象序列化成字符串了。

详解如何解决使用JSON.stringify时遇到的循环引用问题

Javascript 相关文章推荐
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
JavaScript Accessor实现说明
Dec 06 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
js获取下拉列表的值和元素个数示例
May 07 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
vue实现短信验证码输入框
Apr 17 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 #Vue.js
JavaScript实现页面动态验证码的实现示例
使用Vue.js和MJML创建响应式电子邮件
JS原生实现轮播图的几种方法
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
vue+flask实现视频合成功能(拖拽上传)
Mar 04 #Vue.js
React服务端渲染原理解析与实践
Mar 04 #Javascript
You might like
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
javascript 跳转代码集合
2009/12/03 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
js获取内联样式的方法
2015/01/27 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
python实现反转部分单向链表
2018/09/27 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
Django中的session用法详解
2020/03/09 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
2015年药店工作总结
2015/04/20 职场文书
重阳节主题班会
2015/08/17 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
销售会议开幕词
2016/03/04 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
python内置模块之上下文管理contextlib
2022/06/14 Python
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android