JS中的数组浅拷贝与深拷贝的方法和技巧

要拷贝一个数组，不能简单地将旧数组分配给一个新变量，它也是一个数组。如果这样做，它们将共享相同的引用，并且在更改一个变量之后，另一个变量也将受到更改的影响。

那么如何正确的进行数组拷贝呢？介绍几种常用方法

浅拷贝方法（也有网上认为是单层深拷贝）

以下拷贝方法，适合元素为简单的数据结构，元素为复杂结构（比如对象）的时候，更改对象的值，另一个也会跟着变
方法1：Array.slice

var array = [1,2,3,4,5,6];
var arrayNew = array.slice();
arrayNew.push(7); //添加新项

console.log(array);
console.log(arrayNew);

//输出
//[1, 2, 3, 4, 5, 6]
//[1, 2, 3, 4, 5, 6, 7]

方法2：Array.map

var array = [1,2,3,4,5,6];
var arrayNew = array.map(item => item);
arrayNew.push(7); //添加新项

console.log(array);
console.log(arrayNew);

//输出
//[1, 2, 3, 4, 5, 6]
//[1, 2, 3, 4, 5, 6, 7]

方法3：Array.from

var array = [1,2,3,4,5,6];
var arrayNew = Array.from(new Set(array));
arrayNew.push(7); //添加新项

console.log(array);
console.log(arrayNew);

//输出
//[1, 2, 3, 4, 5, 6]
//[1, 2, 3, 4, 5, 6, 7]

方法4：使用扩展运算符

var array = [1,2,3,4,5,6];
var arrayNew = [...array]
arrayNew.push(7); //添加新项

console.log(array);
console.log(arrayNew);

//输出
//[1, 2, 3, 4, 5, 6]
//[1, 2, 3, 4, 5, 6, 7]

方法5：使用解构

var array = [1,2,3,4,5,6];
var [...arrayNew] = array
arrayNew.push(7); //添加新项

console.log(array);
console.log(arrayNew);

//输出
//[1, 2, 3, 4, 5, 6]
//[1, 2, 3, 4, 5, 6, 7]

方法6：使用Array.concat

var array = [1,2,3,4,5,6];
var arrayNew = array
arrayNew.push(7); //添加新项

console.log(array);
console.log(arrayNew);

//输出
//[1, 2, 3, 4, 5, 6]
//[1, 2, 3, 4, 5, 6, 7]

完全深拷贝

方法1：使用JSON序列化

即转换成json再转换成对象实现对象的完全深拷贝

var array = [{'id':1,'name':'jay'},{'id':2,'name':'tom'}];
var arrayNew =JSON.parse(JSON.stringify(array)) 
arrayNew[1].name = 'candy'

console.log(array);
console.log(arrayNew);

//输出
// [{'id':1,'name':'jay'},{'id':2,'name':'tom'}];
// [{'id':1,'name':'jay'},{'id':2,'name':'candy'}];

注：
但是据说这样容易造成数据丢失，如果对象中含有Date, function, undefined, Infinity, RegExp, Map, Set, Blob, FileList, ImageData, sparse Array, Typed Array等复杂对象的话，转化成json再转回来后这些数据都丢失了

更多内容