JSON.stringify报cyclic object value错误

本文介绍了解决JSON.stringify处理循环引用对象的问题,提供了两种方法:一是通过自定义序列化函数跟踪已遍历的对象;二是创建新对象避免引用循环。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

obj = { x:"a", y: "b" };
obj.child = obj;
 
try{
    json = JSON.stringify(obj);
    alert(json)
}catch(e){
    alert(e);
}


如果调用上述代码,汇报JSON.stringify报cyclic object value错误,
而在程序开发的过程中也会出现意外的结果,
为了解决这个问题有两种办法
第一种


obj = { x:"a", y: "b" };
obj.child = obj;
 
alert(print(obj));
 
function print(obj){
    try{
        var seen = [];
        json = JSON.stringify(obj, function(key, val) {
           if (typeof val == "object") {
                if (seen.indexOf(val) >= 0) return;
                seen.push(val)
            }
            return val;
        });
        return json;
    }catch(e){
        return e;
    }
}


第二种
如果非想实现这种结果,那么拷贝原来的对象到新的对象中就行了
obj = { x:"a", y: "b" };
var newobj = {};
newobj.x = obj.x;
newobj.y = obj.y;
obj.child = newob;


                
value.annex = value.invoice ? this.processPictures( value.invoice ) : [] //处理附件 this.formData.oaClaimDetailList[ this.index ].claimAmount = value.applyAmount.toString() //处理销金额 this.formData.oaClaimDetailList[ this.index ].annex = JSON.parse( JSON.stringify( value.annex ) ) this.formData.oaClaimDetailList[ this.index ].remarks = '' this.formData.oaClaimDetailList[ this.index ].applyAmount = JSON.parse( JSON.stringify( value.applyAmount ) ) this.formData.oaClaimDetailList[ this.index ].applyTime = JSON.parse( JSON.stringify( value.applyTime ) ) this.formData.oaClaimDetailList[ this.index ].applyTimeSearch = JSON.parse( JSON.stringify( value.applyTimeSearch ) ) this.formData.oaClaimDetailList[ this.index ].businessId = JSON.parse( JSON.stringify( value.businessId ) ) this.formData.oaClaimDetailList[ this.index ].businessType = JSON.parse( JSON.stringify( value.businessType ) ) this.formData.oaClaimDetailList[ this.index ].claimId = JSON.parse( JSON.stringify( value.claimId ) ) this.formData.oaClaimDetailList[ this.index ].claimState = JSON.parse( JSON.stringify( value.claimState ) ) this.formData.oaClaimDetailList[ this.index ].createBy = JSON.parse( JSON.stringify( value.createBy ) ) this.formData.oaClaimDetailList[ this.index ].createTime = JSON.parse( JSON.stringify( value.createTime ) ) this.formData.oaClaimDetailList[ this.index ].deptId = JSON.parse( JSON.stringify( value.deptId ) ) this.formData.oaClaimDetailList[ this.index ].endTime = JSON.parse( JSON.stringify( value.endTime ) ) this.formData.oaClaimDetailList[ this.index ].flag = JSON.parse( JSON.stringify( value.flag ) ) this.formData.oaClaimDetailList[ this.index ].id = JSON.parse( JSON.stringify( value.id ) ) this.formData.oaClaimDetailList[ this.index ].invoice = JSON.parse( JSON.stringify( value.invoice ) ) this.formData.oaClaimDetailList[ this.index ].params = JSON.parse( JSON.stringify( value.params ) ) this.formData.oaClaimDetailList[ this.index ].processInstanceId = JSON.parse( JSON.stringify( value.processInstanceId ) ) this.formData.oaClaimDetailList[ this.index ].processName = JSON.parse( JSON.stringify( value.processName ) ) // this.formData.oaClaimDetailList[ this.index ].relatedClaim = JSON.parse( JSON.stringify( value.relatedClaim ) ) this.formData.oaClaimDetailList[ this.index ].relationId = JSON.parse( JSON.stringify( value.relationId ) ) this.formData.oaClaimDetailList[ this.index ].remark = JSON.parse( JSON.stringify( value.remark ) ) this.formData.oaClaimDetailList[ this.index ].searchValue = JSON.parse( JSON.stringify( value.searchValue ) ) this.formData.oaClaimDetailList[ this.index ].startTime = JSON.parse( JSON.stringify( value.startTime ) ) this.formData.oaClaimDetailList[ this.index ].state = JSON.parse( JSON.stringify( value.state ) ) this.formData.oaClaimDetailList[ this.index ].tenantId = JSON.parse( JSON.stringify( value.tenantId ) ) this.formData.oaClaimDetailList[ this.index ].updateBy = JSON.parse( JSON.stringify( value.updateBy ) ) this.formData.oaClaimDetailList[ this.index ].updateTime = JSON.parse( JSON.stringify( value.updateTime ) ) this.formData.oaClaimDetailList[ this.index ].userId = JSON.parse( JSON.stringify( value.userId ) ) 代码优化
03-11
从你提供的代码片段来看,这段JavaScript代码的主要功能是对`this.formData.oaClaimDetailList[this.index]`对象的属性进行赋值操作,并且大量使用了深拷贝的方式来避免引用类型的直接赋值导致的问题。为了提高代码的可读性和效率,我们可以对其进行一些优化: ### 1. 减少重复的 `JSON.parse(JSON.stringify())` 这种做法虽然可以实现深度复制的效果,但对于大多数情况来说过于繁琐和低效,尤其是对于大型复杂的数据结构可能会造成性能瓶颈。 #### 改进建议: - 如果只是简单地复制基本数据类型(如字符串、数字等),可以直接赋值。 - 对于复杂的嵌套对象或数组,考虑引入专门用于深层克隆的对象工具函数库,例如Lodash的_.cloneDeep()方法;也可以编写自定义浅层/深层克隆函数。 ```javascript const cloneDeep = obj => { if (obj === null || typeof obj !== 'object') return obj; const result = Array.isArray(obj) ? [] : {}; for (let key in obj){ result[key] = cloneDeep(obj[key]); } return result; }; ``` 然后用这个简单的辅助函数替换掉所有的`JSON.parse(JSON.stringify(...))`。 ### 2. 使用解构赋值简化批量设置属性 通过ES6+语法特性中的**解构表达式**能够让我们更简洁优雅地完成这项任务。 ```javascript // 假设我们有一个包含所有需要更新字段的对象value const { applyAmount, invoice, ...rest } = value; // 更新附件信息 value.annex = value.invoice ? this.processPictures(value.invoice) : []; // 批量给formData中的指定位置元素添加新属性或者覆盖现有属性 Object.assign(this.formData.oaClaimDetailList[this.index], rest); // 特殊处理某些特定字段 this.formData.oaClaimDetailList[this.index].claimAmount = applyAmount.toString(); this.formData.oaClaimDetailList[this.index].annex = cloneDeep(value.annex); this.formData.oaClaimDetailList[this.index].applyAmount = +applyAmount; // 转换回数值型 ``` 这样做不仅减少了冗余代码行数,也使得逻辑更加清晰明了。 ### 总结一下改进后的版本: ```javascript function deepClone(obj) {/* 上述提到过的递归深拷贝算法 */} // 简化并优化后的代码段开始... { let targetItem = this.formData.oaClaimDetailList[this.index]; Object.keys(targetItem).forEach((key)=>{ if(key!=='annex'&&key!=='claimAmount'){ targetItem[key]=deepClone(value[key]) } }); // 单独处理特殊规则的两个字段 targetItem.claimAmount=String(value.applyAmount); targetItem.annex=value.invoice?this.processPictures(value.invoice):[]; } ``` 这样做的目的是让我们的程序变得更容易维护的同时保持较高的运行效率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值