深浅拷贝js高级

问题：对对象直接复制，且在新的对象更改，不影响原对象？
        答：使用深浅拷贝

---

 

 浅拷贝:拷贝地址

拷贝对象: 展开运算符，Object.assgin()
拷贝数组:concat()，Object.assgin()

 const obj0={uname:'小白',age:20}
 const o ={...obj0}
 o.age=33
 console.log(o);//{uname: '小白', age: 33}
 console.log(obj0);//{uname: '小白', age: 20}

---

 

 深拷贝:

1. 拷贝对象,新的对象更改不影响原对象,通过递归来实现
2. 在普通拷贝直接赋值，如果遇到数组形式，再次调用递归函数
3. 如果遇到对象形式，再次调用递归函数把对象解决,先array后对象

 深拷贝有3种方法：

1.  通过递归来实现深拷贝，return退出递归函数
2.  js库lodash里面cloneDeep内部实现深拷贝
3.  用JSON实现深拷贝

---

 

   //递归函数:在函数内部自己调用自己
          

  function getTime(){
                    document.querySelector('div').innerHTML=new Date().toLocaleString()
                    setTimeout(getTime, 1000);
                }
                getTime()

   //1.通过递归来实现深拷贝，return退出递归函数
       

 const obj={uname:'小欢',age:24,hobby:['跳舞','唱歌'],family:{mother:'pink妈妈'}}
        const nObj={}
        // //拷贝函数
        function DeepCopy(newObj,oldObj) {
            //遍历对象
            for (const k in oldObj) {
            if(oldObj[k] instanceof Array){
                newObj[k] =[]
                // oldObj[k] ['跳舞','唱歌']
                DeepCopy(newObj[k],oldObj[k])
            }else if(oldObj[k] instanceof Object){
                newObj[k] ={}
                DeepCopy(newObj[k],oldObj[k])
            }else{
                  //k 属性名   oldObj[k]属性值
              // newobj[k] ===newobj.uname
              newObj[k]=oldObj[k]
            }
            }
        }
        DeepCopy(nObj,obj)
        console.log(obj);
        nObj.uname ='小英'
        nObj.hobby[0]='民族舞'
        nObj.family.mother='red妈妈'
        console.log(nObj);

        //2.js库lodash里面cloneDeep内部实现深拷贝
        //3.用JSON实现深拷贝
 

    const obj1={uname:'小欢',age:24,hobby:['跳舞','唱歌'],family:{mother:'pink妈妈'}}
        //JSON.parse() JSON字符串转变对象，就是一个新的实例对象o1!==obj1
        const o1 =JSON.parse(JSON.stringify(obj1))
        o1.family.mother='red妈妈'
        console.log(obj1);//{uname:'小欢',age:24,hobby:['跳舞','唱歌'],family:{mother:'pink妈妈'}}
        console.log(o1);//{uname:'小欢',age:24,hobby:['跳舞','唱歌'],family:{mother:'red妈妈'}}