关于数组拷贝方法技术总结

数组是咱们前端经常拿到需要处理的数据，打交道最多的，这里有些常用的业务场景，今天总结一下。希望对大家有帮助。

一、数组的拷贝：
数组拷贝类型分为深拷贝及浅拷贝
浅拷贝是引用地址都是同一个，改了数组之后会影响另一个。
深拷贝就是两个地址，两份独立的数据，互不影响。

浅拷贝：

01.ES6拷贝。（这是一维数组深拷贝，其实也是浅拷贝。但是针对一维数组是深拷贝。一维数组就是数组只有一层，不是多层数组嵌套）
举个例子：
一维数组：[1,2,3,4]
二维数组：[1,2,3,[1,2,3],4]
多维就是不确定的继续嵌套就完事了。懂了吧？
如下代码就是数组拷贝常用方式：简单实用，ES拓展运算符，代码有逼格。但是只是针对一维数组哦。
多层数组嵌套用错了别怪我没提醒啊！

const arr = [1, 2, 3, 4]
let arrCopy = [...arr]
console.log(arrCopy);
arrCopy[0] = 222
console.log(arrCopy);
console.log(arr);

02.数组的方法去拷贝。（一维数组是深拷贝，多维是浅拷贝。和ES6的拓展运算符是一样的）

const arr = [1, 2, 3, 4]
let arrCopy2 = arr.slice()
console.log(arrCopy2);
arrCopy2[0] = 111
console.log(arr);
console.log(arrCopy2);

const arr = [1, 2, 3, 4]
let arrCopy3 = arr.concat()
console.log(arrCopy3);
arrCopy3[0] = 103
console.log(arrCopy3);
console.log(arr);

深拷贝：浅拷贝介绍那么多了，咱整点深拷贝吧。其实工作中遇到的基本上是一维数组，上面也能解决。但是面对有些需求，可能就不行了，需要深拷贝了。

01.JSON.parse（存在局限性）

const arr = [1, 2, 3, 4,[1,2,[1,5,4]]]
let arrCopy04 = JSON.parse(JSON.stringify(arr));
console.log(arrCopy04);
arrCopy04[4] = [1, 1, 1]
console.log(arrCopy04);
console.log(arr);

注意：这个操作基本上满足90%的数组拷贝的需求。但是有部分局限性。数组里有对象，及函数，这个拷贝就出现如下情况。（所以针对这种带函数，带对象的数组是不可取的。）

02.递归来解决深拷贝（这种方法适用于比较复杂的数组，存在对象及函数的嵌套的数组）。大家因实际业务需求选择合适的方法拷贝即可。

const arr = [1, 2, 3, 4, [1, 2, [1, 5, 4, function (a) { console.log(a) }]]];
function copyArr(obj){
    var out = [],
      i = 0,
      len = obj.length;
    for (; i < len; i++) {
      if (obj[i] instanceof Array) {
        out[i] = copyArr(obj[i]);
      } else out[i] = obj[i];
    }
    return out;
  }
var arr05 = copyArr(arr)
console.log(arr05);

数组的拷贝介绍到这里，大家日常开发中肯定是可以用的到的。之后再更新补充日常操作数组的业务场景。希望对大家有帮助！