JavaScript实现对象深度克隆的两种方法

深度拷贝指的就是把一个对象中的所有属性或方法,一个个的找到,并且在另一个对象中开辟相应的空间,一个一个的存储到另一个对象中。
题目需求:实现对象的深度克隆,对象中还有对象或者数组
举个栗子:

				let obj = {
					a: 0,
					b: {
						b1: 0,
						b2: 3
					},
					c:[1,2,3]
				}

对上面的对象进行深度克隆

第一种方法的思路:使用ES6中的stringfiy方法,先把对象变成字符串类型,然后在把字符串复制给另一个值,最后把字符串通过parse方法变成对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			let obj = {
					a: 0,
					b: {
						b1: 0,
						b2: 3
					},
					c:[1,2,3]
				},
				//先转为字符串后复制
				obj2 = JSON.stringify(obj);
				//再转为对象
				obj2 = JSON.parse(obj2);
				//试着修改obj2里的值
				obj2.c[2] = 0;
				obj2.b.b1 = 3; 
			console.log(typeof obj);
			console.log(obj);
			console.log(typeof obj2);
			console.log(obj2);
		</script>
	</body>
</html>

输出为:
在这里插入图片描述
第二种方法思路:
1.判断被拷贝对象的类型
2.根据类型生成空对象或空数组,其他基本数据类型直接返回即可
3.调用for in方法对被拷贝对象(数组)进行遍历,往新对象(数组)中添加数据,如果是基本数据类型,则直接将其添加到新数组(对象)中,否则深度克隆该数据,这样子进行递归即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function deepCopyObj(oldObj){
				var newObj = {};
				if(oldObj && typeof oldObj == "object"){
					for(let i in oldObj ){
						//判断是为数组,如果不是数组,是对象,就递归
						if( !Array.isArray(oldObj[i]) && typeof oldObj[i]=="object"){
							newObj[i] = deepCopyObj(oldObj[i]);
						}else {
							//如果是数组或者是基本数据类型就直接添加到新对象中
							newObj[i] = oldObj[i];
						}
					}
				}
				return newObj;
			}
			let obj = {
					a: 0,
					b: {
						b1: 0,
						b2: 3
					},
					c:[1,2,3]
				}
				console.log(obj);
			var obj2 = deepCopyObj(obj);
			console.log(typeof obj2);
			console.log(obj2);
		</script>
	</body>
</html>

输出为:
在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 5
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

小0鱼0儿

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值