【深拷贝VS浅拷贝】
1、回顾
数据传递的方法: 值传递:基本数据类型的数据不会发改变,因为基本数据类型一般存放在栈里面,值传递只是将数据拷贝了一份给另一个变量 引用传递:会改变内存中的数据,因为引用类型的数据都存放在堆里面,栈里面存放的是索引,拷贝的时候是拷贝的地址也就是索引 例如: 值传递 var a = 10; var b = a; b+=10; console.log(a);//10 console.log(b);//20; 引用传递 var arr = [10,20,30,40]; var newArr = arr; newArr[0] = 80; console.log(arr);//[80,20,30,40] console.log(newArr);//[80,20,30,40]; 因为引用数据类型传递是保存了内存中的地址,当一个数据发生改变的时候 地址里面的数据也会发送改变
2、浅拷贝
浅拷贝:所谓的浅拷贝就是复制一份引用数据类型的地址,当改变了内存中数据的某一个值得话,也会影响到另一个对象 浅拷贝的方式: 浅拷贝1 var obj = {name:"张三",age:19,sex:"男"} var newObj = obj; newObj.name="李四"; console.log(obj);//{name:"李四",age:19,sex:"男"} console.log(newObj);//{name:"李四",age:19,sex:"男"} 浅拷贝2 Object.assgin() 参数1:目标对象 参数2:任意多个对象 如果对象是多层的话 var obj = {data:{a:1,b:2,c:3}}; var obj1 = Object.assign({},obj); obj1.data.a = 10; console.log(obj);//{data:{a:10,b:2,c:3}} 浅拷贝3 封装CopyAttr() 如果对象是多层的话 function copyAttr(obj){ var newObj = {}; for(var key in obj){ newObj[key] = obj[key]; } return newObj; } var obj = {data:{a:1,b:2,c:3}}; var newObj = copyAttr(obj); newObj.data.a = 10; console.log(obj)//{data:{a:10,b:2,c:3}} 浅拷贝4 $.extend({},obj) var obj = {data:{a:1,b:2,c:3}}; var newObj = $.extend({},obj); newObj.data.a = 10; console.log(obj);//{a: 10, b: 2, c: 3} console.log(newObj);//{a: 10, b: 2, c: 3}
3、深拷贝
深拷贝:所谓的深拷贝就是复制一份引用数据类型的数据,当改变了数据的某一个值得话,不会影响到另一个对象(注意深拷贝是拷贝的数据,而不是索引,浅拷贝拷贝的是索引而不是数据)
深拷贝1 Object.assign(); 如果对象只有一层的 var obj = {a:1,b:2,c:3}; var newObj = Object.assign({},obj); newObj.a = 10; console.log(obj);//{a: 1, b: 2, c: 3} console.log(newObj);//{a: 10, b: 2, c: 3} 深拷贝2 $.extend(true,{},obj) var obj = {a:1,b:2,c:3}; var newObj = $.extend(true,{},obj); newObj.a = 10; console.log(obj);//{a: 1, b: 2, c: 3} console.log(newObj);//{a: 10, b: 2, c: 3} 深拷贝3 JSON.stringify() var obj = {data:{a:1,b:2,c:3}}; var newObj = JSON.parse(JSON.stringify(obj)); newObj.data.a = 10; console.log(obj);//{a: 1, b: 2, c: 3} console.log(newObj);//{a: 10, b: 2, c: 3} 缺点:没有办法将函数转换为json