详解如何解决使用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支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
jquery UI 1.72 之datepicker
Dec 29 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
基于js实现逐步显示文字输出代码实例
Apr 02 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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
附件名前加网站名
2008/03/23 PHP
php 文章采集正则代码
2009/12/28 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
JQuery toggle使用分析
2009/11/16 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
Cpy和Python的效率对比
2015/03/20 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
python如何实现复制目录到指定目录
2020/02/13 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
李宁官方网店:中国运动品牌
2017/11/02 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
园林设计师自荐信
2013/11/18 职场文书
初中中等生评语
2014/12/29 职场文书
人民调解协议书
2016/03/21 职场文书
vue elementUI批量上传文件
2022/04/26 Vue.js