1. 概述
- 浅拷贝只是拷贝一层,针对于更深层次的对象级别的数据,只是拷贝引用,因此拷贝之后再修改对象数据时,会把原来的数据一并进行修改操作。
- 深拷贝拷贝多层,每一级别的数据都会拷贝,而对象级别的数据则会另开辟新的空间
2. 浅拷贝
-
es6新增方法实现浅拷贝:Object.assign(target,…sources)
-
js实现浅拷贝
var o = { uname: 'zt', age: 19, mes: { uname: 'zztt' } }; var ob = {}; for (var k in o) { ob[k] = o[k]; } console.log(ob); ob.mes.uname = 'iii'; console.log(o);
-
解释:对于普通数据类型,直接赋值,但是对于复杂的对象级别的数据,拷贝引用,也即共用同一个空间,而例题中又对对象级别数据进行了修改,因此原数据中的对象级别的数据也会被进一步的跟着修改
-
结果:
可以发现:打印ob和打印o分别在重新赋值前后,理应不一样,但是打印结果却是一样的。原因:观察时间不一样,打开开发者工具,进行断点调试
可以发现打印结果如下:
出现上述原因的主要在于:观察时间不一样,打印mes的时候是花了一定的时间去寻找地址并打印相关的数据,而如果在第一个打印处添加断点,实则等待了第一个查询地址并打印,因此内容为赋值之前的内容。
3. 深拷贝
-
Js实现深拷贝
function deepCopy(newobj,oldobj) { for (var k in oldobj) { // 获取属性值 var item = oldobj[k]; // 判断这个值是否是数组 由于数组也是对象,因此需要先判断 if (item instanceof Array) { newobj[k] = []; deepCopy(newobj[k],item); } else if (item instanceof Object) { // 判断这个值是否是对象 newobj[k] = {}; deepCopy(newobj[k],item); } else { // 该值属于简单数据类型 newobj[k] = item; } } } var o = { uname: 'zt', age: 19, mes: { uname: 'zztt' } } var ob = {}; deepCopy(ob,o); console.log(ob); ob.mes.uname = 'iii';// 此时不会影响另一个对象中的值 console.log(o);