js 深度拷贝、浅度拷贝

原创于 2023-07-22 18:15:38 发布 · 455 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #深度拷贝 #浅度拷贝 #es6

javascript 专栏收录该内容

43 篇文章

订阅专栏

本文通过JavaScript代码示例展示了对象和对象集合的浅拷贝与深拷贝的区别。直接赋值会导致两个变量指向同一内存空间，修改原对象会同步修改赋值后的对象。浅拷贝仅复制第一层属性，深层属性仍共享内存。而深拷贝通过JSON序列化实现，能创建完全独立的新对象，修改原对象不会影响深拷贝的对象。

1）对象深度拷贝、浅度拷贝代码：

<!DOCTYPE html>
<html ng-app="my_app">
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 原始对象
			let originalObj={id:1,name: "张三", others: {age:28,address:'苏州'}};
			// 直接赋值
			let obj=originalObj;
			// 浅度复制
			let shallowCopyObj = { ...originalObj };
			// 深度复制
			let deepCopyObj=JSON.parse(JSON.stringify(originalObj));
			// 修改原始对象
			originalObj.name='李四';
			originalObj.others.age=30;
			console.log('originalObj',originalObj);
			console.log('obj',obj);
			console.log('shallowCopyObj',shallowCopyObj);
			console.log('deepCopyObj',deepCopyObj);
		</script>
	</head>
	<body>
	</body>
</html>

2）个人小结

a）直接赋值对象，两个数据指向同一个内存空间，原数据修改，直接赋值数据修改；

b）浅度复制对象，只拷贝了第一层数据，其他层数据和原数据指向同一个内存空间，原数据修改，第一层数据（name）不修改，第二层（age）数据修改；

c）深度复制对象，拷贝所有层数据，原数据修改，深度复制对象不修改；

3）对象集合深度拷贝、浅度拷贝代码（结论和对象一直）：

<!DOCTYPE html>
<html ng-app="my_app">
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 原始对象集合
			let originalList=[
				{id:1,name: "张三", others: {age:28,address:'苏州'}},
				{id:2,name: "李白", others: {age:18,address:'浙江'}}
			];
			// 直接赋值
			let list=originalList;
			// 浅度复制
			let shallowCopyList = originalList.map(item => ({ ...item }));
			// 深度复制
			let deepCopyList=JSON.parse(JSON.stringify(originalList));
			// 修改原始对象集合
			originalList[0].name='李四';
			originalList[0].others.age=30;
			console.log('originalList',originalList);
			console.log('list',list);
			console.log('shallowCopyList',shallowCopyList);
			console.log('deepCopyList',deepCopyList);
		</script>
	</head>
	<body>
	</body>
</html>