js数组的concat是深拷贝？

js数组的concat是深拷贝？

concat介绍

concat方法创建一个新的数组，它由被调用的对象中的元素组成，每个参数的顺序依次是该参数的元素（如果参数是数组）或参数本身（如果参数不是数组）。它不会递归到嵌套数组参数中。

如果数组中都是简单数据类型，可以说是深拷贝

let arr_1 = [1, 2, false, 'a']
let arr_2 = [].concat(arr_1)

arr_1[1] = 3

// arr_1中的数据更改，并不会影响arr_2
console.log(arr_1) // -> [1, 3, false, 'a']
console.log(arr_2) // -> [1, 2, false, 'a']

如果数组中有复杂数据类型，它就出事儿了

let arr_1 = [1, 2, false, {a: 1}]
let arr_2 = [].concat(arr_1)

arr_1[3].a = 2

// arr_1中的数据更改，arr_2中的数据会跟着变
console.log(arr_1) // -> [1, 2, false, {a: 2}]
console.log(arr_2) // -> [1, 2, false, {a: 2}]

结论

concat方法不会改变this或任何作为参数提供的数组，而是返回一个 浅拷贝，它包含与原始数组相结合的相同元素的副本

• 对象引用（而不是实际对象）：concat将对象引用复制到新数组中。 原始数组和新数组都引用相同的对象。 也就是说，如果引用的对象被修改，则更改对于新数组和原始数组都是可见的。 这包括也是数组的数组参数的元素。
• 数据类型如字符串，数字和布尔（不是String，Number 和 Boolean 对象）：concat将字符串和数字的值复制到新数组中。

MDN参考 Array.prototype.concat()

数组中其他相似的方法

• Array.prototype.slice()

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的 浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

let arr_1 = [1, 2, false, {a: 1}]
let arr_2 = arr_1.slice(0)

arr_1[3].a = 2

// arr_1中的数据更改，arr_2中的数据会跟着变
console.log(arr_1) // -> [1, 2, false, {a: 2}]
console.log(arr_2) // -> [1, 2, false, {a: 2}]

• ES6中的扩展运算符

用扩展运算符对数组或者对象进行拷贝时，只能扩展和深拷贝第一层的值，对于第二层极其以后的值，扩展运算符将不能对其进行打散扩展，也不能对其进行深拷贝，即拷贝后和拷贝前第二层中的对象或者数组仍然引用的是同一个地址，其中一方改变，另一方也跟着改变。

let arr_1 = [1, 2, false, {a: 1}]
let arr_2 = [...arr_1]

arr_1[3].a = 2

// arr_1中的数据更改，arr_2中的数据会跟着变
console.log(arr_1) // -> [1, 2, false, {a: 2}]
console.log(arr_2) // -> [1, 2, false, {a: 2}]

拓展两种对象深拷贝的方法

• 暴力深拷贝

let arr_1 = [1, 2, false, {a: 1}]
let arr_2 = JSON.parse(JSON.stringify(arr_1))

不仅可拷贝数组还能拷贝对象（但不能拷贝函数）

let arr_1 = [1, 2, function() {}]
let arr_2 = JSON.parse(JSON.stringify(arr_1))

// 会将函数转成 null
console.log(arr_2) // -> [1, 2, null]

• 递归

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

参考资料

• MDN参考 Array.prototype.concat()
• MDN参考 Array.prototype.slice()
• js简单数据类型和复杂数据类型