详解如何解决使用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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
js+css3实现简单时钟特效
Sep 13 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 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/03/10 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
深入解析Python中的lambda表达式的用法
2015/08/28 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
python处理按钮消息的实例详解
2017/07/11 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
Python扩展内置类型详解
2018/03/26 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
应征英语教师求职信
2013/11/27 职场文书
党章学习思想汇报
2014/01/14 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
党支部特色活动方案
2014/08/20 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
2014年人事部工作总结
2014/12/03 职场文书
婚前保证书范文
2015/02/28 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技