常用的js数组复制（浅拷贝和深拷贝）

常用的js数组复制（浅拷贝和深拷贝）

在js当中，我们常常遇到数组复制的的情况，许多人一般都会使用“=”来直接把一个数组赋值给一个变量，Array是引用类型，如果只是通过 arrayA = arrayB 简单的赋值，arrayA 和 arrayB 指向的是同一个地址，其实际的值是同一块东西，举个例子

let A = [ 1, 2, 3 ]
let B = A
B[0] = 2   // 此时改变B中a的值
console.log(A)   // [ 2, 2, 3 ]
console.log(B)   // [ 2, 2, 3 ]

此时，A 也跟着改变，我们在实际应用中就容易受影响。这明显不是我们所想要的结果。所以，我们想要的是两个互不影响的数组才对。

情况有两种，深拷贝以及浅拷贝

一、浅拷贝

（适用于数组并不复杂、即数组中没有数组嵌套了对象或者数组的情况）

1.直接解构赋值

let A = [ 1, 2, 3 ]
let B = [ ...A ]

2.Object.assign()

let A = [ 1, 2, 3 ]
let B = Object.assign( [], A );

3.concat()

let A = [ 1, 2, 3 ]
let B = A.concat();

4.slice()

//  arrayObject.slice(start,end)，该方法返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素
let A = [ 1, 2, 3 ]
let B = A.slice(0);

上面四种方式，当数组复杂一些就有点问题了，比如说：

let A = [ { a: 1 }, [ 1, 2 ], 3 ];
let B = A.concat();
A[0].a = 2
B[1][0] = 2
B[2] = 2  // 第一层简单的不会互相影响
console.log(A);    // [ { a: 2 }, [ 2, 2 ], 3 ];
console.log(B);    // [ { a: 2 }, [ 2, 2 ], 2 ];

5.通用方法（数组或对象），遍历对象，把属性和属性值都放在一个新的对象里
（参考：https://blog.csdn.net/qq_37268201/article/details/80448848）

var shallowCopy = function (obj) {
  // 只拷贝对象
  if (typeof obj !== 'object') return;
  // 根据obj的类型判断是新建一个数组还是一个对象
  var newObj = obj instanceof Array ? [] : {};
  // 遍历obj,并且判断是obj的属性才拷贝
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = obj[key];
    }
  }
  return newObj;
}

也就是说数组里更深层的还是会相互影响，所以我们才需要深拷贝

二、深拷贝

1.通过JSON.stringify转化成字符串再通过JSON.parse()解析成原数组

let A = [ { a: 1 }, [ 1, 2 ], 3 ];
let B = JSON.parse( JSON.stringify( A ) );

2.利用jQuery的$.extend方法

let A = [ { a: 1 }, [ 1, 2 ], 3 ];
let B = $.extend( true , [] , A );   //  默认为false，是浅拷贝，true为深拷贝

3.通用方法（数组或对象），拷贝的时候判断属性值的类型，如果是对象，继续递归调用深拷贝函数
（参考：https://blog.csdn.net/qq_37268201/article/details/80448848）

var deepCopy = function(obj) {
  // 只拷贝对象
  if (typeof obj !== 'object') return;
  // 根据obj的类型判断是新建一个数组还是一个对象
  var newObj = obj instanceof Array ? [] : {};
  for (var key in obj) {
    // 遍历obj,并且判断是obj的属性才拷贝
    if (obj.hasOwnProperty(key)) {
      // 判断属性值的类型，如果是对象递归调用深拷贝
      newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
    }
  }
  return newObj;
}

OK，常用的js数组复制就先记录这些