js 數組的淺拷貝和深拷貝

1.背景介紹

　　javascript分原始類型與引用類型。Array是引用類型，直接用“=”號賦值的話，只是把源數組的地址(或叫指針)賦值給目的數組，指向的是同一個內存地址，其中一個改變另一個也會改變。並沒有實現數組的數據的拷貝。這種方式的實現屬於淺拷貝。

　　深拷貝是開辟新的儲存空間，兩個對象對應兩個不同的地址，修改一個對象的屬性，不會改變另一個對象的屬性。

2.使用方法

數組淺拷貝：

var arr1 = [1, 2, 3, 4];
var arr2 = arr1; 
arr1[0] = 6;                //數組是用堆去保存的，相等的時候只是把存放的地址拷貝過去了，兩個指向了同一個地址，所以在改變其中一個的值，其他的也跟着改變了
console.log(arr2[0]);       //輸出結果為6
console.log(arr1);        //[6, 2, 3, 4]
console.log(arr2);        //[6, 2, 3, 4]

數組深拷貝：

1.JSON.stringify和JSON.parse方法

var arr1 = [1, 2, 3, 4];
var arr2 = JSON.parse(JSON.stringify(arr1)) //先將數組轉為字符串，然后轉成js對象

arr1[0] = 6; 
console.log(arr2[0]);       //輸出結果為1
console.log(arr1);        //[6, 2, 3, 4]
console.log(arr2);        //[1, 2, 3, 4]

2.slice方法

var arr1 = [1, 2, 3, 4];
var arr2 = arr1.slice(0);   //從0開始到末尾截取數組，然后返回一個新的數組
arr1[0] = 6; 
console.log(arr2[0]);       //輸出結果為1
console.log(arr1);        //[6, 2, 3, 4]
console.log(arr2);        //[1, 2, 3, 4]

3.concat方法

var arr1 = [1, 2, 3, 4];
var arr2 = arr1.concat();   //連接數組，如果連接的是一個空，那么也是返回了新的本身的數組
arr1[0] = 6; 
console.log(arr2[0]);       //輸出結果為1
console.log(arr1);        //[6, 2, 3, 4]
console.log(arr2);        //[1, 2, 3, 4]

4.map方法

var arr1 = [1, 2, 3, 4]; 
var arr2 = arr1.map(function(value){
     return value;
})                          //使用map方法遍歷數組然后返回新的數組，里面的值不變
arr1[0] = 6;   
console.log(arr2[0])        //輸出結果為1
console.log(arr1);          //[6, 2, 3, 4]
console.log(arr2);          //[1, 2, 3, 4]

5.ES6語法

var arr1 = [1, 2, 3, 4];
var [ ...arr2 ] = arr1;     //ES6擴展運算符實現數組的深拷貝
arr1[0] = 6; 
console.log(arr2[0]);       //輸出結果為1
console.log(arr1);        //[6, 2, 3, 4]
console.log(arr2);        //[1, 2, 3, 4]

6.用for循環遍歷復制

var arr1 = [1, 2, 3, 4];
var arr2 = [];
for(i=0;i<arr1.length;i++){
　　arr2.push(arr1[i])
}

arr1[0] = 6; 
console.log(arr2[0]);       //輸出結果為1
console.log(arr1);        //[6, 2, 3, 4]
console.log(arr2);        //[1, 2, 3, 4]

 

 

簡單來說，深拷貝主要是將另一個對象的屬性值拷貝過來之后，另一個對象的屬性值並不受到影響，因為此時它自己在堆中開辟了自己的內存區域，不受外界干擾。
淺拷貝主要拷貝的是對象的引用值，當改變對象的值，另一個對象的值也會發生變化。

那具體使用情況該使用淺拷貝還是深拷貝呢，沒有一成不變的規則，一切都取決於具體需求~