<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <hr /> 讯享网
在JS中，深拷贝和浅拷贝是针对对象（Object）和数组（Array）这类复杂数据类型复制时的概念。
- 浅拷贝： 当进行浅拷贝时，只是将对象或数组的引用复制一份给新的变量。这意味着新旧变量指向的是同一个内存空间中的数据结构，修改其中一个变量会影响到另一个变量，因为它们实际上是共享同一份数据。
- 深拷贝： 则是创建一个与原对象完全独立的对象副本，对于原对象内部所包含的所有层级的数据（包括嵌套的对象或数组），都会递归地进行复制，从而保证了新旧对象间不存在任何共享的引用。
简单来说，对拷贝后的数组或对象进行修改，会影响原数组或对象的就是浅拷贝，不会影响的就是深拷贝。
基本用法：将一个或多个源对象的属性复制到目标对象，并返回目标对象。这一过程是浅拷贝的，即对于嵌套对象或数组，只是拷贝了引用而非创建新的对象。
示例：
讯享网
结果：
讯享网
从结果可以看到，修改 clonedObj 的属性也会影响到原始对象 obj，所以实现的是浅拷贝。
在ES6中，运算符被称为扩展（Spread）运算符，可以用于数组和对象的浅拷贝。
示例1：拷贝对象
结果：
示例2：拷贝数组
讯享网
结果：
从拷贝数组结果来看，原始数组和拷贝数组是独立的，但由于数组中包含的对象引用并未改变，所以修改拷贝数组中对象的属性时，原始数组中对应的对象也会受到影响。
也就是说，对于简单数组，可以实现数组深拷贝，但是复杂数组…则不能用做实现深拷贝的方法。
利用 JSON 的序列化和反序列化可以实现对象的深拷贝。原理是：会递归遍历对象的所有属性（包括嵌套的对象和数组），将其转换为JSON字符串；然后则会根据JSON字符串创建新的JavaScript对象。
示例：
结果：
从结果看到，修改拷贝后的对象其中的属性值，并不会改变原对象的属性值，所以实现的是一个深拷贝。
！！！注意这种方法有局限：
- 它不能处理函数和RegExp等非JSON兼容类型。
- 对象中的循环引用会导致错误或丢失数据。
- 如果对象中有undefined、function或symbol类型的属性，它们在序列化过程中会被忽略。
- 对日期对象，JSON.stringify会将日期转换为字符串，所以反序列化后得到的是字符串而不是Date对象，如果需要保持日期类型，需要额外处理。
- 简单版：只考虑普通对象属性，不考虑内置对象和函数
讯享网
结果：
- 【推荐】复杂版：考虑内置对象比如Date、RegExp等对象和函数以及解决循环引用的问题。
结果：
例如： 这种拿来就可以用的方法就不做过多介绍了～
总的来说，js中的深、浅拷贝其实就是一个基本功，在实际业务场景中，可根据数据复杂程度自行选择各种实现方式，加油⛽️
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/187681.html