详解如何解决使用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 相关文章推荐
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
浅谈JavaScript中this的指向问题
Jul 28 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
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
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
js 分栏效果实现代码
2009/08/29 Javascript
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
学生个人的自我评价分享
2013/11/05 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
党性修养心得体会2016
2016/01/21 职场文书
Sql Server之数据类型详解
2022/02/28 SQL Server
pandas中pd.groupby()的用法详解
2022/06/16 Python
2022年显卡天梯图(6月更新)
2022/06/17 数码科技