原生JS--数据的深浅拷贝

1、引言

想要知道js数据深浅拷贝的原理，那一定要知道它们存储的方式。步入正题之前我们先简单介绍一下数据类型及其存储方式。

1.1、数据类型

• 基本(一般)数据类型
  • number / string / boolean / undefined / null
• 引用(复杂)数据类型
  • object / function / array

1.2、存储方式

在内存的内部空间划分了许多内存颗粒，内存颗粒分为栈、堆

• 栈：一般保存基本数据类型，和堆地址
  • 堆地址：指向堆中数据的地址
• 堆：保存复杂数据类型数据

2、深浅拷贝

深拷贝：复制复杂数据类型值的拷贝方式
浅拷贝：复制了复杂数据类型的地址的拷贝方式

• 由于基本数据类型的值就是地址，地址就是值，因此基本数据类型也称为值传递的类型，也因此深浅拷贝就没基本数据类型什么事了。
• 复制数据类型引入了深浅拷贝的概念，因此复杂数据类型也称为引用传递类型。

2.1、浅拷贝

• 复杂数据的简单复制就是浅拷贝

let obj  = {name:"admin"};
let objCopy = obj;
console.log(obj); // {name:"admin"}
console.log(objCopy); // {name:"admin"}

• 上述复制相当于把obj存在栈中的指向堆中数据的地址赋给了objCopy，也就是说现在栈中的obj和objCopy指向了存在堆中的同一个数据。
• 那么浅拷贝的弊端是什么呢?

// 接上面的代码
objCopy.name = "root";
console.log(objCopy); // {name:"root"}
console.log(obj); // {name:"root"}

• 由于两者指向的是同一个数据，只要有一个变量更改了值，另一个变量也会随之更改
• 如果想要两者互不影响，我们就需要使用深拷贝的复制方式。

2.2、深拷贝

• 如何才能只复制值不复制地址呢？

let obj = {name:"admin"};
let objCopy = {}; // 相当于在内存中重新划分了空间来保存objCopy这个变量
objCopy.name = obj.name;
console.log(obj); // {name:"admin"}
console.log(objCopy); // {name:"admin"}
// 更改objCopy的值
objCopy.name = "root";
console.log(obj); // {name:"admin"}
console.log(objCopy); // {name:"root"}

• 上述代码中，先在内存空间中存储新变量objCopy，此时obj和objCopy是存在栈中的没有关系的两个不同的地址
• 再把obj的值赋给objCopy
• 之后再更改objCopy的值是不会对obj造成任何影响的，毕竟两者存在栈中的不同地址指向的是堆中不同的数据

如果变量存在多个值，使用遍历来实现深拷贝

let obj = {
	name: "admin",
	age: 18,
	gender: "女“
}
let objCopy = {};
for (let i in obj) {
    objCopy[i] = obj[i];
}
console.log(objCopy); // {name: "admin", age: 18, gender: "女"}
objCopy.age = 25; // 更改objCopy的值不会影响obj的值
console.log(obj); // {name: "admin", age: 18, sex: "女"}
console.log(objCopy); // {name: "admin", age: 25, sex: "女"}

本文地址：https://blog.csdn.net/qq_41860731/article/details/107292494