JavaScript浅拷贝与深拷贝的区别

15 篇文章 0 订阅

JavaScript有两种数据类型,基础数据类型和引用数据类型。基础数据类型都是按值访问的,我们可以直接操作保存变量中的实际值,而引用类型如Array,我们不能直接操作对象的堆内存空间,引用类型的值都是按引用访问的,即保存在变量对象中的一个地址。

一.深拷贝和浅拷贝的区别

浅拷贝(shallow copy):只复制指向某个对象的指针,而不复制这个对象本身,新旧对象共享一块内存。

深拷贝(deep copy):复制并创建一个一模一样的对象,不共享内存,修改新对象旧对象不会变。

如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短;如果B没变,那就是深拷贝,自食其力。

1. 如果是基本数据类型,名字和值都会储存在栈内存中

var a = 1;
b = a; // 栈内存会开辟一个新的内存空间,此时b和a都是相互独立的
b = 2;
console.log(a); // 1

当然,这也算不上深拷贝,因为深拷贝本身只针对较为复杂的object类型数据。

注:深浅拷贝的区别只适用于array【数组】与object【对象】

2. 如果是引用数据类型,名字存在栈内存中,值存在堆内存中,但是栈内存会提供一个引用的地址指向堆内存中的值

比如浅拷贝:
在这里插入图片描述

当b=a进行拷贝时,其实复制的是a的引用地址,而并非堆里面的值。
在这里插入图片描述

而当我们a[0]=1时进行数组修改时,由于a与b指向的是同一个地址,所以自然b也受了影响,这就是所谓的浅拷贝了。
在这里插入图片描述
那,要是在堆内存中也开辟一个新的内存专门为b存放值,就像基本类型那样,岂不就达到深拷贝的效果了

在这里插入图片描述

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
拷贝拷贝是针对JavaScript中的对象属性为对象的情况而言的。拷贝只是复制了对象的引用,也就是复制了内存地址,所以拷贝后的对象和原对象会共用同一个内存地址,属性值的改变会相互影响。而拷贝则是创建了一个完全独立的对象,拷贝了所有的属性和属性值,所以拷贝后的对象和原对象是完全独立的,互不影响。 在JavaScript中,可以通过不同的方法实现拷贝拷贝拷贝可以使用手动实现、Object.assign()和拓展运算符等方法。手动实现的拷贝方法是遍历原始对象的属性,将属性值赋给新对象。Object.assign()方法可以将一个或多个源对象的属性复制到目标对象中,也可以用于实现拷贝。拓展运算符(...)也可以用于实现拷贝拷贝则需要递归地复制对象的属性和属性值。可以通过手动实现一个拷贝函数,在遍历原始对象的属性时,如果属性值是对象类型,则递归调用拷贝函数进行复制。这样可以创建一个完全独立的对象,拷贝了所有的属性和属性值。 总结起来,拷贝只是复制了对象的引用,而拷贝是创建了一个完全独立的对象。使用不同的方法可以实现拷贝拷贝,根据具体的需求选择合适的方法进行使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [JavaScript拷贝拷贝概念与用法实例分析](https://download.csdn.net/download/weixin_38735570/14820137)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [javascript拷贝拷贝](https://blog.csdn.net/weixin_47417033/article/details/124899204)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值