浅拷贝与深拷贝的个人理解:
假设B去拷贝A的内容。
浅拷贝:B与A共用同一个内存地址,读取的值都指向同一块内存地址,所以无论A还是B对值进行修改,最终改的是内存地址里面的值,即改了A,B同时值也会改变。
深拷贝:B开辟一块新的内存地址,然后把A的值复制到B所在的内存地址上,修改B时,不会改变A。
很多的时候,我们需要复制一个结构时,都希望改变B而不会影响到A,即深拷贝,那么typescript如何完成深拷贝呢:
1.【伪】深拷贝:
使用typescript提供的接口:(Object).assign();
var test = {zien:23,sad:13, clz:{ling:1}};
var test2 = {};
(Object).assign(test2, test);
test2["zien"] = 30;
test2["clz"]["ling"] = 2;
for (var k in test){
console.log(k, test[k]);
}
console.log("------------------------------------------");
for (var k in test2){
console.log(k, test2[k]);
}
输出结果如下:
zien 23
sad 13
clz { ling: 2 }
------------------------------------------
zien 30
sad 13
clz { ling: 2 }
可以看到修改了B的zien,A的zien并没有改变,所以算是深拷贝。
但为什么称之为【伪】深拷贝,因为看到修改了test2[“clz”][“ling”] = 2; 之后,A和B的值都改了,所以可以定义为,这种拷贝方式只能深拷贝第一层的数据,包含有更深层次的数据并不会进行深拷贝。
2.【真】深拷贝:
一个简单的思路就是把需要拷贝的内容通过json转成字符串,然后再用json把字符串转成对应的对象类型。
var test = {zien:23,sad:13, clz:{ling:1}};
var test3 = JSON.parse(JSON.stringify(test));
test3["zien"] = 30;
test3["clz"]["ling"] = 2;
for (var k in test){
console.log(k, test[k]);
}console.log("------------------------------------------");
for (var k in test3){
console.log(k, test3[k]);
}
【typescript|typescript浅拷贝与深拷贝】输出结果:
zien 23
sad 13
clz { ling: 1 }
------------------------------------------
zien 30
sad 13
clz { ling: 2 }
测试结果确实是我们想要的,进行了一次完美的深拷贝。
推荐阅读
- Vue|vue-property-decorator用法详解
- vue|vue3.0 typescript 创建项目,路由RouteConfig 报错 has no exported member ‘RouteConfig‘.ts
- ECMAScript|JavaScript性能优化具体实现-第二篇
- ECMAScript|js中对象和数组的浅拷贝与深拷贝(ES6、前端面试常用)
- ts问题汇总
- 前端|最全的TypeScript学习指南
- java|节后上班第一天公司要你用SpringBoot实现万能文件在线预览
- typescript|Typescript总结(三)——函数类型详解
- javascript|ES6新特性(上)——let及const、解构赋值、模板字符串、Symbol