前端的深拷贝和浅拷贝

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

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

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

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

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

相关问题

前端 深拷贝和浅拷贝

前端中的深拷贝和浅拷贝是用于复制对象或数组的概念。

浅拷贝是指创建一个新的对象或数组，然后将原始对象或数组的引用复制给新对象或数组。这意味着当你修改新对象或数组时，原始对象或数组也会被修改。实现浅拷贝的方法有多种，如使用 `Object.assign()`、扩展运算符 `...` 或者 `Array.prototype.slice()` 等。

例如，使用扩展运算符进行浅拷贝：

const originalObj = { a: 1, b: { c: 2 } };
const shallowCopy = { ...originalObj };

shallowCopy.a = 3;
shallowCopy.b.c = 4;

console.log(originalObj); // { a: 1, b: { c: 4 } }
console.log(shallowCopy); // { a: 3, b: { c: 4 } }

深拷贝则是在创建新对象或数组时，递归地复制原始对象或数组中的所有值，从而创建一个完全独立的副本。这意味着修改新对象或数组不会影响原始对象或数组。常见的实现深拷贝的方法有使用递归、`JSON.parse(JSON.stringify())` 或者第三方库如 `lodash` 的 `cloneDeep()`。

例如，使用`JSON.parse(JSON.stringify())`进行深拷贝：

const originalObj = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(originalObj));

deepCopy.a = 3;
deepCopy.b.c = 4;

console.log(originalObj); // { a: 1, b: { c: 2 } }
console.log(deepCopy); // { a: 3, b: { c: 4 } }

需要注意的是，使用 `JSON.parse(JSON.stringify())` 的方式存在一些限制，例如无法复制函数、循环引用等。在实际应用中，需要根据需求选择合适的方法进行拷贝。

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

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

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

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

在前端开发中，深拷贝通常用于确保修改副本对象不会影响原始对象，尤其是在涉及到多层嵌套的对象或数组时。常见的实现深拷贝的方式包括使用递归、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 ]