前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript第七弹——深入理解浅拷贝与深拷贝

JavaScript第七弹——深入理解浅拷贝与深拷贝

作者头像
萌兔IT
发布2019-07-25 14:09:34
4090
发布2019-07-25 14:09:34
举报
文章被收录于专栏:萌兔it

Hello小伙伴们,抱歉这两天没有更文,今天我来将功补过啦,今天的主题是“拷贝”!大家还记得之前说过的数据类型吗,那可是我们今天的基础呢!

数据存储

  • 基本数据类型:Undefined,Null,Boolean,Number和String
  • 引用数据类型:对象

还记得这个的小伙伴真的是棒棒的呢!但是大家记得分别是什么数据类型,又知道数据是怎么存储的吗?数据存储方法的不同,会造成数据拷贝方式的不同。

  • 基本数据类型: 基本数据类型的值在内存中存储与栈内存中,并占据着固定大小的空间。一个变量向另一个变量复制基本类型的值,就会创建被复制值的副本,基本数据类型的值不能够添加属性。
  • 引用数据类型: 引用数据类型是对象,被保存在堆内存中。包含引用类型值的变量实际上包含的不是对象本身,而是一个指向该对象的指针。从一个变量向另一个变量复制引用类型的值时,复制的其实是指针地址而已,因此两个变量最终都指向同一个对象。

那么对于基本类型和应用类型的数据,我们分别要怎样进行拷贝呢?

浅拷贝

对于基本类型的数据来说,我们相当于就是为数据创建一个副本,直接进行浅拷贝就可以了:

代码语言:javascript
复制
var arr1 = [rabbit1, rabbit2, rabbit3, rabbit4];
var arr2 = arr;

深拷贝

相比于浅拷贝来说,深拷贝就复杂得多了。说到深拷贝,这又要分成是对数组对象的拷贝还是普通对象的拷贝,因为数组有自己的特性和函数。

var arr = [1, 2, 3, 4];

  • 数组对象:那让我们先隆重请出slice和concat对象!!! slice:arrayObj.slice(start, [end]) 该方法返回一个 Array 对象,其中包含了 arrayObj 的指定部分。不会改变原数组 var copyArr1 = arr.slice(0); concat:arrayObj.concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。 var copyArr2 = arr.concat();
  • 普通对象:为了达到深拷贝的目的,我们就要首先定义新对象,遍历原对象,并把遍历值赋给新对象。 var deepCopy = function(obj) { var result = {}; for(var key in obj) { if(typeof obj[key] === 'object') { result[key] = deepCopy(obj[key]) } else { result[key] = obj[key] } } return result; } 其实这和数组的深拷贝是一样的,数组通过函数实现的也是循环遍历数组内部的值。

好啦,今天的内容就是这么多了,不要看篇幅不大,但是信息量很大哦,大家也可以自己敲一遍,顺便通过更改对象的某个属性值来判断是不是真的实现了深拷贝呢~~

喜欢兔妞的文章请给点个好看让更多人看到呦~~么么哒!!!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-02-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 萌兔it 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档