详解如何解决使用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 相关文章推荐
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
B/S模式项目中常用的javascript汇总
Dec 17 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
ES6的解构赋值实例详解
May 06 Javascript
用JS实现选项卡
Mar 23 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
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设计模式 Proxy (代理模式)
2011/06/26 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python 除法小技巧
2008/09/06 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
学Python 3的理由和必要性
2019/11/19 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
工厂仓管员岗位职责
2014/01/01 职场文书
英语专业求职信
2014/07/08 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
班主任经验交流材料
2014/12/16 职场文书
党员倡议书
2015/01/19 职场文书
个人优缺点总结
2015/02/28 职场文书
经理聘任证明
2015/03/02 职场文书
公司酒会致辞
2015/07/30 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android