什么是深拷贝什么是浅拷贝,两者区别

什么是深拷贝什么是浅拷贝,两者区别

1.深拷贝

递归复制对象的所有层级,嵌套的引用类型属性,最后生成一个完全独立的新对象,与原对象无任何引用关联。

特点:

新对象和原对象的所有层级属性是独立的(修改不会相互影响)

2.浅拷贝

只复制对象的第一层属性,如果属性是引用类型(引用数据类型放在堆中,优先级)

如果属性是基本数据类型,浅拷贝会复制这些值。如果属性是引用数据类型,浅拷贝是只复制复制他们的内存地址,这就意味着新对象和原对象数据共享同一块内存中的引用对象

特点:原对象和新的对象第一层(基本数据类型)属性是相互独立的,但是深层(引用数据类型)属性是共享的(修改会互相影响)

实现方法

javascript 复制代码
1、扩展运算符
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { ...obj1 };
obj2.a = 3;
obj2.b.c = 4;
console.log(obj1.a); // 1
console.log(obj1.b.c); // 4,同样被修改了,此处反应是浅拷贝,深拷贝不会发生改变
2、Object.assign
const obj2 =Object.assign({},...obj1)
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = Object.assign({}, obj1);
obj2.a = 3;
obj2.b.c = 4;
console.log(obj1.a); // 还是1,说明obj1的a属性没变
console.log(obj1.b.c); // 变成4了,所以obj1的b对象被修改了,是浅拷贝,而深拷贝是相互独立的
3、数组浅拷贝(slice、concat、展开运算符)
concat()	连接两个或多个数组,不影响原数组	返回一个新的数组
slice()	数组复制slice(begin、end)	返回被截取项目的新数组,不影原数组

3.两者区别

应用场景

何时使用浅拷贝?

浅拷贝适用于以下情况:

性能要求较高:浅拷贝复制速度快,因为它只复制基本数据类型和引用,而不复制引用对象本身。

对象结构简单:如果对象只包含不可变对象或没有多层次的嵌套引用,浅拷贝足以满足需求。

共享数据的场景:在某些情况下,需要多个对象共享相同的数据,以减少内存使用。例如,缓存数据的共享,浅拷贝可以使得多个对象共享相同的引用。

何时使用深拷贝?

深拷贝适用于以下情况:

数据独立性要求高:在需要确保原始对象和复制对象完全独立的情况下,深拷贝是必要的。这避免了一个对象的改变影响到另一个对象。

复杂数据结构:对于具有复杂嵌套引用的对象,深拷贝确保所有层次的引用对象都被复制,保证数据的完整性。

并发编程:在多线程环境中,深拷贝可以防止线程之间的相互干扰,提高程序的安全性和稳定性。

优缺点比较

浅拷贝的优缺点

优点:

速度快,效率高:因为只复制引用,浅拷贝的操作速度更快,占用的内存更少。

实现简单:浅拷贝通常只需简单的赋值操作,易于实现和维护。

缺点:

不独立:浅拷贝对象中的引用指向与原对象相同的内存区域,修改一个对象可能影响另一个对象,导致数据一致性问题。

易产生难以察觉的Bug:由于共享同一引用,可能在不经意间导致数据的修改,出现难以察觉的Bug。

深拷贝的优缺点

优点:

数据独立性强:深拷贝确保新对象与原对象完全独立,修改一个对象不会影响另一个对象,保证数据的安全性和独立性。

适用于复杂数据结构:深拷贝可以处理具有嵌套引用的复杂对象,确保复制后的对象数据完整。

缺点:

实现复杂:深拷贝需要递归复制所有引用对象,编写代码时容易出错,增加了代码的复杂性。

性能开销大:深拷贝需要分配新的内存空间,复制对象的过程较慢,占用更多的内存资源。

相关推荐
前端大卫1 小时前
Vue3 里的 h 函数的运用场景!
前端·vue.js
bubiyoushang8881 小时前
matlab雷达定位仿真
开发语言·matlab
ladymorgana2 小时前
【OSS】 前端如何直接上传到OSS 上返回https链接,如果做到OSS图片资源加密访问
前端·网络协议·https
鬼多不菜2 小时前
一篇学习CSS的笔记
java·前端·css
慌糖2 小时前
Vue组件化
前端·javascript·vue.js
yezipi耶不耶2 小时前
Rust入门之并发编程基础(一)
开发语言·后端·rust
祺简2 小时前
CSS--background-repeat详解
前端·css
烛阴2 小时前
从零打造属于你的Python容器类型:全流程图解+实战案例
前端·python
blues_C3 小时前
十一、【核心功能篇】测试用例管理:设计用例新增&编辑界面
前端·vue.js·测试用例·element plus·测试平台
前端snow3 小时前
用cursor写一个微信小程序-购物网站实操
前端·javascript·后端