JS中的两种数据类型及实现引用类型的深拷贝的方法


Posted in Javascript onAugust 12, 2018

一.前言

我们知道,在JS中数据类型按照访问方式和存储方式的不同可分为基本类型和引用类型。

基本类型

基本类型有String、Boolean、Number,Undefined、Null,这些基本类型都是按值传递的,也称为值类型。

引用类型

引用类型有对象、数组、函数,它们都是按引用访问的。

二.存储方式区别

基本类型和引用类型由于两者在内存中存储的方式不同,造成两者访问的方式也不同。其中,基本类型存储在内存的栈中,是按值访问;引用类型存储在内存的堆中,是按引用访问。可如下图所示:

当有

var n1 = 10;
 var n2 = 10;
 var arr1 = [1,2,3,4]
 var arr2 = [1,2,3,4]

其在内存中存储方式如图:

JS中的两种数据类型及实现引用类型的深拷贝的方法

值类型是在栈中直接保存的变量的实际值,而引用类型在栈中仅仅保存的是变量指向堆中的地址,从上图中可以看出,值类型的变量n1和n2都是10,但是在栈中却为这两个变量分别开辟了两块空间来存储,而引用类型的变量arr1和arr2也相同,但是在堆中仅仅开辟了一块内存来存储,而在栈中存储的是这两个变量指向堆中的地址,这两个变量都指向堆中的同一片地址。

三.拷贝区别

正是由于两者在存储方式上的不同,造成了两者在拷贝时的差异。首先,先看两段代码:

var n1 = 10;
 //将n1拷贝给n2
 var n2 = n1;
 n1 = 12;
 console.log(n1);
 console.log(n2);

先定义变量n1=10,然后将n1拷贝给n2,再接着改变n1的值为12,分别打印n1和n2的值,打印结果为:

JS中的两种数据类型及实现引用类型的深拷贝的方法

从结果中我们可以看到,n1变为12了,但是n2不受影响,依旧是10。

再看另外一段代码:

var arr1 = [1,2,3,4]
 //将arr1拷贝给arr2
 var arr2 = arr1;
 //向arr1中尾部添加一个元素5
 arr1.push(5); 
 console.log(arr1);
 console.log(arr2);

先定义数组arr1,然后将arr1拷贝给arr2,再接着向arr1中尾部追加一个元素,分别打印arr1和arr2的值,打印结果为:

JS中的两种数据类型及实现引用类型的深拷贝的方法

从结果中我们可以看到:我们先将arr1拷贝给了arr2,但是当我们改变arr1时,arr2也跟着一起改变了。这印证了前文所说的,arr1和arr2实际上是指向了内存中的同一片地址,当arr1发生变化时,实际上是将指向的这片内存地址中的数据变化了,而arr2也指向的是这片地址,所以arr2也会跟着变化。

上面代码中的arr2=arr1,就是我们俗称的浅拷贝,浅拷贝仅仅拷贝的是变量名,其在内存的存储没有被拷贝,指向的还是同一片内存地址,这就是造成了一个变化另外一个也跟着变化,这在日常开发中不是我们想要的。

那如何实现真正的拷贝呢?

四.实现深拷贝

真正的拷贝,就是拷贝过后,arr1和arr2指向的不再是同一片内存地址,而是分别指向各自的地址,这样发生变化的时候就不会出现同时变化,这就是深拷贝。

下面我们封装一个深拷贝函数,来实现引用类型的深拷贝:

//参数p为原对象
 //参数c为原对象的类型,若原对象为数组,则传入c为[],若原对象是对象传入c为{},也可不传默认为{}
 function deepCopy(p,c){
 var c = c || {};
 for(var i in p){
 if(typeof p[i] === "object"){
 

c[i] = (p[i].constructor === Array)?[]:{};
 

deepCopy(p[i],c[i])
 

}else{
 

c[i] = p[i]

  }
 
}
 
return c;
 }

五.测试

//参数p为原对象
 //参数c为原对象的类型,若原对象为数组,则传入c为[],若原对象是对象传入c为{},也可不传默认为{}
 function deepCopy(p,c){
 var c = c || {};
 for(var i in p){
 if(typeof p[i] === "object"){
 

 c[i] = (p[i].constructor === Array)?[]:{};
 

 deepCopy(p[i],c[i])
 

}else{
 


c[i] = p[i]
 

}
 
}
 
return c;
 }
 //定义数组arr1
 var arr1 = [1,2,3,4]
 //将arr1拷贝给arr2
 var arr2 = deepCopy(arr1,[]);
 //向arr1中尾部添加一个元素5
 arr1.push(5);
 console.log('arr1:',arr1);
 console.log('arr2:',arr2);

测试结果:

JS中的两种数据类型及实现引用类型的深拷贝的方法

结果中可以看到,arr1变化没有引起arr2的变化,实现了真正的拷贝。

总结

以上所述是小编给大家介绍的JS中的两种数据类型及实现引用类型的深拷贝的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js css样式操作代码(批量操作)
Oct 09 Javascript
js自动下载文件到本地的实现代码
Apr 28 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 #Javascript
axios向后台传递数组作为参数的方法
Aug 11 #Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 #Javascript
axios的拦截请求与响应方法
Aug 11 #Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 #Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 #Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 #Javascript
You might like
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
php简单日历函数
2015/10/28 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
js类型检查实现代码
2010/10/29 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
Python输入二维数组方法
2018/04/13 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
python selenium操作cookie的实现
2020/03/18 Python
基于python实现模拟数据结构模型
2020/06/12 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
体育老师的教学自我评价分享
2013/11/19 职场文书
应用艺术毕业生的自我评价
2013/12/04 职场文书
不错的求职信范文
2014/07/20 职场文书
大学生安全责任书
2014/07/25 职场文书
2014年党小组工作总结
2014/12/20 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
学校运动会加油词
2015/07/18 职场文书
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript