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

1.浅拷贝浅拷贝将原对象或原数组的引用直接赋给新对象,新数组,新对象/数组只是原对象的一个引用(拷贝后的引用都是指向同一个对象的实例,彼此之间的操作会互相影响)


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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容