小菜鸟变大笨鸟-数组深拷贝

深拷贝和浅拷贝

首先要知道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