前端实现浅拷贝和深拷贝的方法

浅拷贝就是指对象复制的时候只复制一层，当源对象的数据改变时，新的对象的数据也会改变

深拷贝是指复制对象的所有层级，当源对象的数据改变时，新的对象的数据不会改变
 

1. JSON.parse(JSON.stringify()) 既可以拷贝数组也可以拷贝对象不可以拷贝函数（深拷贝）

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

2.递归拷贝只支持对象（深拷贝）

function deepCopy(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' ? deepCopy(obj[key]) : obj[key];
    }
  }
  return newObj;
}

3.使用jquery中$.extend(参数为true时为深拷贝否则为浅拷贝)

let arr1 = [[1,1], 2, 3, 4];
let arr2= []
$.extend(true,arr2,arr1)

4.concat和slice拷贝简单数组为深拷贝否则为浅拷贝

//支持
let arr1 = [1, 2, false, 'a']
let arr2 = [].concat(arr1)

let arr3 = [1, 2, 3, 4];
let arr4 = origin.slice()

//不支持
let arr1 = [1, 2, {a:1}, 'a']
let arr2 = [].concat(arr1)

let arr3 = [1, 2, {a:1}, 4];
let arr4 = origin.slice()

5.es6的扩展运算符拷贝第一层的值为深拷贝否则为浅拷贝

//支持
let arr1 = [1,2,3]
let arr2 = [...arr1]

let obj1 = {a:1,b:2}
let obj2 = {...obj1}

//不支持
let arr1 = [1,2,[11,22]]
let arr2 = [...arr1]

let obj1 = {a:1,b:{c:2}}
let obj2 = {...obj1}

6.Object.assign拷贝第一层的值为深拷贝否则为浅拷贝（只能用于对象）

//支持
let obj1 = {a:1,b:2}
let obj2 = {...obj1}

//不支持
let obj1 = {a:1,b:{c:2}}
let obj2 = {...obj1}

7.赋值属于浅拷贝

let obj1 = {a:1,b:2}
let obj2 = obj1