【前端知识点】深浅拷贝

深拷贝和浅拷贝是两种常见的数据复制方式,它们的主要区别在于复制后的数据类型是否与原数据类型一致,以及复制后的数据是否与原数据相互独立。


浅拷贝

浅拷贝指的是将一个对象或数组复制到一个新的对象或数组中,新的对象或数组中的元素是原对象或数组的引用 。也就是说,当修改新的对象或数组中的元素时,原对象或数组中对应的元素也会发生变化。

常见的浅拷贝方式有:

  1. Object.assign()方法:该方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,并返回目标对象。如果目标对象中已经存在相同的属性,则会覆盖该属性的值。

  2. Array.prototype.concat()方法:该方法用于合并两个或多个数组,并返回一个新的数组。新数组中的元素是原数组中的元素的引用

  3. Array.prototype.slice()方法:该方法返回一个新的数组对象,包含原始数组的一部分。新数组中的元素是原数组中的元素的引用

浅拷贝的优点:

速度快、占用内存少,适用于简单的数据结构

缺点:

无法复制嵌套的对象或数组,也无法实现真正的数据隔离


深拷贝

深拷贝指的是将一个对象或数组复制到一个新的对象或数组中,新的对象或数组中的元素与原对象或数组完全独立 。也就是说,当修改新的对象或数组中的元素时,不会影响原对象或数组中对应的元素。

常见的深拷贝方式有:

  1. JSON.parse(JSON.stringify())方法:该方法先将数据转换为JSON字符串,再将JSON字符串转换为新的数据对象。这种方式可以复制任意层级的对象或数组,++但是无法复制函数、正则表达式等特殊类型的值。++

  2. 手动递归复制:该方式通过递归遍历原始对象或数组,将每个元素复制到新的对象或数组中。这种方式可以复制任意层级的对象或数组,也可以复制函数、正则表达式等特殊类型的值。

深拷贝的优点:

可以实现真正的数据隔离,适用于复杂的数据结构

缺点:

速度慢、占用内存多,需要注意避免循环引用的情况


注意细节

深拷贝和浅拷贝的区别在于复制后的数据是否与原数据完全独立,并且能否处理嵌套结构、特殊类型的值以及循环引用。

1. 数据类型

  • 对于基本数据类型(如数字、字符串、布尔值等),无论是深拷贝还是浅拷贝,复制后的数据都是相互独立的,修改其中一个不会影响另一个。

  • 对于引用数据类型(如对象、数组等),浅拷贝只是复制了引用,新对象或数组中的元素仍然指向原对象或数组中的相同元素。而深拷贝会递归地复制所有嵌套的对象或数组,新对象或数组中的元素与原对象或数组完全独立。

2. 嵌套结构

  • 浅拷贝只能复制一层对象或数组的引用,如果原对象或数组中存在嵌套的对象或数组,复制后的对象或数组仍然会共享这些嵌套的引用。这意味着修改新对象或数组中的嵌套元素会影响到原对象或数组。

  • 深拷贝可以复制任意层级的对象或数组,递归地复制每个嵌套的元素,确保新对象或数组与原对象或数组完全独立。

3. 特殊类型的值

  • 使用JSON.parse(JSON.stringify())进行深拷贝时,会忽略函数、正则表达式、undefined等特殊类型的值。这是因为JSON.stringify()只能处理JSON安全的数据类型。

  • 手动递归复制可以处理任意类型的值,包括函数、正则表达式等特殊类型。

4. 循环引用

  • 循环引用指的是对象或数组中存在相互引用的情况。例如,对象A的某个属性引用了对象B,而对象B的某个属性又引用了对象A。在深拷贝时,需要注意避免出现循环引用,否则会导致无限递归。

  • 一些深拷贝方法(如lodash.cloneDeep())会检测并处理循环引用的情况,确保复制过程不会陷入死循环。

相关推荐
YJlio10 小时前
Python 一键拆分 PDF:按“目录/章节”建文件夹 + 每页单独导出(支持书签识别&正文识别)
开发语言·python·pdf
IT方大同10 小时前
C语言进制转化
c语言·开发语言
仅此,10 小时前
前端接收了id字段,发送给后端就变了
java·前端·javascript·spring·typescript
野生风长10 小时前
从零开始的C语言:文件操作与数据存储(上)(文件的分类,文件的打开和关闭)
c语言·开发语言
樱桃园园长10 小时前
【Three.js 实战】手势控制 3D 奢华圣诞树 —— 从粒子系统到交互实现
javascript·3d·交互
二狗哈11 小时前
Cesium快速入门30:CMZL动画
javascript·3d·webgl·cesium·地图可视化
我是哈哈hh11 小时前
【Python数据分析】数据可视化(全)
开发语言·python·信息可视化·数据挖掘·数据分析
拾贰_C11 小时前
【python| pytorch】卸载py库,手动法
开发语言·pytorch·python
!停11 小时前
数据在内存中的存储(2)
开发语言·c++·算法
龙山云仓11 小时前
No098:黄道婆&AI:智能的工艺革新与技术传承
大数据·开发语言·人工智能·python·机器学习