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

最新推荐文章于 2024-02-18 19:42:47 发布

小0鱼0儿

最新推荐文章于 2024-02-18 19:42:47 发布

阅读量836

点赞数

文章标签：深度克隆深度拷贝 JavaScript 对象 ES6

本文链接：https://blog.csdn.net/weixin_43734339/article/details/100530056

版权

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

				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儿

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现对象深度克隆的两种方法

深度拷贝指的就是把一个对象中的所有属性或方法，一个个的找到，并且在另一个对象中开辟相应的空间，一个一个的存储到另一个对象中。题目需求：实现对象的深度克隆，对象中还有对象或者数组举个栗子： let obj = { a: 0, b: { b1: 0, b2: 3 }, c:[1,2,3] }对上面的对象进行深度克隆...
复制链接

扫一扫