浅拷贝与深拷贝

发表于   |   分类于 ，   |  

       学到js函数的时候翻到前端大神司徒正美的一篇博客，对于数组和函数的深拷贝理解，深受启发。这里做个总结。

深拷贝和浅拷贝的区别

举个例子

1
2
3
4
var a=[1,2,3,4]
 var b=a;
a.pop();
console.log(b);

这是我们平时对于一个数组的浅拷贝，只是单纯复制了a数组中的每个索引，导致如果原来数组a发生变化，拷贝后的数组也会发生变化，这显然不是我想要的。
这样就要需要使用深拷贝
深拷贝和浅拷贝的最大区别莫过于**深拷贝相当于在堆内存中开辟一片新的空间，把源数组或者对象的每个属性都复制过来。而不是只是复制一个存放地址。

1
2
3
4
5
6
7
var a=[1,2,3,4]
 var b=[];
 for(var i=0;i<a.length;i++){
    b[i]=a[i]
 }
a.pop();
console.log(b);

这样一来貌似解决掉了问题，但是如果是这种类型的对象，就需要改进一下。例如：

##Json类型的数组深拷贝。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//json对象类型的；
var a={
    "name":"李瑞"，
    "age":21,
    "like":"computer";
    "other":{
    "where":"china",
    "xixi":"xixi"
    }
}
这时候如果还是单纯用上面的方法就行不通了。
//这里使用到 for in 循环
function copy (arr){
    var new={};
    for(key in arr){
    if(arr[key] instanceof Object){//判断该属性是否是一个对象，
        new[key]=copy(arr[key]);//这里运用到递归思想。
    }else{
        new[key]=arr[key];//如果不是就直接赋值。
    }
    }
    return new;
}
console.log(copy(a));

数组类型的深拷贝

既然就JSON类型的深拷贝。当然也不能少了数组类型的深拷贝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var a=[1,2,3,[1,2,[1,2,3]],4]
function copy (arr){
    var new={};
    for(key in arr){
    if(arr[key] instanceof Array){//判断该属性是否是一个数组，
        new[key]=copy(arr[key]);//这里运用到递归思想。
    }else{
        new[key]=arr[key];//如果不是就直接赋值。
    }
    }
    return new;
}
其实也就是改了一下判断条件。
讲arr[key] instanceof Object改为array
这里提一句:instanceof 相当于typeof的升级版。
typeof只能判断元素类型是否为引用类型，而instanceof则能根据true、false来判断引用类型的具体类型，（如果是基本类型函数用Instanceof 直接返回false）

大杀器，数组类型和Json对象类型组合

这里最后再写个组合一起吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
	var a={
    name:"李瑞",
    age:21,
    like:"computer",
    "other":{
    "where":"china",
    "xixi":[1,2,3,4,5]
    },
    number:[1,2,3,4,5]
    }
  
    function copy(arr){
var a={};//新建一个空对象；
        for(key in arr){
        if(arr[key] instanceof Object){
           a[key]=obj(arr[key]);
        }else if(arr[key] instanceof Array){
            a[key]=array(arr[key]);
        }else{
            a[key]=arr[key];
        }
        }
        return a;
    }
    //Json对象拷贝方法
function obj(arr){
	var a={};
    for(key in arr){
    if(arr[key] instanceof Object){
        a[key]=obj(arr[key]);
    }else{
    a[key]=arr[key];
    }
    }
    return a;
}
//数组的拷贝方法
function array(arr){
	var a=[];
for(key in arr){
    if(arr[key] instanceof Array){
        a[key]=array(arr[key]);
    }else{
    a[key]=arr[key];
    }
    }
    return a;
}
var b=copy(a)
console.log(b);

参考：司徒正美：javascript深拷贝