对象的浅拷贝和深拷贝

引言

由于引用类型地址引用的问题,当我们赋予某个变量一个引用类型的值然后再去使用该变量时,我们可能要特别注意会不会出现某些问题。此时我们可以借助浅拷贝或者深拷贝来解决这些问题。在面试的小伙伴可能也遇到过问关于对象的浅拷贝和深拷贝,下面就由我来带你轻松掌握关于它。

关于值类型和引用类型的赋值

如果对基本数据类型和引用数据类型的地址问题很了解的小伙伴,可以跳过该章节,如果不是很了,解推荐看看该章节,因为它能帮助你更好的理解浅拷贝和深拷贝。

基本值类型的赋值

let a=1
let b=a
b=2

流程图解:a=1后系统创建栈地址ab=a后系统创建栈地址bb=2后系统重新创建栈地址b

在这里插入图片描述

引用值类型的赋值

const obj={a:1,b:2}
const obj1=obj
obj1.a=2
console.log(obj)  // {a:2,b:2}

流程图解: obj={a:1,b:2}后系统创建一个堆地址,然后obj对其进行引用,const obj1=objobj1也对这个堆地址进行引用,obj1.a=2后这个堆地址中的属性a被修改为了2。当我们console.log(obj)时,我们打印的是那个地址中的内容。

在这里插入图片描述

浅拷贝和深拷贝

下面是一个深层次对象,因为浅拷贝和深拷贝只是针对深层次对象而言的。

const user={
    name:"nb",
    age:18,
    sister:{
        name:"hp",
        age:20
    }
}

对象图解:
在这里插入图片描述

浅拷贝

浅拷贝就是,只重新创建某对象的最外层的堆地址,内层的地址继续复用。

const obj={...user}      // 浅拷贝方法一
const obj=Object.assign({},user)    // 浅拷贝方法二

深拷贝

深拷贝就是,把对象的每一层都重新创建一个新的堆地址。
方法一:
优点:操作简单;可以把原型也拷贝。
缺点:当对象的属性存在函数、正则、日期对象时,会出现问题。

const objstr=JSON.stringify(user)
const newUser=JSON.parse(objstr)

方法二:
优点:不会出现任何不好的影响。
缺点:操作复杂。

function deepClone(obj){
	const cloneobj=Array.isArray(obj)?[]:{}    // 拷贝对象就创建对象,拷贝数组就创建数组
	
	for(const[k,v] of Object.entries(obj))
	{
	// 判断属性值是否为引用类型
	if(Array.isArray(v) || Object.prototype.toString.call(v)==='[object Object]')
	// 为引用类型时,递归进一步拷贝
	cloneobj[k]=deepClone(v)
	// 为基本数据类型时直接赋值到新的对象中
	else  cloneobj[k]=v
	}
	return cloneobj
}

const newUser=deepClone(user)

结尾

相信看完这篇文章的小伙伴已经对值类型和引用类型以及浅拷贝和深拷贝有了一个很好的了解。感谢你的观看,希望这篇文章能给你带来快乐。如果有小伙伴有一些问题或者疑惑,欢迎提出和分享。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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://blog.csdn.net/qq_50148250/article/details/127481075)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Js中对象拷贝拷贝](https://blog.csdn.net/xuexizhe88/article/details/80989813)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值