js——浅拷贝和深拷贝
一、浅拷贝
浅拷贝：拷贝的是地址
常见方法：
1.拷贝对象:0bject.assgin()/展开运算符 {...obj}拷贝对象
2.拷贝数组:Array.prototype.concat()或者[...arr]
<script>const obj = {uname: 'yan',age: 22,family: {sister: 'yu'}}// 浅拷贝 如果是简单数据类型拷贝值，引用数据类型拷贝的是地址(简单理解:如果是单层对象，没问题，如果有多层就有问题)// // ...obj // const o = { ...obj }// console.log(o);// o.age = 20// console.log(o);// console.log(obj);// Object.assignconst o1 = {}Object.assign(o1, obj)o1.age = 18o1.family.sister = 'xin'console.log(o1);console.log(obj);</script>总结：
1.直接赋值和浅拷贝有什么区别?
直接赋值的方法，只要是对象，都会相互影响，因为是直接拷贝对象栈里面的地址
浅拷贝如果是一层对象，不相互影响，如果出现多层对象拷贝还会相互影响
2.浅拷贝怎么理解?
拷贝对象之后，里面的属性值是简单数据类型直接拷贝值
如果属性值是引用数据类型则拷贝的是地址
二、深拷贝
深拷贝：拷贝的是对象，不是地址
常见方法：
1.通过递归实现深拷贝
2.lodash/cloneDeep
3.通过JSON.stringify()实现
下面介绍一下几种方法：
（1）利用递归
函数递归:
如果一个函数在内部可以调用其本身，那么这个函数就是递归函数
· 简单理解:函数内部自己调用自己,这个函数就是递归函数
· 递归函数的作用和循环效果类似
· 由于递归很容易发生“栈溢出”错误(stackoverflow)，所以必须要加退出条件
<script>const obj = {uname: 'yan',age: 22,hobby: ['唱歌', '跳舞'],family: {sister: 'yu'}}const o = {}// 深拷贝需要用到函数递归，新对象修改不会影响旧对象function deepCopy(newObj, oldObj) {for (let k in oldObj) {// 处理数组问题：利用递归函数取出数组再次遍历 注意:一定先写数组，再写对象if (oldObj[k] instanceof Array) {newObj[k] = []// newObj[k] 接受空数组[]// oldObj[k] ['唱歌', '跳舞']deepCopy(newObj[k], oldObj[k])// 处理对象问题} else if (oldObj[k] instanceof Object) {newObj[k] = {}deepCopy(newObj[k], oldObj[k])} else {// k 属性名 oldObj[k]属性值// newObj[k] === o.unamenewObj[k] = oldObj[k]}}}deepCopy(o, obj) //函数调用 俩参数 o新对象 obj旧对象o.hobby[0] = '编程'o.family.sister = 'xin'console.log(o);console.log(obj);</script>（2）利用lodash：引入js库 lodash
<script src="./lodash.min.js"></script><script>const obj = {uname: 'yan',age: 22,hobby: ['唱歌', '跳舞'],family: {sister: 'yu'}}const o = _.cloneDeep(obj)console.log(o);</script>（3）利用JSON
<script>const obj = {uname: 'yan',age: 22,hobby: ['唱歌', '跳舞'],family: {sister: 'yu'}}// 把对象转换为JSON字符串const o = JSON.parse(JSON.stringify(obj))o.family.sister = 'xin'console.log(o);console.log(obj);</script>总结：
实现深拷贝三种方式?
自己利用递归函数书写深拷贝
利用js库 lodash里面的_.cloneDeep()
利用JSON字符串转换