前端：深拷贝的多种方法（超全详解）

    别划走 ！走过路过不要错过；错过这个村，我在下一个村等你！坚持每天进步一点点；一天两天可能没发现有效果；但一年365天后你将会感谢今天的自己！！！

   今天博主带大家了解一下前端常用的深拷贝方法：（超全详解）

   我们先举个例子：说说深拷贝的作用是什么？

一、 JSON.parse(JSON.stringify(xxx))

    var p = {
                "id":"007",
                "name":"刘德华",
                "wife":{
                    "id":"008",
                    "name":"刘德的妻子",
                    "address":{
                        "city":"北京",
                        "area":"海淀区"
                    }
                }
    }
        let p1 = JSON.parse(JSON.stringify(p));  // 这是第一种方法
        p1.name ='周星驰';
        console.log(p1.name)  // 周星驰
        console.log(p.name)   // 刘德华

        let p2 = p;
        p2.name ='周星驰';
        console.log(p2.name)  // 周星驰
        console.log(p.name)   // 周星驰

   这里我们就能够很明显的看出如果我们直接用等号赋值的话，我们的源对象里面的属性也会随着我们赋值对象属性改变而改变，这对于我们备份数据来说，这显然是不可取的。

  我们用**JSON.parse(JSON.stringify(xxx))**的话可以实现深拷贝，从而达到我们前端的数据备份，但这个方法使用的时候容易导致一些特殊类型的数据丢失和损坏。

例如：如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象；如果obj里有函数，undefined，则序列化的结果会把函数或 undefined丢失等等。为了能够很好的避免以及面对可能出现的未知可能性，博主带大家拓展一下我们的知识小宝库，所谓学到老；活到老嘛。

二、 **. . .xxx(扩展属性) **用这个方法的时候请注意一下博主写的案例；里面有点点需要注意的地方

    // 如果需要拷贝对象只有一层
    var p = {
                    "id":"007",
                    "name":"刘德华",
                    "wife":'刘德的妻子'
            };
        let p1 ={...p};
        p1.name ='周星驰';
        console.log(p1.name)  // 周星驰
        console.log(p.name)   // 刘德华

    // 如果需要拷贝的对象有两层或者多层
    var p = {
                "id":"007",
                "name":"刘德华",
                "wife":{
                    "id":"008",
                    "name":"刘德的妻子",
                    "address":"北京"
                }
        }
        let p2 ={...p};
        p2.name ='周星驰';
        p2.wife.name='请注意'
        console.log(p2.name,p2.wife.name)  // 周星驰,请注意
        console.log(p.name,p.wife.name)    // 刘德华,请注意

    
        // let p2 = {}
        // for(let key in p){
        //     p2[key] = {...p[key]}
        // }
        // p2.name ='周星驰';
        // p2.wife.name='请注意'
        // console.log(p2.name,p2.wife.name)  // 周星驰,请注意
        // console.log(p.name,p.wife.name)    // 刘德华,刘德的妻子

   ...这个语法是es6的语法糖，如果不是很理解的小伙伴建议百度查询一下学习要与时俱进。案例博主这里只列举了两层，多层的博主这里就没写了，主要目的就是想要大家知道使用这个方法前需要注意的事项，那如果工作中遇到多层的对象拷贝不会了怎么办？别慌往下看，博主会为大家仔细讲解的，等一下看完了博主介绍的其他方法再回来想想，我猜这就不是问题了。

三、Object.assign()

 // 看过方法二的应该知道,这个方法博主也只列举了单层
    var p = {
                "id":"007",
                "name":"刘德华",
                "wife":'刘德的妻子'
        }
        let p3 = {};
        for(let key in p){
          p3 = Object.assign(p3,{[key]:p[key]})
        }
        p3.name ='周星驰';
        p3.wife ='请注意'
        console.log(p3.name,p3.wife)  // 周星驰,请注意
        console.log(p.name,p.wife)    // 刘德华,刘德的妻子

   这个方法博主只简单列举了一下，如果数据类型是单层嵌套的对象可以拿过去直接用，学到这里我们已经知道了3种可以深拷贝的方法了，但为了保证能够扩展大家的知识库，博主这里在列举一些；创作不易，如果觉得还不错的伙伴们给博主一个支持，点点你们手中的小爱心，祝大家每天开开心心！哈哈哈插曲已过，下面我们精彩继续。

四、**$.extend(这个方法需要在 jquery 环境下使用哦)**

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    var p = {
                "id":"007",
                "name":"刘德华",
                "wife":'刘德的妻子'
        }
        let p4 = $.extend(true,{},p)
        p4.name ='周星驰';
        p4.wife ='请注意'
        console.log(p4.name,p4.wife)  // 周星驰,请注意
        console.log(p.name,p.wife)    // 刘德华,刘德的妻子

    方法4我就不做过多的介绍了，下面我们了解一下我们的方法。

五、原生手写拷贝（这里讲到了上面多层对象嵌套的处理方法）

    var p = {
                "id":"007",
                "name":"刘德华",
                "wife":{
                    "id":"008",
                    "name":"刘德的妻子",
                    "address":{
                        "city":"北京",
                        "area":"海淀区"
                    }
                }
        }     
        //写函数
        function copyObj(obj){
            let newObj={};
            for(let key in obj){
                if(typeof obj[key] =='object'){//如:key是wife,引用类型,那就递归
                    newObj[key] = copyObj(obj[key])
                }else{//基本类型,直接赋值
                    newObj[key] = obj[key];
                }
            }
            return newObj;
        }
        let p5 = copyObj(p);
        p5.name = '周星驰';
        p5.wife.name ='朱茵'
        p5.wife.address.city='上海'
        console.log(p5.name,p5.wife.name,p5.wife.address.city) // 周星驰 朱茵 上海
        console.log(p.name,p.wife.name,p.wife.address.city)    // 刘德华 刘德的妻子 北京

 方法五里面的递归方法就是深拷贝重要的实现原理，也是上面多层级嵌套拷贝的重要解决方法，所以其实如果你不是特别喜欢运用简写的话，了解一下方法5的实现逻辑，这样的话下次你对深拷贝的运用就一点问题也没有啦！

  前端还有很多深拷贝的方法，就不一 一列举了；相信如果这几种方法都了解了；深拷贝也不算是问题了；快乐的时光总是短暂的，学海无涯！博主在这里预祝小伙伴们 "长风破浪会有时,直挂云帆济沧海"