详解如何解决使用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脚本学习 比较实用的基础
Sep 07 Javascript
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
改写一个简单的菜单 弹性大小
Dec 02 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
详解关于Vue单元测试的几个坑
Apr 26 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中的时间显示
2007/01/18 PHP
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
浅析php原型模式
2014/11/25 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
浅谈编码,解码,乱码的问题
2016/12/30 Python
python使用mysql数据库示例代码
2017/05/21 Python
python求最大连续子数组的和
2018/07/07 Python
python适合人工智能的理由和优势
2019/06/28 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
购买大码女装:Lane Bryant
2016/09/07 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
护理学专业推荐信
2013/12/03 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
校园环保标语
2014/06/13 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL