浅复制和深复制

浅复制和深复制对于值类型来说，复制不复制都无所谓的，都是将变量中储存的值类型赋值给另一个变量。

// 值类型的复制  a、b都是存储了10 的数值
// var a = 10;
// var b = a;

浅复制和深复制都是针对于引用类型来说的

浅复制：从一个对象复制了另一个对象，两个对象的引用地址不相同，但是对象中的属性的引用地址相同。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浅复制和深复制</title>
</head>
<body>
	<script type="text/javascript">
		var obj = {
			a : {},
			b : 1,
			c : []
		}
		// 想要复制obj 是不可以使用等号去复制的 因为此时仅仅改变变量的引用
		// var obj1 = obj; //不可以这么复制 因为全等
		// console.log(obj1 === obj); //true

		// 浅复制和深复制是针对引用类型来说的
		// 浅复制
		// 想要浅复制obj 相当于定义一个新的变量 并且让它引用一个新的对象
		var obj1 = {};	
		for(var i in obj) {//使用for in循环挨个将obj的属性给obj1
			obj1[i] = obj[i];
		}
		console.log(obj1 === obj);//false
		console.log(obj1.a === obj.a);//true
		console.log(obj1.b === obj.b);//true
		console.log(obj1.c === obj.c);//true

	</script>
</body>
</html>

深复制：从一个对象复制了另一个对象，两个对象的引用地址不相同，对象中的属性的引用地址也不相同。

对于ES6之前还没有深复制的方法，Object.assign( )也无法进行深复制，jQuery中extend方法可以进行深复制，ES6也推出了深复制方法。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浅复制和深复制</title>
</head>
<body>
	<script type="text/javascript" src="js/underscore.js"></script>
	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		var obj = {
			a : {},
			b : 1,
			c : []
		}
		// 想要复制obj 是不可以使用等号去复制的 因为此时仅仅改变变量的引用
		// var obj1 = obj; //不可以这么复制 因为全等
		// console.log(obj1 === obj); //true

		// 浅复制和深复制是针对引用类型来说的
		// 浅复制
		// 想要浅复制obj 相当于定义一个新的变量 并且让它引用一个新的对象
		// var obj1 = {};	
		// for(var i in obj) {//使用for in循环挨个将obj的属性给obj1
		// 	obj1[i] = obj[i];
		// }
		// console.log(obj1 === obj);//false
		// console.log(obj1.a === obj.a);//true
		// console.log(obj1.b === obj.b);//true
		// console.log(obj1.c === obj.c);//true

		// Object.assign也是浅复制
		// var obj1 = Object.assign(obj);
		// console.log(obj1);
		// console.log(obj1 === obj);//true
		// console.log(obj1.a === obj.a);//true
		// console.log(obj1.b === obj.b);//true
		// console.log(obj1.c === obj.c);//true

		//深复制
		// var obj1 = $.extend(true, obj);
		// console.log(obj1);
		// console.log(obj1 === obj);//false
		// console.log(obj1.a === obj.a);//false
		// console.log(obj1.b === obj.b);//true
		// console.log(obj1.c === obj.c);//false
		
	</script>
</body>
</html>

浅复制 和 深复制

猜你喜欢