如何深淺拷貝陣列（總結）

a1burning發表於2018-03-14
陣列

這兩天遇到了一個問題，如何複製陣列，所以就從各個地方找了很多的解決辦法。算是整理一下，這樣以便於自己以後的學習：

[TOC] 目錄

  • 淺拷貝陣列
  • 深拷貝陣列
    • 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_韻七七

相關文章