本文实例讲述了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程序设计有所帮助。