详解如何解决使用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 相关文章推荐
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
有关Promises异步问题详解
Nov 13 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
React Native 搭建开发环境的方法步骤
Oct 30 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 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
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
PHP中的日期加减方法示例
2014/08/21 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
php实现的xml操作类
2016/01/15 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
提升Python程序运行效率的6个方法
2015/03/31 Python
python实现web方式logview的方法
2015/08/10 Python
Python魔法方法详解
2019/02/13 Python
python3对接mysql数据库实例详解
2019/04/30 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
机电职业生涯规划书范文
2014/03/08 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
党课心得体会范文
2014/09/09 职场文书
会议接待欢迎标语
2014/10/08 职场文书
思想政治表现评语
2015/01/04 职场文书
天气温馨提示语
2015/07/14 职场文书
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python