JavaScript对象浅拷贝和深拷贝案例分析

本文中的示例讲述了JavaScript对象的浅层和深层副本。分享给大家参考，如下：

1.浅色副本

只复制对象的引用，不复制对象本身。

var person={ name: 'Alice '，friends 3360[' Bruce '，' Cindy ']} var student={ id : 30 } student=simple clone(person，student)；学生，朋友，推(大卫)；警惕(person . friends)；函数simpleClone(oldObj，new obj){ var new obj=new obj | | { }；for(var I in oldObj)new obj[I]=oldObj[I]；返回newObj}使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun,并测试运行结果：

给子对象数组类型的属性增加一个新值，父对象的属性值也被篡改。

2.深度复制

通过一次复制被复制对象引用的所有对象，可以实现数组和对象的真实复制。

浅拷贝的问题：如果父对象的属性值是数组或另一个对象，那么子对象实际得到的只是一个内存地址，而不是父对象的真实拷贝，因此存在父对象被篡改的可能性。

解决方法：使用深度副本。

var person={ name: 'Alice '，friends 3360[' Bruce '，' Cindy ']} var student={ id : 30 } student=deep clone(person，student)；学生，朋友，推(大卫)；警惕(person . friends)；//'Bruce '，' Cindy '函数deepClone(oldObj，new obj){ var new obj=new obj | | { }；newObj=JSON . parse(JSON . stringify(oldObj))；返回newObj}使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun,并测试运行结果：

3.实现深度复制的方法

1)方法1:使用JSON.parse()方法

函数deepClone(oldObj，NewObj){ var NewObj=NewObj | | { }；newObj=JSON . parse(JSON . stringify(oldObj))；返回newObj}优点：

易于使用。

缺点：

(1)会抛弃Object的构造函数，也就是深度复制后，不管对象的原始构造函数是什么，深度复制后都会变成一个对象。

只能正确处理Number、String、Boolean、Array，也就是那些可以用JSON直接表示的数据结构，不能用这种方式复制RegExp对象。

2)方法2:递归复制

函数deepClone(oldObj，NewObj){ var NewObj=NewObj | | { }；for(oldObj中的var I){ if(oldObj[I]==' object '){ new obj[I]=(oldObj[I])。构造函数===Array)？[] : {};arguments .被调用者(oldObj[i]，new obj[I])；} else NewObj[I]=oldObj[I]；}返回newObj}问题：遇到两个互相引用的对象时，会出现无限循环。

解决方法：遍历时，判断两个对象是否相互引用(如oldObj.property===newObj)，如果是，退出循环。

函数deepClone(oldObj，NewObj){ var NewObj=NewObj | | { }；for(var I in oldObj){ var prop=oldObj[I]；if (prop===newObj)继续；if(prop==' object '){ NewObj[I]=(prop . constructor===Array)？[] : {};arguments . calleer(prop，NewObj[I])；} else NewObj[I]=prop；}返回newObj}3)方法3:使用对象.创建()方法

函数deepClone(oldObj，NewObj){ var NewObj=NewObj | | { }；for(var I in oldObj){ var prop=oldObj[I]；if (prop===newObj)继续；if(prop==' object ')new Obj[I]=(prop . constructor===Array)？[] :对象。创建(道具)；else NewObj[I]=prop；}返回newObj}4)方法4:使用jQuery.extend()和jQuery.fn.extend()

看：https://www.jb51.net/article/144424.htm

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、0103010

希望本文对JavaScript编程有所帮助。