详解如何解决使用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 白痴级入门教程
Nov 11 Javascript
javascript OFFICE控件测试代码
Dec 08 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
JS实现在线ps功能详解
Jul 31 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
原生js实现自定义滚动条
Jan 20 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 应用程序安全防范技术研究
2009/09/25 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
PDO::errorInfo讲解
2019/01/28 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
JS 事件绑定函数代码
2010/04/28 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
JavaScript计时器示例分析
2015/02/05 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
用pandas按列合并两个文件的实例
2018/04/12 Python
python批量获取html内body内容的实例
2019/01/02 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
采购类个人求职的自我评价
2014/02/18 职场文书
高三学习决心书
2014/03/11 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
投资意向协议书
2015/01/29 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
Python中使用ipython的详细教程
2021/06/22 Python
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript