详解如何解决使用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 相关文章推荐
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
js动态设置div的值下例子
Oct 29 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
javascript实现简易计算器功能
Sep 23 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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函数
2010/01/11 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
javascript css styleFloat和cssFloat
2010/03/15 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
浅析Python多线程下的变量问题
2015/04/28 Python
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
python 实时遍历日志文件
2016/04/12 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
大班上学期幼儿评语
2014/04/30 职场文书
骨干教师事迹材料
2014/12/17 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python