- A+
一、自我理解
简单来讲就是：深拷贝层层拷贝，浅拷贝只拷贝第一层。
-
在深拷贝中，新对象中的更改不会影响原对象，而在浅拷贝中，新对象中的更改，原对象中也会跟着改。
-
在深拷贝中，原对象与新对象不共享相同的属性，而在浅拷贝中，它们具有相同的属性。
举个栗子：存在A和B两个数据，假设B复制了A，当修改A时，如果B跟着A变化了，则是浅拷贝；如果B不受A的改变而改变，则是深拷贝
let A = [0,1,2] let B = A console.log(A === B); A[0] = 3 console.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的值不影响b a = 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 = arr console.log(arr === copyArr); //true arr[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，则为浅拷贝
- target Object类型 目标对象，其他对象的成员属性将被附加到该对象上。
- object1 objectN可选。 Object类型 第一个以及第N个被合并的对象。
let arr = ["李小白",18,["前端","15k"],21] // true:开启深拷贝,目标对象:[],原对象:arr let cloneArr = $.extend(true, [], arr) arr[0] = "李大白"; arr[2][0] = "java"; console.log(arr, cloneArr);
$extend()第一个参数为true时可以实现深拷贝！但是第一个参数为false，则只会拷贝第一层属性，不能实现深拷贝：
let arr = ["李小白",18,["前端","15k"],21] // false:不开启深拷贝,目标对象:[],原对象:arr let 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);
这两个方法得到的结果都是一样的：
这一点大家一定要注意，深拷贝必须要拷贝所有层级的属性，而这两个方法拷贝不彻底，也就是只能拷贝第一层，希望大家不要踩坑！
