js數組中深拷貝的方法

一、什么是淺拷貝

　　在js當中，我們常常遇到數組復制的的情況，許多人一般都會使用“=”來直接把一個數組賦值給一個變量，如

1 var a=[1,2,3];
2 var b=a;
3 console.log(b);　　//輸出的是1,2,3
4 a[2]=0;
5 console.log(b);　　//輸出的是1,2,0

把數組a用等號“=”的形式復制給變量b，這種就是js數組的淺拷貝。然而，正如上面代碼所示，一旦對數組a做出修改，實際上會影響拷貝出來的其他數組，這並不是我們所想要的結果，因此就必須用到數組的深拷貝來解決這個問題 

二、實現數組的深拷貝的方法

 （1）for循環實現數組的深拷貝

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

（2）concat 方法實現數組的深拷貝

　　concat() 方法用於連接兩個或多個數組。

　　該方法不會改變現有的數組，而僅僅會返回被連接數組的一個副本。

1 var arr1 = [1, 2, 3];
2 var arr2 = arr1.concat();
3 arr1[0] = 4;
4 console.log(arr1); //4, 2, 3
5 console.log(arr2); //1, 2, 3

slice 方法實現數組的深拷貝

　　slice() 方法可從已有的數組中返回選定的元素。

　　arrayObject.slice(start,end)

　　該方法返回一個新的數組，包含從 start 到 end （不包括該元素，數學上來講是左閉右開，即包含左，不含右）的 arrayObject 中的元素。

1 var arr1 = [1, 2, 3];
2 var arr2 = arr1.slice(0);
3 arr1[0] = 4;
4 console.log(arr1); //4, 2, 3
5 console.log(arr2); //1, 2, 3

concat() 和slice() 均是ES5的語法

（4）ES6擴展運算符實現數組的深拷貝

　　...擴展運算符是ES6的語法，使用起來非常的方便簡潔，相信在寫ES6的時候也是備受歡迎的。但是需要注意的是：用擴展運算符對數組或者對象進行拷貝時，只能擴展和深拷貝第一層的值，對於第二層及其以后的值，擴展運算符將不能對其進行打散擴展，也不能對其進行深拷貝，即拷貝后和拷貝前第二層中的對象或者數組仍然引用的是同一個地址，其中一方改變，另一方也跟着改變。

1 var arr1 = [1, 2, 3];
2 var [...arr2] = arr1;
3 arr1[0] = 4;
4 console.log(arr1); //4, 2, 3
5 console.log(arr2); //1, 2, 3