js在平时的项目中,赋值操作是最多的;比如说:
1 var person1 = { 2 name:"张三", 3 age:18, 4 sex:"male", 5 height:180, 6 weight:14012 } 13 var person2 = person1; 14 console.log(person2) 15 person2.name = "李四"; 16 console.log(person1,person2);
这段代码,console.log 打印出来的结果 person1 和person2的值是一样的。原因就是 person2 person1 都是引用类型;person2的引用地址 和person1的引用地址是一样的;所以改变person2,person1也是跟着person2 一起变化。因为改变的是同一个值。如果不明白的,可以查看https://www.cnblogs.com/lixiuming521125/p/10867062.html
那么问题来了,怎么让 person2 复制 person1的值,并且 person2改变值,不影响 person1 的值???
这里,我们可以重新创建person3,person3是个空对象;person3循环获取person1的值。即:
1 var person3 = {} 2 for(var key in person1){ 3 person3[key] = person1[key] 4 } 5 console.log(person3); 6 person3.name = "王五"; 7 console.log(person3,person1)
这里 person3 的name变成了王五,但是呢 person1的name 还是张三;
这个就是浅拷贝;
但是问题又接着出现了;
这个时候,我把person1修改了一下;增加了一个son对象;并且了,我封装了浅拷贝,把他做成了函数:
1 function clone(origion,target){ 2 var tar = target?target:{}; 3 for(key in origion){ 4 if(origion.hasOwnProperty(key)){ 5 tar[key] = origion[key]; 6 } 7 } 8 return tar; 9 } 10 11 Object.prototype.num = 1; 12 var person1 = { 13 name:"张三", 14 age:18, 15 sex:"male", 16 height:180, 17 weight:140, 18 son:{ 19 first:"lucy", 20 second:"joy", 21 third:"Jhonn" 22 } 23 } 24 25 var person4 = clone(person1);
person4.son.six = "ben" 26 console.log(person4,person1)
这个时候,person4的son 对象 有了这个 ben,但是 person1 的 son 对象也有。这个就是浅拷贝的一个问题,他只能拷贝 对象 数组的 引用值;
这个时候,可以通过深拷贝来解决这个问题;
1 //深拷贝 js原生 2 function deepClone(origion,target){//origion:原始数据 target:目标数据 3 var tar = target||{}; 4 for(key in origion){ 5 if(origion.hasOwnProperty(key)){ 6 if(MyTypeOf(origion[key]) == "Array" ){ 7 tar[key] = []; 8 deepClone(origion[key],tar[key]); 9 }else if(MyTypeOf(origion[key]) == "Object"){ 10 tar[key] = {}; 11 deepClone(origion[key],tar[key]); 12 } 13 tar[key] = origion[key]; 14 15 } 16 } 17 return tar; 18 } 19 var person5 = deepClone(person1) 20 person5.son.fifth = "111111"; 21 console.log(person5,person1)
当然还可以通过 json方式 来实现 深拷贝 JSON.stringify() JSON.parse();
1 var person1 = { 2 name:"张三", 3 age:18, 4 sex:"male", 5 height:180, 6 weight:140, 7 son:{ 8 first:"lucy", 9 second:"joy", 10 third:"Jhonn" 11 } 12 }; 13 14 var str = JSON.stringify(person1)//把 person1转成字符串 15 var json = JSON.parse(str)//把字符串转成 json对象,此时的person1 和 json实现了深拷贝