1. 程式人生 > >深拷貝與淺拷貝的區別

深拷貝與淺拷貝的區別

div obj ssg stringify 數據拷貝 += 發生 log 分享圖片

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

深拷貝與淺拷貝的區別