干货带图：前端深浅拷贝的实现

1. 先了解下 什么是深浅拷贝

浅拷贝：

浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。

如果属性是基本类型，拷贝的就是基本类型的值，

如果属性是引用类型，拷贝的就是指向内存的地址

所以如果其中一个对象改变了这个引用类型的值，就会影响到另一个对象。

深拷贝：

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

1. 深拷贝和浅拷贝有什么区别  

浅拷贝： 浅拷贝 拷贝的是一样的内存的地址，引用类型中的地址还是相同的 所以改变原来的引用类型对象 浅拷贝出来的值也会改变。

深拷贝： 深拷贝 拷贝的是一个开辟一个新的内存地址，所以改变原来的引用类型对象 深拷贝出来的值不会改变。新的和旧的内存地址不一样， 所以不会有影响。

1. 应该怎么实现深拷贝和浅拷贝呢

浅拷贝的实现方法：

1. 扩展运算符

1. Array.prototype.concat

数组的 concat 方法其实也是浅拷贝，使用场景比较少，使用concat连接一个含有引用类型的数组时，需要注意修改原数组中的元素的属性，因为它会影响拷贝之后连接的数组

1. Array.prototype.slice

数组的 slice 方法其实也是浅拷贝，使用场景比较少，同cancat

1. 自定义递归方法实现

1. Object.assign

注意：只有对象是嵌套的时候 才可以实现的是浅拷贝 反则为深拷贝

深拷贝的实现方法：

1. JSON.stringify + JSON.parse

这个方法也很常用 但是也有一定的缺点:

1. 1. 循环引用：JSON.stringify() 会在传入递归数据结构时抛出异常。
   2. 当对象内存在undefined、symbol、function类型的属性时，在序列化过程中会被忽略。
   3. 属性为NaN 和 Infinity 格式的数值及 null 都会被当做 nul

1. 利用lodash工具

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

1. Object.assgin

注意：只有对象是一层的时候 才可以实现的是深拷贝 反则为浅拷贝

1. structureClone

HTML 规范已经把这个功能暴露给了开发者，提供了一个名为 structuredClone() 函数，用它即可轻松实现 JavaScript 值的深拷贝

优势

结构化拷贝解决了 JSON.stringify() 的大部分缺点，它可以处理数据的循环引用，支持许多内置的数据类型而且更加健壮和高效。

限制

原型：如果 structuredClone() 传入一个类的实例，会得到一个普通的对象，因为结构化拷贝会丢弃对象的原型链。

函数：如果对象包含了函数，会抛出异常。

拷贝 DOM 节点会抛出异常。

1. 递归调用