JS对象的深度克隆方法示例
程序员文章站
2022-12-13 08:23:38
本文实例讲述了js对象的深度克隆方法。分享给大家供大家参考,具体如下:
js中创建的对象指向内存,所以在开发过程中,往往修改了一个对象的属性,会影响另外一个对象。
尤其...
本文实例讲述了js对象的深度克隆方法。分享给大家供大家参考,具体如下:
js中创建的对象指向内存,所以在开发过程中,往往修改了一个对象的属性,会影响另外一个对象。
尤其是在angular框架中,dom是由数据驱动的,在增删改查对象的操作中,对象属性的继承关系是很让人头痛的!
我之前遇到的问题就是,在编辑页面,操作了对象数据,影响到了展示数据的展现!
我整理了两种深度克隆对象的方法,供大家参考!
首先var 一个假数据
复制代码 代码如下:
var schedule = {"status":21,"msg":"ok","data":[{"name":"lemon","age":21,"contactlist":{"phone":[152,153,154],"email":5295}},{"name":"lara","age":22,"contact":{"phone":152,"email":5295}}]}
方法1:
遍历自身,判断当前对象是obj还是list,克隆出新对象
function deepclone(obj) { var o,i,j,k; if(typeof(obj)!="object" || obj===null)return obj; if(obj instanceof(array)) { o=[]; i=0;j=obj.length; for(;i<j;i++) { if(typeof(obj[i])=="object" && obj[i]!=null) { o[i]=arguments.callee(obj[i]); } else { o[i]=obj[i]; } } } else { o={}; for(i in obj) { if(typeof(obj[i])=="object" && obj[i]!=null) { o[i]=arguments.callee(obj[i]); } else { o[i]=obj[i]; } } } return o; } var scheduleclone = deepclone(schedule) scheduleclone.data[0].contactlist.phone[0] = 99999999999 console.log('方法1 深度克隆') console.log(scheduleclone) console.log(json.stringify(schedule)) console.log(json.stringify(scheduleclone))
方法2:
用js原生的json序列化的方式,简单粗暴!
var scheduleclone2 = json.parse(json.stringify(schedule)); console.log('方法2 深度克隆') console.log(scheduleclone2) scheduleclone2.data[0].contactlist.phone[0] = 8888888 console.log(json.stringify(schedule)) console.log(json.stringify(scheduleclone2))
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
上一篇: javascript 动态生成css代码的两种方法
下一篇: JS对象深度克隆实例分析