前端的深拷贝和浅拷贝

前端中的深拷贝和浅拷贝是在处理对象和数组时常用的两种拷贝方式。

浅拷贝只是复制了对象或数组的引用，新的变量指向了同一块内存地址。当原始对象或数组发生变化时，新的变量也会随之改变。

深拷贝则是创建一个完全独立的新对象或数组，新的变量和原始对象或数组没有任何关联。即使原始对象或数组发生了变化，新的变量也不会受到影响。

在 JavaScript 中，可以使用不同的方法实现深拷贝和浅拷贝。例如，使用 `Object.assign()` 或扩展运算符 `...` 可以实现浅拷贝，而使用 `JSON.parse(JSON.stringify())` 可以实现深拷贝。

需要注意的是，深拷贝可能会带来性能上的开销，并且无法处理循环引用的情况。在选择使用深拷贝还是浅拷贝时，需要根据具体的需求和数据结构来进行判断和选择。

相关问题

前端深拷贝 和浅拷贝有哪些方式,你在哪里使用过

前端深拷贝和浅拷贝的方式有很多，下面列举几种常用的方式：

深拷贝：
1. JSON.parse(JSON.stringify(obj))，该方法可以将对象序列化为字符串，再将字符串反序列化为新的对象，从而实现深拷贝。但是该方法有一些限制，例如无法拷贝函数、RegExp等类型的数据。
2. 递归拷贝，即遍历对象的每个属性并进行拷贝，如果属性值是对象，则递归进行拷贝。
3. 使用第三方库如lodash、jQuery等提供的深拷贝方法。

浅拷贝：
1. Object.assign(target, obj1, obj2, ...)，该方法可以将源对象的属性浅拷贝到目标对象中，如果有相同的属性，则会覆盖掉目标对象中的属性。
2. 手动遍历对象的每个属性并进行拷贝，例如使用for...in循环。

我在工作中经常使用深拷贝和浅拷贝，例如在React开发中需要对state和props进行拷贝，以避免直接修改原始数据。同时也可以在处理数据时对数据进行深拷贝，以避免对原始数据造成影响。

前端深拷贝与浅拷贝的区别

前端深拷贝与浅拷贝的区别在于复制对象时是否递归地复制对象中的子对象。

浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是引用类型，拷贝的就是内存地址。所以如果其中一个对象改变了这个地址，就会影响到另一个对象。浅拷贝只复制一层对象的属性。

深拷贝是将一个对象从内存中完整地拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，并递归地拷贝对象中的子对象。深拷贝后的新对象与原对象互不影响，即使修改新对象的值也不会影响原对象。深拷贝复制了所有层级的对象属性。

在前端开发中，深拷贝通常用于确保修改副本对象不会影响原始对象，尤其是在涉及到多层嵌套的对象或数组时。常见的实现深拷贝的方式包括使用递归、JSON.stringify和JSON.parse等方法。而浅拷贝则可以通过赋值操作、Object.assign等方法来实现。

因此，深拷贝与浅拷贝的区别在于复制对象时是否递归地复制对象中的子对象，以及复制后的对象是否与原对象互不影响。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [[前端面试题]：深拷贝与浅拷贝的区别](https://blog.csdn.net/WWEIZAI/article/details/126519334)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [前端面试：浅拷贝和深拷贝的区别？](https://blog.csdn.net/weixin_39570751/article/details/123363926)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]