在js中如何区分深拷贝与浅拷贝？

一、自我理解

简单来讲就是：深拷贝层层拷贝，浅拷贝只拷贝第一层。

在深拷贝中，新对象中的更改不会影响原对象，而在浅拷贝中，新对象中的更改，原对象中也会跟着改。
在深拷贝中，原对象与新对象不共享相同的属性，而在浅拷贝中，它们具有相同的属性。

举个栗子：存在A和B两个数据，假设B复制了A，当修改A时，如果B跟着A变化了，则是浅拷贝；如果B不受A的改变而改变，则是深拷贝

let A = [0,1,2]let B = Aconsole.log(A === B);A[0] = 3console.log(A,B);

结果如下：

这就是一个简单的浅拷贝例子，虽然B复制了A，但是修改了A，B却跟着A变化了？

二、数据存储形式

通过上述栗子，我们就需要了解数据类型的存储方式了，如果还没有了解数据类型的小伙伴欢迎阅读 JS中8种数据类型

基本数据类型：number，string，boolean，null，undefined，symbol（es6），还有谷歌67版本中的BigInt（任意精度整数）
引用数据类型：Object【Object是个大类，function函数、array数组、date日期…等都归属于Object】

（1）基本数据类型存储于栈中

变量名和值都存储与栈中

每当声明一个变量，就会开辟一个新的内存空间来存储值，例如：let a = 1

// 声明一个变量let a = 1;

当b复制了a后，因为b也是一个变量，所以栈内存会再开辟一个新的内存空间：

// 声明一个变量let a = 1;let b = a; //b变量复制a变量console.log(a,b); //1 1

这就一目了然了，a和b两个变量归属于不同的内存空间，所以当你修改其中一个值，另外一个值不会受其影响！

// 声明一个变量let a = 1;let b = a; //b变量复制a变量console.log(a,b); //1 1// 修改a的值不影响ba = 123;console.log(a,b); //123 1

（2）引用数据类型存储与堆中

变量名存储在栈中，值存在于堆中，这时栈内存中会提供一个指针用于指向堆内存中的值

当我们声明一个引用数据类型时，会提供一个指针指向堆内存中的值：

// 声明一个引用类型的值let a = [0,1,2,3,4]

当b复制了a后，只是复制了当前栈内存中提供的指针，指向同一个堆内存中的值，并不是复制了堆内存中的值：

let a = [0,1,2,3,4]let b = a //复制的是一个指针，而不是堆中的值

所以当我们进行a[0]=1时，导致指针所指向的堆内存中的值发生了改变，而a和b是同一个指针，指向同一个堆内存地址，所以b的值也会受影响，这就是浅拷贝！

// 声明一个引用类型的值let a = [0,1,2,3,4];let b = a; //复制的是一个指针，而不是堆中的值console.log(a === b);a[0] = 1; //改变a数组值，b数组跟着改变(浅拷贝)console.log(a,b);

所以，我们需要在堆内存中新开辟一个内存专门接收存储b的值，道理与基本数据类型一样，这样就可以实现深拷贝（修改一个值不会影响另一个值的变化）：

三、怎样实现深拷贝？

（1）借助JSON对象的parse和stringify

parse()方法用于将一个字符串解析为json对象

stringify()方法用于将一个对象解析为字符串

// 浅拷贝let arr = [1,\"hello\",{name:\"张三\",age:21}]let copyArr = arrconsole.log(arr === copyArr); //truearr[1] = \"您好\"console.log(\"浅拷贝\",arr, copyArr);

// JSON对象方法实现深拷贝let arr = [1,\"hello\",{name:\"张三\",age:21}]let newArr = JSON.parse(JSON.stringify(arr)) //将arr数组转换为字符串，再作为参数转化为对象arr[1] = \"您好\"arr[2].name = \"法外狂徒\"console.log(\"深拷贝\",arr, newArr);

原理是利用JSON.stringify将对象转成JSON字符串，再用JSON.parse把字符串解析成对象，这样在堆中开辟了新的内存，实现深拷贝

这种写法非常简单，而且可以应对大部分的应用场景，但是它还是有很大缺陷的，比如拷贝其他引用类型、拷贝函数、循环引用等情况

（2）手写递归

递归方法实现深度克隆原理：遍历对象、数组…直到里边都是基本数据类型，然后再去复制，就是深度拷贝

如果是原始类型，无需继续拷贝，直接返回
如果是引用类型，创建一个新的对象，遍历需要克隆的对象，将需要克隆对象的属性执行深拷贝后依次添加到新对象上

// 手写递归实现深拷贝function clone(target) {if (typeof target === \'object\') {// 创建一个新对象let cloneTarget = {};// 遍历需要克隆的对象for (const key in target) {// 将需要克隆对象的属性执行深拷贝后依次添加到新对象上cloneTarget[key] = clone(target[key]);}// 返回克隆对象return cloneTarget;} else {return target;}};// 模拟拷贝对象const person = {name: \"李小白\",age: 18,job: {name:\"web前端\",salary:\"15k\",address:\"成都\"}};// 将需要克隆的对象传递给clone函数作为参数，接收一个克隆对象作为返回结果let newTarget = clone(person)//修改原对象属性person[\"name\"] = \"李大白\"person[\"job\"][\"salary\"] = \"25k\"console.log(person,newTarget); //实现深拷贝

利用递归可以实现深度拷贝，但是有局限性，例如数组还没考虑进去！

想要兼容数组其实很简单，直接判断一下参数是不是数组，然后利用三木运算决定是创建一个新对象还是一个新数组：

function clone(target) {if (typeof target === \'object\') {let isArr = Array.isArray(target)// 判断传入的参数是数组吗 ? 是则赋值[] : 否则赋值{}let cloneTarget = isArr ? [] : {};// 遍历需要克隆的对象for (const key in target) {// 将需要克隆对象的属性执行深拷贝后依次添加到新对象上cloneTarget[key] = clone(target[key]);}// 返回克隆对象return cloneTarget;} else {return target;}};

（3）JQuery中extend方法

在jQuery中提供一个$extend()来实现深拷贝

语法：

$.extend( [deep ], target, object1 [, objectN ] )

deep表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝
targetObject类型目标对象，其他对象的成员属性将被附加到该对象上。
object1objectN可选。 Object类型第一个以及第N个被合并的对象。

let arr = [\"李小白\",18,[\"前端\",\"15k\"],21]// true:开启深拷贝,目标对象:[],原对象:arrlet cloneArr = $.extend(true, [], arr)arr[0] = \"李大白\";arr[2][0] = \"java\";console.log(arr, cloneArr);

$extend()第一个参数为true时可以实现深拷贝！但是第一个参数为false，则只会拷贝第一层属性，不能实现深拷贝：

let arr = [\"李小白\",18,[\"前端\",\"15k\"],21]// false:不开启深拷贝,目标对象:[],原对象:arrlet cloneArr = $.extend(false, [], arr)arr[0] = \"李大白\";arr[2][0] = \"java\";console.log(arr, cloneArr);

总结/注意

实现深拷贝方式有多种，以上三种较为常用，另外还有一个：函数库lodash中_.cloneDeep方法（本人未使用过）也可以实现深拷贝。

最后需要补充一下，网上有很多人说slice和concat方法可以实现，但我要说的是slice和concat方法不能实现深拷贝的！！！

下面举例说明：

// slice()let arr = [0,1,[\"hello\",\"world\"]];let cloneArr = arr.slice();arr[0] = \"零\";arr[2][0] = \"hello2022\"console.log(arr,cloneArr);

// concat()let arr = [0,1,[\"hello\",\"world\"]];let cloneArr = arr.concat();arr[0] = \"零\";arr[2][0] = \"hello2022\"console.log(arr,cloneArr);

这两个方法得到的结果都是一样的：

这一点大家一定要注意，深拷贝必须要拷贝所有层级的属性，而这两个方法拷贝不彻底，也就是只能拷贝第一层，希望大家不要踩坑！