天天看点

js 中的 深拷贝与浅拷贝

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的值是一样的。原因就是 person2 person1 都是引用类型;person2的引用地址 和person1的引用地址是一样的;所以改变person2,person1也是跟着person2 一起变化。因为改变的是同一个值。如果不明白的​

那么问题来了,怎么让 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      

这里 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      

这个时候,person4的son 对象 有了这个 ben,但是 person1 的 son 对象也有。这个就是浅拷贝的一个问题,他只能拷贝 对象 数组的 引用值;

这个时候,可以通过深拷贝来解决这个问题;

1 //深拷贝 js原生
 2  functionorigion:原始数据  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      

当然还可以通过 json方式 来实现 深拷贝 JSON.stringify()

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实现了深拷贝