js深复制一个数组

Array是引用类型，如果用arrA=arrB简单的把一个数组赋值，并没有创造出一个新数组，arrA和arrB其实指向的还是同一个地址，改变一个另一个也会随之改变，很明显这并不是我们想要的。
比如：

  let arr = [1, 2, 3];
  let newArr = arr;
  arr.push(4);
  console.log(newArr1);  // [1, 2, 3, 4]
1
2
3
4

若我们改变了一个数组的值，但是另一个数组的值不想发生改变，可以使用以下的方法，注：仅适用于数组的浅复制。数组中元素不包含数组类型和对象类型。

1.使用concat方法：

var arr = [1, 2, 3];
var newArr = arr.concat();
arr.push(4)
console.log(newArr);//[1,2,3]
console.log(arr);//[1,2,3,4]
1
2
3
4
5

2.slice（start,end）方法。(我经常使用这个方法对数组进行复制)
1.从start开始截取到end但是不包括end；
2.返回值为截取的元素集合；

  var arr = [1, 2, 3];
  var newArr = arr.slice();
  arr[0] = 10;
  console.log(arr);// [10, 2, 3]
  console.log(newArr);// [1, 2, 3]
1
2
3
4
5

3.使用扩展运算符

  var arr = [1, 2, 3];
  var [ ...newArr ] = arr;
  arr[0] = 10;
  console.log(arr); // [10, 2, 3]
  console.log(newArr);// [1, 2, 3]
1
2
3
4
5

4.Object.assign()

 var arr = [1, 2, 3];
 var newArr = Object.assign([], arr);
 arr[0] = 10;
 console.log(arr);// [10, 2, 3]
 console.log(newArr);// [1, 2, 3]
1
2
3
4
5

如果数组元素是对象或者数组，上面四种方法就会只拷贝数组或者对象的引用，如果我们对其中一个数组进行修改，另一个数组也会发生变化。比如：

 var arr = [ { a: 1 }, [ 1, 2 ], 3 ];
  let newArr = arr.concat();
  arr[0].a = 2;
  console.log(arr); // [ { a: 2 }, [ 1, 2 ], 3 ]
  console.log(newArr);// [ { a: 2 }, [ 1, 2 ], 3 ] 另一数组的值也会发生改变
1
2
3
4
5

下面是深复制（可以完全拷贝一个数组，即使嵌套了对象或者数组，两者也不会互相影响）
方法一：JSON.parse(JSON.stringify(arr))

  var arr = [ { a: 1 }, [ 1, 2 ], 3 ];
  let newArr = JSON.parse(JSON.stringify(arr));
  arr[0].a = 2;
  console.log(arr); // [ { a: 2 }, [ 1, 2 ], 3 ]
  console.log(newArr);// [ { a: 1 }, [ 1, 2 ], 3 ] 新数组的值不会发生改变
  
1
2
3
4
5
6

但是该方法是有一定的缺陷的，比如：

循环应用的对象
会忽略undefined
不能序列化函数
会忽略symbol

通用方法，若元素是对象或者数组，继续调用深拷贝

 var deepCopy = function(obj) {
    // 判断是否是对象
    if (typeof obj !== 'object') return;
    // 判断obj类型，根据类型新建一个对象或者数组
    var newObj = obj instanceof Array ? [] : {}
    // 遍历对象，进行赋值
    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        let val = obj[key];
        // 判断属性值的类型，如果是对象，递归调用deepCopy
        newObj[key] = typeof val === 'object' ? deepCopy(val) : val
      }
    }
    return newObj
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

或者利用lodash中的深度copy

import cloneDeep from 'lodash/cloneDeep'
let newArr= clobeDeep(arr);
1
2