前端必会的深拷贝代码

方法一

思路：根据判断key 来处理

   1.先定义一个变量，需看是传出来是数组还是对像，如果是对像则定义为Object,如果是数组则是Array

    2.先用for in 循环对像获数组

    3.先用hasOwnProperty判断key是否存在

    4.如果key存在判断key的类型是引用数据类型（Object）还是基础数据类型

    5.是引用数据类型（Object）则递归调用，如果是基础数据类型则直接赋值

     function deepClone(source){
        const currentObj=source.constructor === Array ? [] : {}
        for(let keys in source){
            if(source.hasOwnProperty[keys]){
                /*
                 * 对像会有三种情况
                 * obj={
                     nam:'111'
                     age:{id:12,name:'22'},
                     box:['1',2,3]
                   }
                */
                if(source[key] && typeof source[keys] === Object ){
                    //currentObj[keys]=source.constructor === Array ? [] : {} //这句可以不用
                    currentObj[keys]=deepClone(source[keys])
                }else{
                    currentObj[keys]=source[keys]
                }
            }
        }
        return currentObj
     }

    let obj={nam:'111'age:{id:12,name:'22'}, box:['1',2,3] }
    let obj2=deepClone(obj)
        obj2.name='2222'
       console.log(obj,obj2)

方法二

     通过序列化和反序列化进行克隆，当消息包含函数、Symbol等不可序列化的值时，就会报无法克隆的DOM异常

function deepClone(obj) {
  return new Promise(res => {
    const { port1, port2 } = new MessageChannel();
    port1.postMessage(obj);
    port2.onmessage = msg => {
      res(msg.data);
    }
  })
}

方法三

使用JSON格式转换，无法对循环对象进行克隆

//缺点：无法对循环对象进行克隆
function deepClone(obj){
    return JSON.parse(JSON.stringify(obj))
}