JavaScript 高级（进阶补充）

JavaScript 高级（进阶补充）

高阶技巧

深浅拷贝

开发中我们经常需要复制一个对象。如果直接用赋值，会出现问题：

对于字符串类型，浅复制是对值的复制，对于对象来说，浅复制是对对象地址的复制，并没 有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会 改变，而深复制则是开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。所以引入深拷贝和浅拷贝，浅拷贝和深拷贝只针对引用类型。首先浅拷贝和深拷贝只针对想Object,Array这样的复杂对象，简单来说，浅拷贝只复制一层对象的属性，二深拷贝则复制了所有的层级。

浅拷贝

浅拷贝：拷贝的是地址。

常见方法：

1. 拷贝对象：Object.assgin() / 展开运算符 {…obj} 拷贝对象
2. 拷贝数组：Array.prototype.concat() 或者 […arr]

 const obj = {
   
      uname: 'pink',
      age: 18,
      family: {
   
        baby: '小pink'
      }
    }

 //浅拷贝
 const o = {
    ...obj }
 o.age = 20

//浅拷贝
const o = {
   }
Object.assign(o, obj)
o.age = 20

如果是简单数据类型拷贝值，引用数据类型拷贝的是地址 (简单理解： 如果是单层对象，没问题，如果有多层就有问题)

//会把被拷贝的对象的内容也修改掉
 o.family.baby = '老pink'
    console.log(o)
    console.log(obj)

总结：

1. 直接赋值和浅拷贝有什么区别？
   直接赋值的方法，只要是对象，都会相互影响，因为是直接拷贝对象栈里面的地址；
   浅拷贝如果是一层对象，不相互影响，如果出现多层对象拷贝还会相互影响；
2. 浅拷贝怎么理解？
   拷贝对象之后，里面的属性值是简单数据类型直接拷贝值；如果属性值是引用数据类型则拷贝的是地址；

深拷贝

深拷贝：拷贝的是对象，不是地址。

常见方法：

1. 通过递归实现深拷贝
2. lodash/cloneDeep
3. 通过JSON.stringify()实现

通过递归实现深拷贝

函数递归：如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。

• 简单理解:函数内部自己调用自己, 这个函数就是递归函数
• 递归函数的作用和循环效果类似
• 由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件 return