【前端知识点】深浅拷贝

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


浅拷贝

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

常见的浅拷贝方式有:

  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())会检测并处理循环引用的情况,确保复制过程不会陷入死循环。

相关推荐
晓晓hh2 小时前
JavaSE学习——迭代器
java·开发语言·学习
Laurence2 小时前
C++ 引入第三方库(一):直接引入源文件
开发语言·c++·第三方库·添加·添加库·添加包·源文件
kyriewen113 小时前
你点的“刷新”是假刷新?前端路由的瞒天过海术
开发语言·前端·javascript·ecmascript·html5
014-code3 小时前
String.intern() 到底干了什么
java·开发语言·面试
421!3 小时前
GPIO工作原理以及核心
开发语言·单片机·嵌入式硬件·学习
摇滚侠4 小时前
JAVA 项目教程《苍穹外卖-12》,微信小程序项目,前后端分离,从开发到部署
java·开发语言·vue.js·node.js
@insist1234 小时前
网络工程师-生成树协议(STP/RSTP/MSTP)核心原理与应用
服务器·开发语言·网络工程师·软考·软件水平考试
Timer@4 小时前
LangChain 教程 04|Agent 详解:让 AI 学会“自己干活“
javascript·人工智能·langchain
野生技术架构师4 小时前
2026年牛客网最新Java面试题总结
java·开发语言
环黄金线HHJX.4 小时前
Tuan符号系统重塑智能开发
开发语言·人工智能·算法·编辑器