浅复制和深复制对于值类型来说,复制不复制都无所谓的,都是将变量中储存的值类型赋值给另一个变量。
// 值类型的复制 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>