js数组深拷贝汇总

1.for 循环实现数组的深拷贝

通过对数组的for循环，即可实现对数组的深拷贝了。
一维数组的深拷贝，二维数组的浅拷贝，即二维数组的第一维仍是深拷贝，但是第二维是浅拷贝

var arr = [1,2,3,4,5]
var arr2 = copyArr(arr)
function copyArr(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
    res.push(arr[i])
    }
    return res
}

2.slice 方法实现数组的深拷贝

将原数组中抽离部分出来形成一个新数组。我们只要设置为抽离全部，即可完成数组的深拷贝。
一维数组的深拷贝，二维数组的浅拷贝，即二维数组的第一维仍是深拷贝，但是第二维是浅拷贝

var arr = [1,2,3,4,5]
var arr2 = arr.slice(0)
arr[2] = 5
console.log(arr)
console.log(arr2)
// 输出arr为  [1, 2, 5, 4, 5]
// 输出arr2为 [1, 2, 3, 4, 5]

3.concat 方法实现数组的深拷贝

用于连接多个数组组成一个新的数组的方法。那么，我们只要连接它自己，即可完成数组的深拷贝。
一维数组的深拷贝，二维数组的浅拷贝，即二维数组的第一维仍是深拷贝，但是第二维是浅拷贝

var arr = [1,2,3,4,5]
var arr2 = arr.concat()
arr[2] = 5
console.log(arr)
console.log(arr2)
// 输出arr为  [1, 2, 5, 4, 5]
// 输出arr2为 [1, 2, 5, 4, 5]

4. 使用Array.from()

一维数组的深拷贝，二维数组的浅拷贝，即二维数组的第一维仍是深拷贝，但是第二维是浅拷贝

const arr1 = [1, 2, 3, 4];
const arr2 = Array.from(arr1);

5.使用Array.map()

一维数组的深拷贝，二维数组的浅拷贝，即二维数组的第一维仍是深拷贝，但是第二维是浅拷贝

const arr1 = [1, 2, 3, 4];
const arr2 = arr1.map(item => item);

6.ES6扩展运算符实现数组的深拷贝

一维数组的深拷贝，二维数组的浅拷贝，即二维数组的第一维仍是深拷贝，但是第二维是浅拷贝

var arr = [1,2,3,4,5]
var [ ...arr2 ] = arr
arr[2] = 5
console.log(arr)
console.log(arr2)
// 输出arr为  [1, 2, 5, 4, 5]
// 输出arr2为 [1, 2, 5, 4, 5]

var arr=[1,2,3];
var arr2=[...arr];
var [arr3,...arr4]=arr;
// arr3=1
// arr4=[2,3]

注意：如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错

var [...arr3,arr4]=arr;   // 报错

7.使用JSON.parse()和JSON.stringify()

即使是多维的数组也是深拷贝

const arr1 = [1, 2, 3, 4];
const arr2 = JSON.parse(JSON.stringify(arr1));

8.拓展

const arr = [1, 2, [3,2,1]];
const arr1 = [4, 5, 6];

const arr2 = arr.concat(arr1);  

//这属于二维上的改变，是浅拷贝，arr会被改变
arr2[2][0]=100;

// 这属于一维上的改变，是深拷贝，arr并不会被改变
arr2[2]={a:1,b:2};