小菜鳥變大笨鳥-數組深拷貝

深拷貝和淺拷貝

首先要知道js的數據存放的位置差別：

淺拷貝就是隻將指向堆區的位置的指針賦值給了新的變量，至關於在棧中多存放了一個指向同一個堆區位置的指針。
深拷貝是直接在堆區中新開闢了一個位置來存放數據，而且在棧中存放的是指向堆區中存放數據的新位置的指針

常見的數組淺拷貝

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

因爲指向的堆區中的位置是同一個，因此當數據發生改變的時候，兩個變量都會發生改變

一維數組深拷貝

js

能夠利用js的concat方法和slice方法來進行數組深拷貝

// slice
    var arr3 = arr1.slice(0, arr1.length);
    console.log(arr3); //[1, 2, 3, 4, 5,6]
    arr3.push(7);
    console.log(arr1);//[1, 2, 3, 4, 5,6]
    console.log(arr3);//[1, 2, 3, 4, 5,6,7]

    // concat
    var arr4 = arr1.concat([]);
    console.log(arr4); //[1, 2, 3, 4, 5,6]
    arr4.push(7);
    console.log(arr1);//[1, 2, 3, 4, 5,6]
    console.log(arr4);//[1, 2, 3, 4, 5,6,7]

jquery

使用jQuery的extend方法

// jquery 數組深拷貝 extend()
    var arr5 = $.extend([], arr1);
    console.log(arr5); //[1, 2, 3, 4, 5,6]
    arr5.push(7);
    console.log(arr5);//[1, 2, 3, 4, 5,6,7]
    console.log(arr1); //[1, 2, 3, 4, 5,6]

二維數組深拷貝

// 二維數組深拷貝
    var arr6 = [[1], [2], [3], [4]];
    var arr7 = [];
    for (let i = 0; i < arr6.length; i++) {
      let itemArr = arr6[i].slice(0, arr6[i].length);
      arr7.push(itemArr);
    }
    console.log(arr7); //[[1], [2], [3], [4]]
    arr7.push([5]);
    console.log(arr7); //[[1], [2], [3], [4],[5]]
    console.log(arr6);//[[1], [2], [3], [4]]

    //多維數組的深拷貝須要藉助循環
    // jQuery 使用extend

多維數組的深拷貝須要藉助循環
jQuery 使用extend