前端的浅拷贝和深拷贝区别_解构赋值是深拷贝还是浅拷贝

前端的浅拷贝和深拷贝区别_解构赋值是深拷贝还是浅拷贝一、浅拷贝和深拷贝的区别数据都是存储在内存当中,而我们调用数据的时候都是通过地址来调用数据。对于浅拷贝来说,比如一个数组,只要我们修改了一个拷贝数组,那么原数组也会改变!vara=[0,1,2,3,4];varb=a;console.log(b);//[0,1,2,3,4]console.log(a);//[0,1,…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

引言

什么是基本类型值和引用类型值?

基本类型值指的是简单的数据段,而引用类型值指那些可能由多个值构成的 对象

var name = "John"; // 基本类型值

var obj = new Object(); 
obj.name = "John"; 
// obj 为引用类型值

复制变量

在复制变量中,对于基本类型值来说,两者是互不影响的

var num = 1;
var num1 = num; // num1 = 1;

var num1 = 3; // num还是1,不会变

对于引用类型值来说,复制分为两种,一种是浅拷贝,一种是深拷贝。

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

数据都是存储在内存当中,而我们调用数据的时候都是通过地址(指针)来调用数据。

对于浅拷贝来说,比如一个数组(数组是一种对象),只要我们修改了一个拷贝数组,那么原数组也会改变!

	var a = [0,1,2,3,4];
	var b = a;
	console.log(b);   //[0,1,2,3,4]
	console.log(a);   //[0,1,2,3,4]
	b[0] = 2;
	console.log(b);   //[2,1,2,3,4]
	console.log(a)    //[2,1,2,3,4]

因为他们引用的是同一个地址的数据!拷贝的时候并没有给b数组创造独立的内存,只是把a数组指向数据的 指针 拷贝给了b!
而深拷贝就与其相反,将会给b数组创造独立的内存,并且将a数组的内容一一拷贝进来,两者互不影响。

二、浅拷贝和深拷贝的原理(参考了某大大的博客并引用了他的图,手动滑稽~~)

浅拷贝和深拷贝一般是对于引用类型值(如对象)来讲的,而基本类型值(如undefined、null、number、string、boolean以及es6新增的Symbol),只要是复制,就一定是另开辟以存储空间!

①基本数据类型存储:名值都存在栈内存中

如let a = 1;

这里写图片描述

当let b = a时,b复制了a,栈内存会新开辟一个内存

这里写图片描述

所以两者互不影响,修改谁都没问题!

②引用数据类型:名存在栈内存中,值存在于堆内存中,但是栈内存会提供一个引用的地址指向堆内存中的值

以上面浅拷贝的例子画图:
  这里写图片描述

b复制了a后,b是引用了a的值的存储地址,而不是把a的值复制了下来!

这里写图片描述

所以改了b,a也会受到影响。

三、实现深拷贝

方法1、层级拷贝,用递归实现。

何为层级?如,var a = [0,1,2,[3,4],5];
 a有两层,第一层是[3,4]外围的一层;第二层是[3,4];

如果我们深拷贝的时候,这样,
	function deepClone(obj){
		let objClone = Array.isArray(obj)?[]:{};
		for(let i in obj){
			objClone[i] = obj[i];
		}
		return objClone;
	}
	var a = [0,1,2,[3,4],5];
	var b = deepClone(a);

我们得到的b它的首层是另辟存放空间的,也就是上面所说的[3,4]的外面一层存放在另开辟的存储空间中。但是[3,4]这第二层他仍然是引用数据地址,因为上面的遍历只遍历了首层

所以我们应该在上面的代码中加入判断,当碰到数组、对象等时递归函数。

	function deepClone(obj){
		//定义对象来判断当前的参数是数组还是对象
		let objClone = Array.isArray(obj)?[]:{};
		//如果obj存在并且为对象		
		if(obj&&typeof obj == "object"){
			for(let key in obj){
				if(obj.hasOwnProperty(key)){
					//如果obj的子元素为对象,那么递归(层级遍历)
					if(obj[key]&&typeof obj[key] == "object"){
						objClone[key] = deepClone(obj[key]);
					}else{
					//如果不是,直接赋值
						objClone[key] = obj[key];
					}
				}
			}
		}	
		return objClone;
	}

方法2、JSON解析(底层原理也是层级遍历)

依旧是上面的例子,var a =  [0,1,2,[3,4],5];

var b = JSON.parse(JSON.stringify(a));

b就是拷贝的结果,修改b不影响a。但是这种方法也有缺陷:

  1. 无法复制函数
  2. 原型链没了,对象就是object,所属的类没了。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/187294.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 2019年常见的Linux面试题及答案解析,哪些你还不会?

    2019年常见的Linux面试题及答案解析,哪些你还不会?Linux面试题1、绝对路径用什么符号表示?当前目录、上层目录用什么表示?主目录用什么表示?切换目录用什么命令?2、怎么查看当前进程?怎么执行退出?怎么查看当前路径?3、怎么清屏?怎么退出当前命令?怎么执行睡眠?怎么查看当前用户id?查看指定帮助用什么命令?4、Ls命令执行什么功能?可以带哪些参数,有什么区别?5、建立软链接(快捷方式),以及硬链接的命令。6、目录创…

  • cpu周期与指令周期_cpu时钟周期数怎么计算

    cpu周期与指令周期_cpu时钟周期数怎么计算计算机中我们常常会混淆指令周期、CPU周期和时钟周期,要区分这些并不难,但要想彻底弄懂这些,就得要求我们对CPU底层有一定了解。一.指令周期指令周期:是指计算机从取指到指令执行完毕的时间计算机执行指令的过程可以分为以下三个步骤:Fetch(取指),也就是从PC寄存器里找到对应的指令地址,根据指令地址从内存里把具体的指令,加载到指令寄存器中,然后把PC寄存器自增,好在未来执行下一条指令。 Decode(译码),也就是根据指令寄存器里面的指令,解析成要进行什么样的操作,是R、I、J

    2022年10月12日
  • 知名技术团队博客网站有哪些_知名创业团队

    知名技术团队博客网站有哪些_知名创业团队国内技术团队博客1 http://tech.meituan.com/美团点评技术团队2 http://fe.meituan.com/ 美团前端技术团队3 http://tech.uc.cn/   UC技术团队4 http://tencentdba.com/ 腾讯游戏DBA团队5 http://noops.me/    小米运维部非官方博客

  • SQL使用模糊查询like的优化

    SQL使用模糊查询like的优化 SQL使用模糊查询like’%ABC’和like’%ABC%’的优化 &#1…

  • navicat for mysql 15 永久激活码_通用破解码

    navicat for mysql 15 永久激活码_通用破解码,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • IDEA更换主题

    IDEA更换主题更换IDEA主题只需要3步(IDEA14)1.下载主题在主题网站上IDEAColorThemes上浏览喜欢的主题并下载该主题。(如果网址有变更,googleIDEAthemes即可。)2.导入主题在IDEA中导入该主题,具体如下:file–>importsetttings–>选中1中下载的主题jar文件–>一路确认–>重启3.设置主题设置主题:

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号