js自己封装万能拷贝(深/浅拷贝)方法

一、什么是深拷贝？什么是浅拷贝？

浅拷贝只复制一层对象的属性，浅拷贝出来的对象如果改变了第二层或更深的数据会影响原对象。而深拷贝则递归复制了所有层级，改变任何数据都不会影响原对象

二、深拷贝和浅拷贝的方法和存在的问题

1.JSON.parse(JSON.stringfy())

正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，即那些能够被 json 直接表示的数据结构。

jQuery的$.extend() 第三方库实现深拷贝

没有处理循环引用的问题。
项目中如果没有使用jQuery而为了实现拷贝引用一个库是不值当的

var objA = {};

var objB = {};

objA.b = objB;

objB.a = objA;

$.extend(true,{},a);

//这个时候就出现异常了

//Uncaught RangeError: Maximum call stack size exceeded(…)

3.Object.assign() 和 b = {...a, ...{}}

浅拷贝，只适用于对象。
只实现了第一层级的拷贝，如果有嵌套对象还是只复制了内存地址

4.b = [].concat(a) ，b = [...a, ...[]] ， b = a.slice()

浅拷贝，只适用于数组。
只实现了第一层级的拷贝，如果有嵌套对象或者二维数组还是只复制了内存地址

三、万能拷贝法

function deepClone(obj){
  if(obj===null) return null
  let objClone =  Array.isArray(obj) ? [] : {};
  if (obj && typeof obj === 'object') {
    for(let key in obj){
      if (obj[key] && typeof obj[key] === 'object'){
        objClone[key] = deepClone(obj[key]);
      }else{
        objClone[key] = obj[key]
      }
    }
  }
  return objClone;
}