2.深拷贝与浅拷贝的区别

Posted 2023-02-22

参考技术A 2.深拷贝

深拷贝是将原对象的各个属性的“值”逐个复制出去，而且将原对象各个属性所包含的对象也依次采用深拷贝的方法递归复制到新对象上（注意拷贝的“值”而不是“引用”）

3.什么时候使用深拷贝

我们在希望改变新的数组（对象）的时候，不改变原数组（对象）

4.使用深拷贝的注意事项

如果对象比较大，层级也比较多，深拷贝会带来性能上的问题。所以在遇到需要使用深拷贝，考虑有没有其他的方案，实际应用中主要还是以浅拷贝为主

5.浅拷贝的实现方式

方式一 自定义函数

varobj=a:1,arr:[2,3];varshallowObj=shallowCopy(obj);obj.arr[0]=10console.log(shallowObj.arr[0])// 10functionshallowCopy(src)vardst=;for(varpropinsrc)if(src.hasOwnProperty(prop))dst[prop]=src[prop];returndst;

方式二 ES6 Object.assign() // 多层是浅拷贝 一层是深拷贝

varobj=a:1,arr:[1,2];letnewObj=Object.assign(,obj);obj.arr[0]=10console.log(newObj.arr[0])// 10

方式三 ES6 扩展运算符

varobj=a:1,arr:[1,2];letnewObj=...obj;obj.arr[0]=10;console.log(newObj.arr[0]);// 10

方式四 jQuery.extend()

varobj=a:1,arr:[1,2];letnewObj=jQuery.extend(,obj);;obj.arr[0]=10;console.log(newObj.arr[0]);// 10

方式五 数组方法（只适用于类数组对象） Array.from()

vararray1=['a',['b','c'],'d'];vararray2=Array.from(array1);array1[1][0]='e';console.log(array2[1][0]);//输出结果为： "e"

Array.concat()

Array.slice()

上面数组方法也可以实现浅拷贝，在这就不一一举例了

7.深拷贝的实现方式

方法一 用 JSON.stringify 把对象转换成字符串，再用 JSON.parse 把字符串转换成新的对象。可以转成 JSON 格式的对象才能使用这种方法，如果对象中包含 function 就不能用这种方法了。

varobj=a:1,arr:[1,2];varnewObj=JSON.parse(JSON.stringify(obj));obj.arr[0]=10;console.log(newObj.arr[0]);// 1

方式二 jQuery.extend()

varobj=a:1,arr:[1,2];varnewObj=jQuery.extend(true,,obj);obj.arr[0]=10;console.log(newObj.arr[0]);// 1

方式三 函数递归调用

vardeepCopy=function(obj)if(typeofobj!=='object')return;varnewObj=objinstanceofArray?[]:;for(varkeyinobj)if(obj.hasOwnProperty(key))newObj[key]=typeofobj[key]==='object'?deepCopy(obj[key]):obj[key];returnnewObj;varobj=a:1,arr:[1,2];varnewObj=deepCopy(obj);obj.arr[0]=10;console.log(newObj.arr[0]);// 1

方式四 Object.assign()

varobj=a:1;varnewObj=Object.assign(,obj);obj.a=10;console.log(newObj.a);// 1