JSON.stringify循环引用问题

前端使用到对象的深度复制通常会简单的使用JSON.parse(JSON.stringify(obj))实现 (浅表复制会用Array.from、Object.assign、Object.create静态方法实现),但在对象存在循环引用的情况下(比如:树结构中子对象存在parent属性存放父对象引用的情况)只是使用JSON.stringify(obj)会导致 “​TypeError: Converting circular structure to JSON​” 的循环引用错误: 

 这种情况可以利用JSON.stringify的可选参数“replacer”来解决问题

JSON.stringify 语法

JSON.stringify(value[, replacer [, space]])

 相关知识点: toJSON 方法

以下解决方法是传递函数作为“replacer”参数,过滤掉“_parent”属性(还有一种更简单的方式是传递“不包含_parent属性名,只包含所需要属性的名字的字符串数组”作为“replacer”参数即可轻松解决上面的错误):

以上代码中,this.MilestoneTrees是一个树状结构的数组,其中子结节中的“_parent”属性存放着对父节点的引用,这种情况直接只用“JSON.stringify(this.MilestoneTrees)”会导致文中开头所示的错误

  

还有一种解决方法,见以下文章,原理也是一样的,全文如下:

https://blog.51cto.com/u_15311558/5758502

在使用JSON.stringify方法去转化成字符串,会报错​​TypeError: Converting circular structure to JSON​​
原因: 对象中有对自身的循环引用;

 

解决方法:
下面的 ​​​json_str​​​ 就是​​JSON.stringify​​ 转换后的字符串
 

var cache = [];
var json_str = JSON.stringify(json_data, function(key, value) {
    if (typeof value === 'object' && value !== null) {
        if (cache.indexOf(value) !== -1) {
            return;
        }
        cache.push(value);
    }
    return value;
});
cache = null;    //释放cache
//来源: https://blog.51cto.com/u_15311558/5758502

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/66525.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

API接口:企业信息核验

企业信息核验是现代企业管理中必不可少的一项业务,它可以帮助企业做出正确的决策。在这篇文章里,我们将会介绍如何使用API接口来对企业信息进行核验,并实现快捷、准确的查询。 一、API接口 在这里我们使用的是挖数据提供的企业信息核验API接…

sk_buff操作函数学习

一. 前言 内核提供了大量实用的操作sk_buff的函数,在开发网络设备驱动程序和修改网络协议栈代码时需要用到。这些函数从功能上可以分为三类:创建,释放和复制socket buffer;操作sk_buff结构中的参数和指针;管理socket b…

Flink作业调度的9种状态

1.什么是作业调度 Flink 通过 Task Slots 来定义执行资源。每个 TaskManager 有一到多个 task slot,每个 task slot 可以运行一条由多个并行 task 组成的流水线。 这样一条流水线由多个连续的 task 组成,比如并行度为 n 的 MapFunction 和 并行度为 n 的…

【Shell】基础语法(三)

文章目录 一、Shell基础语法1. 位置参数和特殊变量2. 输入输出3. 管道4. 文件重定向5. 函数6. 脚本调试方法 二、Shell高级和正则表达式1. sort命令2. uniq命令3. wc命令4. grep命令5. find命令6. xargs7. sed命令8. crontab 一、Shell基础语法 1. 位置参数和特殊变量 $0 …

宝塔面板点击SSL闪退打不开怎么解决?

宝塔Linux面板点击SSL证书闪退如何解决?旧版本的宝塔Linux面板确实存在这种情况,如何解决?升级你的宝塔Linux面板即可。新手站长分享宝塔面板SSL闪退的解决方法: 宝塔面板点击SSL证书闪退解决方法 问题:宝塔Linux面板…

机器学习复习题

1 单选题 ID3算法、C4.5算法、CART算法都是( )研究方向的算法。 A . 决策树 B. 随机森林 C. 人工神经网络 D. 贝叶斯学习 参考答案:A ( )作为机器学习重要算法之一,是一种利用多个树分类器进行分类和预测…

[OnWork.Tools]系列 07-Web浏览器

简介 简易的web浏览器,适合临时使用 组件安装 第一次使用时可能需要安装相关组件 点击确定 会打开官方地址 WebView2 - Microsoft Edge Developer 点击立即下载 跳转到新的地址 WebView2 - Microsoft Edge Developer 有外网的选择第一个,无网络的在有网络的电脑打开后选择…

jenkins pipeline项目

回到目录 将练习jenkins使用pipeline项目,结合k8s发布一个简单的springboot项目 前提:jenkins的环境和k8s环境都已经安装完成,提前准备了gitlab和一个简单的springboot项目 创建一个流水线项目 流水线中选择git,并选择gitlab的…

MongoDB数据库操作及操作命令

目录 一、基础概念 二、安装mongod 三、命令交互数据库 (1)数据库命令 (2)集合命令 (3)文档命令 四、Mongoose (1)增加一条数据 (2)插入多个数据 &am…

MySQL安装和卸载

1.MySQL概述 MySQL概述 MySQL是一个[关系型数据库管理系统],由瑞典MySQL AB 公司开发,2008年被sun公司收购, 2009sun又被oracle收购,所以属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用…

SystemC的调度器

文章目录 前言调度器初始化evaluatewait updatenotify delta notificationtime notification仿真结束 前言 SystemC是基于C的库,主要用来对 IC 进行功能建模和性能建模。有时也被用来当做 RTL (register transfer level) 级的升级版 HLS(High Level synthesis) 直接…

小白到运维工程师自学之路 第七十集 (Kubernetes集群部署)

一、概述 Kubernetes(简称K8S)是一个开源的容器编排和管理平台,是由Google发起并捐赠给Cloud Native Computing Foundation(CNCF)管理的项目。它的目标是简化容器化应用的部署、扩展、管理和自动化操作。 以下是Kube…

优维低代码实践:对接数据

优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。 优维…

2023-08-09 LeetCode每日一题(整数的各位积和之差)

2023-08-09每日一题 一、题目编号 1281. 整数的各位积和之差二、题目链接 点击跳转到题目位置 三、题目描述 给你一个整数 n,请你帮忙计算并返回该整数「各位数字之积」与「各位数字之和」的差。 示例1: 示例2: 提示: 1 …

遍历集合List的五种方法以及如何在遍历集合过程中安全移除元素

一、遍历集合List的五种方法 测试数据 List<String> list new ArrayList<>(); list.add("A");list.add("B");list.add("C");1. 普通for循环 普通for循环&#xff0c;通过索引遍历 for (int i 0; i < list.size(); i) {Syst…

数据清理在数据科学中的重要性

什么是数据清理&#xff1f; 推荐&#xff1a;使用 NSDT场景编辑器 助你快速搭建可编辑的3D应用场景 在数据科学中&#xff0c;数据清理是识别不正确数据并修复错误的过程&#xff0c;以便最终数据集可供使用。错误可能包括重复字段、格式不正确、字段不完整、数据不相关或不准…

【腾讯云 Cloud Studio 实战训练营】使用Cloud Studio构建SpringSecurity权限框架

1.Cloud Studio&#xff08;云端 IDE&#xff09;简介 Cloud Studio 是基于浏览器的集成式开发环境&#xff08;IDE&#xff09;&#xff0c;为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装&#xff0c;随时随地打开浏览器就能在线编程。 Clou…

python之prettytable库的使用

文章目录 一 什么是prettytable二 prettytable的简单使用1. 添加表头2. 添加行3. 添加列4. 设置对齐方式4. 设置输出表格样式5. 自定义边框样式6. 其它功能 三 prettytable在实际中的使用 一 什么是prettytable prettytable是Python的一个第三方工具库&#xff0c;用于创建漂亮…

微信云开发-数据库操作

文章目录 前提初始化数据库插入数据查询数据获取一条数据获取多条数据查询指令 更新数据更新指令 删除数据总结 前提 首先有1个集合(名称:todos). 其中集合中的数据为: {// 计划描述"description": "learn mini-program cloud service",// 截止日期"…

软件系统测试报告

1.简介 1.1.编写目的 本文档是对重庆市XXX项目验收测试所做的说明&#xff0c;为充分利用已有的软硬件资源&#xff0c;配合对系统应用模块的运行测试方案,查缺补漏完善系统的各项具体功能,保证项目的顺利进行&#xff0c;本测试报告有助于实现以下目标&#xff1a; 明确本次…