js浅拷贝以及实现深度克隆对象几种优雅的方法

什么是对象的浅拷贝？
简单的理解就是拷贝了对象的第一层属性，如果对象的某个属性还有第二层，第三层的数据，浅拷贝是访问不到的,修改拷贝后的第二层应用，也会改变到原对象的数据，因为拷贝到的也仅仅是第二层对象所在栈的指针而已

let obj = {
                name:'AAA',
                age:18
            }
            
            // 1,新建新对象，复制原来对象的值
            let obj1 = {
                name:obj.name,
                age:obj.age
            }
            obj1.name = 'BBB'
            // console.log(obj); // AAA
            // console.log(obj1); // BBB
            
            // 2,新建对象，循环添加
            let obj2 = {}
            for(let key in obj){
                obj2[key] = obj[key]
            }
            obj2.name = 'CCC'
            // console.log(obj); // AAA
            // console.log(obj2); // CCC
            
            // 3, Object.assign()
            let obj3 = Object.assign({},obj) // 第一个参数目标对象要加上
            obj3.name = 'DDD'
            console.log(obj); // AAA
            console.log(obj3); // DDD
            
            // 4,点语法展开
            let obj4 = Object.assign({...obj})
            obj4.name = 'EEE'
            console.log(obj); // AAA
            console.log(obj4); // EEE```

深拷贝最简单的是 JSON.parse JSON.stringify，
是由于用到了JSON.stringify()，这也会导致一系列的问题，因为要严格遵守JSON序列化规则：原对象中如果含有Date对象，JSON.stringify()会将其变为字符串，之后并不会将其还原为日期对象。或是含有RegExp对象，JSON.stringify()会将其变为空对象，属性中含有NaN、Infinity和-Infinity，则序列化的结果会变成null，如果属性中有函数,undefined,symbol则经过JSON.stringify()序列化后的JSON字符串中这个键值对会消失，因为不支持。
通常来说，都是递归来实现一个 deepClone

let deepCopy = obj => {
  if (obj&&typeof obj === "object") {
    let newObj=Array.isArray(obj)?[]:{};;
    for (const key in obj) {
      newObj[key] = deepCopy(obj[key]);
    }
    return newObj;
  }
  return obj;
};

MessageChannel

function structuralClone(obj) {
  return new Promise(resolve => {
    const {port1, port2} = new MessageChannel();
    port2.onmessage = ev => resolve(ev.data);
    port1.postMessage(obj);
  });
}
 
const obj = /* ... */;
const clone = await structuralClone(obj);

这里的消息对象 obj接收方就是一个深拷贝对象.这里是一种异步深拷贝，MessageChanne 支持各种浏览器，下面的state则是同步深拷贝的应用

History API

function structuralClone(obj) {
  const oldState = history.state;
  history.replaceState(obj, document.title);
  const copy = history.state;
  history.replaceState(oldState, document.title);
  return copy;
}
 
const obj = /* ... */;
const clone = structuralClone(obj);

这里有个问题就是拷贝不了函数，会报错

这里的 state每次都是一次深拷贝.(safari限制30ms内最多调用100次)