[前端]深浅拷贝

一、回顾变量类型

基础类型

boolean（bool）

number

string

null

undefined

引用类型

object

​ function

​ array

基本类型与引用类型的存储

基本类型一般存储在 栈 (栈小) 

1. 栈一旦确认 大小就固定 可能会造成溢出
2. 栈一般是先进后出
3. 用于存储基础类型以及引用类型的堆地址
4. 运行速度快

引用类型一般存储在 堆（堆大）

1. 堆大小不确认 可以扩展
2. 不允许js直接操作堆数据
3. 无序存储
4. 由于其大小不固定 顺序不固定 导致 速度慢

堆栈示意图

栈内容当程序运行完毕 栈就空了

但是堆内容不见的一定就空 可能会出现 没有任何指针指向堆内容 导致都变成垃圾

所以我们需要手动指向 null让其销毁

二、深浅拷贝

深浅拷贝分两种情况 引用类型 基础类型

基础类型都是深拷贝

引用类型 大多数是浅拷贝 也可以变成深拷贝

深拷贝 地址不同 一个改变另一个并不跟随发生变化就是深拷贝 拷贝内容 地址不同

浅拷贝 地址相同 一个改变另一个随之改变 就是浅拷贝 拷贝的是地址

1. 深拷贝
2. let a = 10;
3. let b = a;
4. console.log(1,a,b,a===b);
5. a = 88;
6. console.log(2,a,b,a===b);
7. console.log("======================");
9. 浅拷贝
10. let obj1 = {
11. n : 88
12. }
13. let obj2 = obj1;
14. console.log(1,obj1,obj2,obj1===obj2);
15. obj1.a = 99;
16. console.log(2,obj1,obj2,obj1===obj2);

1. 实现深拷贝 array object
2. 1.JSON.stringify JSON.parse
3. let obj1 = {
4. n : 88
5. }
6. let obj2 = JSON.parse(JSON.stringify(obj1)); //深拷贝
7. console.log(1,obj1,obj2,obj1===obj2);
8. obj1.a = 99;
9. console.log(2,obj1,obj2,obj1===obj2);
11. 2. ... 解构
12. let arr1 = [1,5,6,7];
13. let arr2 = [...arr1];
14. console.log(1,arr1,arr2,arr1===arr2);
15. arr1[0] = "222"
16. console.log(2,arr1,arr2,arr1===arr2);

1. // 伪拷贝 一般情况下是 第一层深拷贝 后面层浅拷贝
2. let arr1 = [1,2,3,[6,7,8]];
3. let arr2 = arr1.slice();
4. console.log(1,arr1,arr2,arr1 === arr2);
5. arr1[0] = 180;
6. arr1[3][0] = 666;
7. console.log(2,arr1,arr2,arr1 === arr2);
9. let arr1 = [1,2,3,[6,7,8]];
10. let arr2 = arr1.concat();
11. console.log(1,arr1,arr2,arr1 === arr2);
12. arr1[0] = 180;
13. arr1[3][0] = 666;
14. console.log(2,arr1,arr2,arr1 === arr2);

1. let menu1 = {
2. menu: "菜单",
3. item:{
4. type: "menu",
5. name: "子菜单"
6. }
7. }
9. // Object.assign(目标,源)
10. let menu2 = Object.assign({},menu1)
11. console.log(1,menu1,menu2,menu1 === menu2);
12. menu1.menu = "编辑"
13. menu1.item.name = "保存"
14. console.log(2,menu1,menu2,menu1 === menu2);

想要解决真正意义上的拷贝咋办

扁平化 嵌套的多层想办法给他变成地扁平化 递归思想

递归思想

普通的 按正常处理

深度的(引用类型 )按递归处理 直到没有引用类型为止··

1. let woniu = {
2. name: "张三",
3. age: 8,
4. school: [
5. {
6. id: 1,
7. name: "清华校区"
8. },
9. {
10. id: 2,
11. name: "北大校区"
12. },
13. {
14. id: 3,
15. name: "上交校区"
16. },
17. {
18. id: 4,
19. name: "国科大校区"
20. }
21. ],
22. subject: {
23. web: "web前端",
24. java: "java后端",
25. python: "python",
26. ui: "设计"
27. }
28. }
31. function copyData(source) {
32. // 定义一个容器 容器需要根据源来决定 源是对象 你就是你对象 源是数组你就是数组
33. let result = Array.isArray(source) ? [] : {};
34. for (const item in source) { // 遍历源 对象与数组的统一遍历方式是 for in
35. if (typeof source[item] === "object") { //区分引用类型与普通类性别 引用类型继续处理(遍历)基本类型直接返回
36. result[item] = copyData(source[item])
37. } else {
38. result[item] = source[item];
39. }
40. }
41. return result; // 最终将结果返回
42. }
43. let fanyun = copyData(woniu);
44. console.log(1,woniu,fanyun);
46. woniu.subject.web = "web大前端"
47. woniu.school[0].name = "总校区"
49. console.log(2,woniu,fanyun);