深拷贝：概念、使用原因、应用场景、3种常用方法

关于作者：

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

热门专栏精彩推荐图文案例Openlayers综合(300+） Cesium (200+) Leaflet (150+) MapboxGL (150+)Canvas (100+) Echarts (100+)Openlayers基础(70+)Geoserver服务 网络配置HTML 杂货铺javascript 精选 CSS布局动画Vue概念详解vue2 实战 vue3 实战

文章目录

什么是深拷贝？

深拷贝（Deep Copy）是指在计算机程序设计中，复制一个对象时不仅复制其基本类型值，而且也复制其引用类型的属性所指向的对象，并同样递归地复制这些对象的所有属性，直到所有的可到达对象都是独立的副本。这样，修改新副本中的任何内容都不会影响原对象及其任何其他副本。

为什么要使用深拷贝？

**

深拷贝是一种保持数据独立性和完整性的重要手段，在许多场景下都是不可或缺的操作。

** 使用深拷贝的原因主要有以下几点：

• **独立性**：深拷贝创建的是一个完全独立的副本，对副本的操作不会影响原始数据，这在一些场景中非常重要，比如数据备份、多线程编程等。
• **安全性**：通过深拷贝，可以避免意外修改原始数据，从而提高代码的安全性和稳定性。
• **可复用性**：深拷贝后的副本可以独立使用和修改，方便代码的复用和模块化开发。
• **隔离性**：在一些复杂的数据结构中，深拷贝可以确保不同部分的数据相互隔离，避免不必要的关联和影响。
• **性能优化**：对于一些需要频繁修改数据的场景，使用深拷贝可以避免不必要的共享和同步操作，提高程序的性能。

深拷贝的应用场景

• 数据备份和恢复：在进行数据备份时，使用深拷贝可以创建数据的完整副本，以便在需要时进行恢复。
• 多线程编程：在多线程环境下，深拷贝可以避免多个线程同时修改同一个对象导致的竞态条件。
• 对象复制和克隆：当需要创建一个对象的副本时，深拷贝可以确保副本与原始对象完全独立，不会相互影响。
• 数据传递和共享：将数据通过深拷贝传递给其他模块或进程，可以确保数据的独立性和完整性。
• 测试和模拟：在测试代码中，深拷贝可以用于创建测试数据的副本，以便进行各种测试和模拟。
• 缓存和数据持久化：深拷贝可以用于缓存数据或将数据持久化到存储介质中，以提高性能和数据的可用性。

这些只是深拷贝的一些常见应用场景 ，**

实际上，只要需要创建独立、不受原始对象影响的副本，都可以考虑使用深拷贝。

**

实现深拷贝的常用方法

1. 使用Lodash库的_.cloneDeep()方法

import _ from'lodash';let original ={a:1,b:{c:2}};let copied = _.cloneDeep(original);
copied.b.c =3;
console.log(original);// { a: 1, b: { c: 2 } }
console.log(copied);// { a: 1, b: { c: 3 } }

2. JSON.parse + JSON.stringify

使用 **

JSON.stringify

** 将对象转换成JSON字符串，再使用 **

JSON.parse

** 将其解析为新的JavaScript对象。

functionjsonDeepCopy(obj){returnJSON.parse(JSON.stringify(obj));}// 示例let original ={a:1,b:{c:2}};let copied =jsonDeepCopy(original);
copied.b.c =3;
console.log(original);// { a: 1, b: { c: 2 } }
console.log(copied);// { a: 1, b: { c: 3 } }

**

注意

**：这种方法存在局限性，例如它不能处理函数、日期、循环引用等特殊对象。

3. 递归函数

通过递归的方式遍历对象或数组的所有层级，逐个创建新的对象和数组。

functiondeepCopy(obj){if(obj ===null||typeof obj !=='object'){// 如果不是对象或数组，则直接返回原值return obj;}let copy = Array.isArray(obj)?[]:{};// 判断是否为数组并初始化新对象for(let key in obj){if(obj.hasOwnProperty(key)){
            copy[key]=deepCopy(obj[key]);// 递归调用自身复制子对象}}return copy;}// 示例let original ={a:1,b:{c:2}};let copied =deepCopy(original);
copied.b.c =3;// 修改拷贝后的对象不会影响原始对象
console.log(original);// { a: 1, b: { c: 2 } }
console.log(copied);// { a: 1, b: { c: 3 } }