angularJs中的copy,extend,merge（深拷贝和浅拷贝）

平时做项目应该经常用了拷贝数据，之前文章有详细讲解过深拷贝和浅拷贝的问题，那么在angular的环境中有那么拷贝呢，平时我们用的比较多的会是copy,extend,merge，下面详细讲解下其中的用法和坑！

1 .angular.copy(source，destination)

先看下API:

1. 复制一个对象或者一个数组（好吧，万物皆对象，数组也是一个对象）。
2. 如果省略了destination，一个新的对象或数组将会被创建出来。
3. 如果提供了destination，则source对象中的所有元素和属性都会被复制到destination中。
4. 如果source不是对象或数组（例如是null或undefined）, 则返回source。
5. 如果source和destination类型不一致，则会抛出异常。
6. 先看例子，看完我们再下结论！

var a = {
     "x": 1,
     "y": 10,
     "obj": {
         m: 1
     }
 };
 var clone = angular.copy(a);
 a.obj.m=100;
 console.log(a,clone);

看下图结果：

很明了，angular.copy是深拷贝！当然copy是有第二个参数的，看下面例子：

var a = {
    "x": 1,
    "y": 10,
    "obj": {
        m: 1
    }
};
var b = {
    "q": 2,
    "p": 20,
    "test": {
       "z":1
    }
};
angular.copy(a,b);
console.log(a, b);

看下图结果：

它是会把b对象里面原有的属性全部删除，然后从a对象中复制所有的数据到b里面，然后返回b对象！

var a=null;
var b=undefined;
var c="string";
console.log(angular.copy(a));//null
console.log(angular.copy(b));//undefined
console.log(angular.copy(b,c));//类型不一样 报错

如果source不是对象或数组（null或undefined）, 则返回source。 b和c类型不一致，则会抛出异常。

结论：copy如果接一个参数，如果不是对象或是数组，返回本身，并且这种情况要赋值给外面变量，如果是两个参数，第二个参数的所有属性会被清空，然后再把第一个参数全部属性赋值到第二个参数里面，然后返回第二个参数（不需要赋值给外面变量），如果两个类型不一致会报错！

2 .angular.extend()

这个方法可以接受多个参数！

 var a = {
     "x": 1,
     "y": 10,
     "obj": {
         m: 1
     }
 };

 var b = {
     "q": 2,
     "p": 20,
     "test": {
        "z":1
     }
 };
 angular.extend(a,b);
 b.test.z=100;
 console.log(a);

看下图结果：

从图种看出是把b的属性复制到a里面！并且我改变b里面属性时，a里面的属性也会改变，说明angular.extend是个浅拷贝！

var a = {
    "x": 1,
    "y": 10,
    "test": {
        m: 1
    }
};

var b = {
    "q": 2,
    "p": 20,
    "test": {
        "z": 1
    }
};
angular.extend(a, b);
console.log(a, b);

看下图结果：

注意：如果有相同的key，则后面的直接覆盖前面的！

结论：angular.extend方法是个浅拷贝(是非递归的)！它是依次将第二个参数及后续的参数的第一层属性（不管是简单属性还是对象）拷贝赋给第一个参数的第一层属性，如果是对象，则是引用的是同一个对象，并返回第一个参数对象！注意：如果第一层有相同的对象，后面的会直接覆盖前面的！

3.angular.merge()

merge合并的意思，顾名思义就是多个对象合并到一个对象里！和angular.extend用法类似，但是又有不同之处！

 var a = {
     "x": 1,
     "y": 10,
     "obj": {
         m: 1
     }
 };

 var b = {
     "q": 2,
     "p": 20,
     "test": {
        "z":1
     }
 };
 angular.merge(a,b);
 b.test.z=100;
 console.log(a);

看下图结果：

从图种看出是把b的属性复制到a里面！并且我改变b里面属性时，a里面的属性不会改变，说明angular.merge是个深拷贝！

var a = {
    "x": 1,
    "y": 10,
    "test": {
        "m": 1
    }
};

var b = {
    "q": 2,
    "p": 20,
    "test": {
        "z": 1,
        "o":10,
        "m":100
        
    }
};
angular.merge(a, b);
console.log(a);

看下图结果：

很明显，对象的里面每层都会遍历到，在遇到一个相同的对象时，会将存在与两个对象之间的key值进行合并，如果key值相同(对应的value是个对象)，会接着对key值对应的vlaue里面的key值进行合并，一直遍历到最后一层，如果还有相同的key值，那么后面的才会覆盖前面的！

结论：angular.merge方法是个深拷贝！如果碰到相同的对象，它会遍历对象里面的每一层进行合并，直到最后一层存在相同的key值，则后面的才会覆盖前面的！