js中的深拷贝和浅拷贝

深拷贝和浅拷贝只针对object,Array这样复杂对象的。

简单来说，浅复制只复制一层对象的属性，而深复制则递归复制了所有层级

深浅拷贝的主要区别就是：复制的是引用（地址）还是复制的是实例。

浅拷贝含义：

            对于仅仅是复制了引用（地址），换句话说，复制了之后，原来的变量和新的变量指向同一个东西，彼此之间的操作会相互影响。

深拷贝含义：

           而如果是在堆中重新分配内存，拥有不同的地址，但是值是一样的，复制后的对象与原来对象完全隔离，互不影响。

01 浅拷贝

   有时候我们只是想要备份数组，但是只是简单让它赋给一个变量，改变其中一个，另一个就紧跟着改变，但很多时候，这不是我们想要的。

example:

            var arr = [ 1,2,3,"4" ];

            var arr2 = arr;

            arr2[1] = "test";

            console.log(arr);      //[ 1,"test",2,3,"4" ];

            console.log(arr2);    //[ 1,"test",2,3,"4" ];

02 深拷贝

（1） 数组

对于数组我们可以使用slice()和concat()方法来解决上面的问题

slice

var arr = ['a', 'b', 'c'];
var arrCopy = arr.slice(0);
arrCopy[0] = 'test'
console.log(arr); // ["a", "b", "c"]
console.log(arrCopy); // ["test", "b", "c"]

concat

var arr = ['a', 'b', 'c'];
var arrCopy = arr.concat();
arrCopy[0] = 'test'
console.log(arr); // ["a", "b", "c"]
console.log(arrCopy); // ["test", "b", "c"]

知识点补充：

• arrayObj.slice(start, [end]) 该方法返回一个 Array 对象，其中包含了 arrayObj 的指定部分。不会改变原数组
• arrayObj.concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

(2)  对象

对象的深拷贝实现原理： 定义一个新的对象，遍历源对象的属性 并 赋给新对象的属性

var obj = {
   name:'Hanna Ding',
   age: 22
}

var obj2 = new Object();
obj2.name = obj.name;
obj2.age = obj.age

obj.name = 'xiaoDing';
console.log(obj); //Object {name: "xiaoDing", age: 22}
console.log(obj2); //Object {name: "Hanna Ding", age: 22}

我们就可以封装一个方法 deepCopy来实现对象的深拷贝，代码如下

var obj = {
    name: 'Hanna',
    age: 22
}
var deepCopy = function (source) {
    var result = {};            
    for(var key in source) {                
        if(typeof source[key] === 'object') {
            result[key] = deepCopy(source[key])
        } else {
            result[key] = source[key]
        }
    }            
    return result;
}

var objCopy = deepCopy(obj)
obj.name = 'ding';
console.log(obj);//Object {name: "ding", age: 22}
console.log(objCopy);//Object {name: "Hanna", age: 22}