JS深浅拷贝

• 在学习深浅拷贝之前，要先了解内存中的栈空间和堆空间，不同数据类型的内存分配

1.内存中的栈空间和堆空间

内存中分为两块区域，一块是栈空间，一块是堆空间

2.不同数据类型的内存分配

• 关于深浅拷贝，要考虑不同数据类型的数据在内存中存放的位置是不同的

• 基本数据类型
String（字符串型），Number（数字型），Boolean（布尔型），null，undefined，symbol，BigInt（大整型）

• 引用数据类型
Array（数组），Object（对象），Function（函数）

• 基本数据类型和引用数据类型在内存中存放的区别：
  对于基本数据类型的数据会在栈中开辟一块空间，存放对应的数据；对于引用数据类型的数据会在栈中开辟一块空间，存放该数据具有唯一性的地址，该地址会指向堆里面存放的真实数据

• 数据赋值时的区别：
  对于基本数据类型的数据使用等号进行赋值时，实际的值就是赋值给它的值，新赋值的值和旧赋值的值之间互不影响，但对于引用数据类型的数据使用等号进行赋值时，实际上赋的值是地址，不同变量的地址会指向堆里面同一条数据，就会造成数据共享的问题，其中一个变量进行更改时，其他变量的值都会改变

为了解决这个问题，就要使用到浅拷贝和深拷贝

3.浅拷贝和深拷贝

• 浅拷贝

对于引用数据类型的第一层，拷贝的是值，而其他层级（引用类型嵌套），拷贝的依然是地址
语法：Object.assign({},源对象)
语法：{...源对象}

代码如下：

let obj = {
	uname : "张三"，
	age : '19',
	hobby : ['打游戏','看电影','看足球比赛'] 
}

//浅拷贝
let obj2 = Object.assign({},obj)
//let obj2 = {...obj}    这个语法也可以实现
obj2.uname = "王麻子"
obj2.hobby[2] = "踢足球"

console.log(obj,obj2)

在VSCode中编译执行

在图中可以看到，基本数据类型的键“uname”的值"张三"被修改为了"王麻子"，而引用数据类型的键“hobby”的第三个值被更改为’踢足球’，包括obj对象中的hobby的第三个值也被更改了，这是因为浅拷贝对于引用数据类型的第一层，拷贝的是值，其中其他引用类型的嵌套，拷贝的还是地址，所以会出现数据共享的问题。要彻底解决这个问题，就要使用深拷贝来解决。

• 深拷贝

无论拷贝的是引用类型数据是多少层级，拷贝的都是值
语法：JSON.parse(JSON.stringify(源对象))

代码如下：

let obj = {
	uname:"张楚岚",
	age："18",
	hobby:["那都通","练功","气体源流"]
}

//深拷贝
let obj2 = JSON.parse(JSON.stringify(obj))
obj2.uname = "冯宝宝"
obj2.hobby[1] = "打游戏"

console.log(obj,obj2)

在VSCode中编译运行

在图中可以看到基本数据类型的键“uname”的值被更改了，引用数据类型的键“hobby”的值也被更改了，并且没有出现数据共享的问题。