5、浅拷贝与深拷贝

jasmine_qiqi

已于 2022-04-03 20:04:40 修改

阅读量702

点赞数

文章标签：前端 javascript

于 2022-04-03 14:39:07 首次发布

本文链接：https://blog.csdn.net/weixin_45065754/article/details/123937444

版权

1、总结

浅拷贝和深拷贝都是用于对象拷贝的，区别在于浅拷贝是复制对象地址的，只要数据改变，原对象数据会跟着改变；而深拷贝是复制数据，再新建一个地址，数据改变不会影响原对象的数据，深拷贝有两种方法，一种是JSON转换，另一种是用递归方法复制对象数据，推荐用JSON转换，方便快捷，就是这么简单。

2、浅拷贝

拷贝的是地址，修改拷贝后的数据对原对象有影响

<script>
	/*
	1、浅拷贝：拷贝的是地址，修改拷贝后的数据对原对象有影响
	2、深拷贝：拷贝的是数据，修改拷贝后的数据对原对象没有影响
	*/
	var obj = {
		name: 'jasmine',
		age: 18,
		hobby: ['画画', '唱歌'],
		friend: {
			name: 'qiqi',
			age: 18
		}
	}

	//  3、浅拷贝
	var obj1 = obj;
	obj.name = 'jasmine1';
	console.log(obj);   //  jasmine1
	console.log(obj1);  //  jasmine1



</script>

3、深拷贝

拷贝的是数据，重新创建一个地址，修改拷贝后的数据对原对象没有影响

4、深拷贝有两种方法（JSON和递归）

JSON：

let json = JSON.stringify(obj);
obj1 = JSON.parse(json);

	//  4、深拷贝，有两种拷贝方法
	//  4.1、第一种方法：用json转换
	//  4.2、第二种方法：递归

	var obj = {
		name: 'jasmine',
		age: 18,
		hobby: ['画画', '唱歌'],
		friend: {
			name: 'qiqi',
			age: 18
		}
	}
	//  把对象转为JSON格式的字符串，自动进行深拷贝
	let json = JSON.stringify(obj);
	console.log(json);
	//  再把JSON格式的字符串转为对象
	obj1 = JSON.parse(json);
	obj1.name = "jasmine";
	console.log(obj1);  //  jasmine

递归：

用for循环遍历数据，把数据添加到新的对象中，如果里面有引用类型数据，则要用到递归。
不能直接拷贝地址，要声明一个空数组然后遍历对象数组，把里面的元素添加到新的数组里面
对象也是一样的，创建一个新的对象，然后把对象的数据放到里面即可
相对于递归，用JSON格式转换会方便很多

	//  4.2、第二种方法：递归，把所有的属性添加到新的对象中
	//  如果里面有引用类型数据（数组、对象），
	//  则不能直接拷贝地址，要声明一个空数组然后遍历对象数组，把里面的元素添加到新的数组里面
	//  对象也是一样的，创建一个新的对象，然后把对象的数据放到里面即可
	//  相对于递归，用JSON格式转换会方便很多
	function copy(newObj, obj) {
		for (let i in obj) {
			//  判断是不是数组类型
			if (obj[i] instanceof Array) {
				//  声明一个空数组，然后拷贝数组里面的数组
				newObj[i] = [];
				copy(newObj[i], obj[i]);
				//  判断是不是数组类型
			} else if (obj[i] instanceof Object) {
				//  声明一个空数组，然后拷贝对象里面的数组
				newObj[i] = {};
				copy(newObj[i], obj[i]);
			} else {
				newObj[i] = obj[i];
			}
		}
	}
	obj1 = {};
	copy(obj1, obj);
	obj1.hobby[0] = '插画';
	console.log(obj1);

5、源代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>

</body>
<script>
	/*
	1、浅拷贝：拷贝的是地址，修改拷贝后的数据对原对象有影响
	2、深拷贝：拷贝的是数据，修改拷贝后的数据对原对象没有影响
	*/
	var obj = {
		name: 'jasmine',
		age: 18,
		hobby: ['画画', '唱歌'],
		friend: {
			name: 'qiqi',
			age: 18
		}
	}

	//  3、浅拷贝
	var obj1 = obj;
	obj.name = 'jasmine1';
	console.log('原对象：')
	console.log(obj);   //  jasmine1
	console.log('浅拷贝：')
	console.log(obj1);  //  jasmine1

	//  4、深拷贝，有两种拷贝方法
	//  4.1、第一种方法：用json转换


	//  把对象转为JSON格式的字符串，自动进行深拷贝
	let json = JSON.stringify(obj);
	console.log('转为JSON字符串：')
	console.log(json);
	//  再把JSON格式的字符串转为对象
	obj1 = JSON.parse(json);
	obj1.name = "jasmine";
	console.log('深拷贝(JSON)：')
	console.log(obj1);  //  jasmine


	//  4.2、第二种方法：递归，把所有的属性添加到新的对象中
	//  如果里面有引用类型数据（数组、对象），
	//  则不能直接拷贝地址，要声明一个空数组然后遍历对象数组，把里面的元素添加到新的数组里面
	//  对象也是一样的，创建一个新的对象，然后把对象的数据放到里面即可
	//  相对于递归，用JSON格式转换会方便很多
	function copy(newObj, obj) {
		for (let i in obj) {
			//  判断是不是数组类型
			if (obj[i] instanceof Array) {
				//  声明一个空数组，然后拷贝数组里面的数组
				newObj[i] = [];
				copy(newObj[i], obj[i]);
				//  判断是不是数组类型
			} else if (obj[i] instanceof Object) {
				//  声明一个空数组，然后拷贝对象里面的数组
				newObj[i] = {};
				copy(newObj[i], obj[i]);
			} else {
				newObj[i] = obj[i];
			}
		}
	}
	obj1 = {};
	copy(obj1, obj);
	obj1.hobby[0] = '插画';
	console.log(obj1);

</script>

</html>

jasmine_qiqi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
5、浅拷贝与深拷贝

1、总结浅拷贝和深拷贝都是用于对象拷贝的，区别在于浅拷贝是复制对象地址的，只要数据改变，原对象数据会跟着改变；而深拷贝是复制数据，再新建一个地址，数据改变不会影响原对象的数据，深拷贝有两种方法，一种是JSON转换，另一种是用递归方法复制对象数据，推荐用JSON转换，方便快捷，就是这么简单。2、浅拷贝拷贝的是地址，修改拷贝后的数据对原对象有影响<script> /* 1、浅拷贝：拷贝的是地址，修改拷贝后的数据对原对象有影响 2、深拷贝：拷贝的是数据，修改拷贝后的数据对原对象
复制链接

扫一扫