数据复制的艺术：深拷贝与浅拷贝在JavaScript中的实现方式

前言

 📫 大家好，我是南木元元，热爱技术和分享，欢迎大家交流，一起学习进步！

 🍅 个人主页：南木元元

目录

赋值和拷贝

浅拷贝与深拷贝区别

浅拷贝的实现方式

1.Object.assign()

2.扩展运算符

3.Array.prototype.slice()

4.Array.prototype.concat()

5.手写实现浅拷贝

深拷贝的实现方式

1.JSON.stringify()

2.函数库lodash

3.手写实现深拷贝

结语

赋值和拷贝

js中的数据类型分为两大类：

• 基本数据类型
• 引用数据类型

基本数据类型保存在栈里面，可以直接访问它的值，赋值时，会完整复制变量值。

let a = 10;
let b = a; // 赋值
b = 20;
console.log(a); // 10

上面代码中，两个变量保存了两个不同的内存地址，所以b的改变不会引起a的变化。过程如下：

而引用数据类型保存在堆里面，栈里面保存的是地址，通过栈里面的地址去访问堆里面的值。

var obj1 = {}
var obj2 = obj1;
obj2.name = "yuanyuan";
console.log(obj1.name); // yuanyuan

 上面代码在赋值时，复制的是栈中的引用地址，两个变量指向堆内存中的同一个对象，所以更改obj2会对obj1产生影响。赋值过程如下：

这是直接赋值的情况，要想两个值互不影响，就需要进行拷贝，js中的拷贝分为浅拷贝和深拷贝。

浅拷贝与深拷贝区别

浅拷贝是按位拷贝对象，它会创建一个新对象，如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址（只拷贝一层）。如果其中一个对象改变了这个地址，就会影响到另一个对象。

深拷贝是将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，且修改新对象不会影响原对象。