深拷貝與淺拷貝的區別

1、回顧

數據傳遞的方法：

    值傳遞：基本數據類型的數據不會發改變，因為基本數據類型一般存放在棧里面,值傳遞只是將數據拷貝了一份給另一個變量

    引用傳遞：會改變內存中的數據，因為引用類型的數據都存放在堆里面，棧里面存放的是索引，拷貝的時候是拷貝的地址也就是索引

例如：

    值傳遞

    var a = 10;
    var b = a;
    b+=10;
    console.log(a);//10
    console.log(b);//20;


    引用傳遞

    var arr = [10,20,30,40];
    var newArr = arr;
    newArr[0] = 80;
    console.log(arr);//[80,20,30,40]
    console.log(newArr);//[80,20,30,40];

    因為引用數據類型傳遞是保存了內存中的地址，當一個數據發生改變的時候 地址里面的數據也會發送改變

 

2、淺拷貝

淺拷貝：所謂的淺拷貝就是復制一份引用數據類型的地址，當改變了內存中數據的某一個值得話，也會影響到另一個對象

淺拷貝的方式：
   
   淺拷貝1
    var obj = {name:"張三",age:19,sex:"男"}
    var newObj = obj;

    newObj.name="李四";
    console.log(obj);//{name:"李四",age:19,sex:"男"}
    console.log(newObj);//{name:"李四",age:19,sex:"男"}


    淺拷貝2 
        Object.assgin()
        參數1：目標對象
        參數2：任意多個對象

        如果對象是多層的話
        var obj = {data:{a:1,b:2,c:3}};

        var obj1 = Object.assign({},obj);
        obj1.data.a = 10;
        console.log(obj);//{data:{a:10,b:2,c:3}}


    淺拷貝3
        封裝CopyAttr()
        如果對象是多層的話
    function copyAttr(obj){
        var newObj = {};
        for(var key in obj){
            newObj[key] = obj[key];
        }
        return newObj;
    }

    var obj = {data:{a:1,b:2,c:3}};
    var newObj = copyAttr(obj);
    newObj.data.a = 10;
    console.log(obj)//{data:{a:10,b:2,c:3}}


　　淺拷貝4
        $.extend({},obj)
        var obj = {data:{a:1,b:2,c:3}};
        var newObj = $.extend({},obj);
        newObj.data.a = 10;
        console.log(obj);//{a: 10, b: 2, c: 3}
        console.log(newObj);//{a: 10, b: 2, c: 3}

3、深拷貝

深拷貝：所謂的深拷貝就是復制一份引用數據類型的數據，當改變了數據的某一個值得話，不會影響到另一個對象（注意深拷貝是拷貝的數據，而不是索引，淺拷貝拷貝的是索引而不是數據）

深拷貝1
        Object.assign();
        如果對象只有一層的
        var obj = {a:1,b:2,c:3};
        var newObj = Object.assign({},obj);
        newObj.a = 10;
        console.log(obj);//{a: 1, b: 2, c: 3}
        console.log(newObj);//{a: 10, b: 2, c: 3}


深拷貝2
        $.extend(true,{},obj)
        var obj = {a:1,b:2,c:3};
        var newObj = $.extend(true,{},obj);
        newObj.a = 10;
        console.log(obj);//{a: 1, b: 2, c: 3}
        console.log(newObj);//{a: 10, b: 2, c: 3}

深拷貝3
    JSON.stringify()
    var obj = {data:{a:1,b:2,c:3}};
    var newObj = JSON.parse(JSON.stringify(obj));
    newObj.data.a = 10;
    console.log(obj);//{a: 1, b: 2, c: 3}
    console.log(newObj);//{a: 10, b: 2, c: 3}
    缺點:沒有辦法將函數轉換為json