Javascript深淺拷貝

標籤：資料   back   淺拷貝   這不   聲明   數組   方法   bool   基本資料   

Javascript有六種基礎資料型別 (Elementary Data Type)（也就是單一資料型別），它們分別是：Undefined，Null，Boolean，Symbol，Number和String。還含有一種複雜資料類型，就是對象

注意Undefined和Null的區別，Undefined類型只有一個值，就是undefined，Null類型也只有一個值，也就是null
Undefined其實就是已聲明未賦值的變數輸出的結果
null其實就是一個不存在的對象的結果

        var a;        console.log(a)//undefined        console.log(document.getElementById(‘liu‘))//沒有id為liu的節點,輸出null

簡單的資料類型和複雜的資料類型有以下重要的區別

對於單一資料型別

它們值在佔據了記憶體中固定大小的空間，並被儲存在棧記憶體中。當一個變數向另一個變數複製基本類型的值，會建立這個值的一個副本，還有就是不能給基礎資料型別 (Elementary Data Type)的值添加屬性

        var a = 1;        var b = a;        a.attr = ‘liu‘;        console.log(a.attr)//undefined

上面代碼中a就是單一資料型別（Number），b就是a的副本，它們兩者都佔有不同位置但相等的記憶體空間

對於複雜的資料類型

複雜的資料類型即參考型別，它的值是對象，儲存在堆記憶體中，包含參考型別值的變數實際上包含的並不是對象本身，而是一個指向該對象的指標。從一個變數向另一個變數複製參考型別的值，複製的其實是指標，因此兩個變數最終都指向同一個對象。

        var obj = {            name:‘liu‘,            age:0        }        var obj2 = obj;        obj2[‘c‘] = 5;        console.log(obj);//Object {name: "liu", age: 0, c: 5}        console.log(obj2);////Object {name: "liu", age: 0, c: 5}

我們可以看到obj賦值給obj2後，當我們更改其中一個對象的屬性值，兩個對象都發生了改變，究其原因局勢因為obj和obj2這兩個變數都指向同一個指標，賦值只是複製了指標，所以當我們改變其中一個的值就會影響另外一個變數的值

淺拷貝

其實這段代碼就是淺拷貝，有時候我們只是想備份數組，但是只是簡單讓它賦給一個變數，改變其中一個，另外一個就緊跟著改變，但很多時候這不是我們想要的

        var obj = {            name:‘liu‘,            age:0        }        var obj2 = obj;        obj2[‘c‘] = 5;        console.log(obj);//Object {name: "liu", age: 0, c: 5}        console.log(obj2);////Object {name: "liu", age: 0, c: 5}

深拷貝

數組
對於數組我們可以使用slice()和concat()方法來解決上面的問題
slice

        var arr = [‘html‘, ‘css‘, ‘js‘];        var arrCopy = arr.slice(0);        arrCopy[0] = ‘ps‘        console.log(arr)//[‘html‘, ‘css‘, ‘js‘]        console.log(arrCopy)//[‘ps‘, ‘css‘, ‘js‘]

concat

        var arr = [‘html‘, ‘css‘, ‘js‘];        var arrCopy = arr.concat();        arrCopy[0] = ‘ps‘        console.log(arr)//[‘html‘, ‘css‘, ‘js‘]        console.log(arrCopy)//[‘ps‘, ‘css‘, ‘js‘]

對象
對象我們可以定義一個新的對象並遍曆新的屬性上去實現深拷貝

        var obj = {            name:‘liu‘,            age:0        }        var obj2 = new Object();        obj2.name = obj.name;        obj2.age = obj.age        obj.name = ‘hua‘;        console.log(obj);//Object {name: "hua", age: 0}        console.log(obj2);//Object {name: "liu", age: 0}

Javascript深淺拷貝