JavaScript —— 如何深淺拷貝數組

這兩天遇到了一個問題，如何複製數組，因此就從各個地方找了不少的解決辦法。算是整理一下，這樣以便於本身之後的學習：

目錄

• 淺拷貝數組
• 深拷貝數組
  • 1.使用數組遍歷賦值
    • 原理
    • 代碼實現
  • 2.返回新數組方法
    • 2.1 使用slice方法
      • 原理
      • 代碼實現
    • 2.2 使用數組map方法
    • 2.3 使用concat方法
  • 3.ES6語法實現深拷貝
  • 4.for-in連原型鏈也一併複製的方法
  • 5.多維數組的複製

淺拷貝數組

首先第一個複製數組咱們都想到的是定義一個數組直接相等就能夠了：

var arr1 = [1,2,3];
  var arr2 = arr1;
  arr1[0] = 2;
  console.log(arr1[0]);  //2
複製代碼

出現這個的緣由就是由於，數組是用堆去保存的，棧中保存的是真正存儲數據的內存地址，相等的時候只是拷貝了存放內存地址的棧，兩個棧仍是同時指向了同一個內存地址，因此在改變其中一個的值，其餘的也跟着改變了，這就是所謂的淺拷貝。

因此如何深拷貝一個數組呢？

深拷貝數組

1.使用數組遍歷賦值

原理

這個是最原始的辦法，就是把每一個值取出來到另外一個數組中。

代碼實現

var arr1 = [1,2,3];
  var arr2 = [];
  arr1.forEach(function(value,index){
    arr2[index] = value;
  }) 
  console.log(arr2);
//這個時候改變arr1[0] = 3;那麼輸出arr2[0]仍是等於1

複製代碼

2. 返回新數組方法

2.1 使用slice方法

原理

數組的slice方法是截取數組的意思，在以前的數組總結中也有提過。 slice(0)指的是從0開始到末尾截取數組，而後返回一個新的數組，這樣就不會影響到原來的數組了。

代碼實現

var arr1 = [1,2,3];
  var arr2 = arr1.slice(0);
  console.log(arr2); //[1,2,3]
//這個時候改變arr1[2] = 5,那麼輸出arr2[2]仍是等於3
複製代碼

順着這種方法是否是獲得了思惟的開闊，來看看還有哪些是返回新數組的？

2.2使用數組map方法

使用map方法遍歷數組而後返回新的數組，裏面的值不變

var arr1 = [2,3,4];
  var arr2 = arr1.map(function(value){
    return value;  
  })
  console.log(arr2);  //[2,3,4]
複製代碼

2.3使用concat方法

鏈接數組，若是鏈接的是一個空，那麼也是返回了新的自己的數組

var arr1 = [3,4,5];
  var arr2 = arr1.concat();
  console.log(arr2);   //[3,4,5]
複製代碼

3.ES6語法實現深拷貝

ES6擴展運算符實現數組的深拷貝，目前是最簡單的。

var arr = [1,2,3,4,5];
  var [ ... arr2 ] = arr;
  console.log(arr); //[1,2,3,4,5]
  console.log(arr2); //[1,2,3,4,5]
複製代碼

4.for-in連原型鏈也一併複製的方法

這種辦法，不只複製的值，還會把屬性也進行拷貝。

var arr = [1,2,3,4,5];
arr.prototype = 5;
var arr2 = [];
for(var a in arr){
  arr2[a] = arr[a];
}
console.log(arr2); // [1,2,3,4,5]
console.log(arr2.prototype); // 5
//以前的方法中新數組的prototype都是undefined

複製代碼

5.多維數組的複製

原理

多維數組轉化爲字符串會成爲一維數組。

var arr = [[1,2],3,4,[5,6]];
  var arr1 = arr.toString().split(",")
  var arr2 = arr.join().split(",")
  console.log(arr1) //[1,2,3,4,5,6]
  console.log(arr2) //[1,2,3,4,5,6]
複製代碼

可是怎麼能夠保持那種二維數組的狀態呢？須要下面的代碼

代碼實現

var arr = [[1,2],3,4,[5,6]];
  var arr3 = JSON.parse(JSON.stringify(arr));  
  console.log(arr3) // [[1,2],3,4,[5,6]]
複製代碼

若是你有新的方法歡迎留言？若是我找到新的方法會不按期更新...

©burning_韻七七