小猿圈JavaScript深拷贝和浅拷贝

作者: f673630174f6 | 来源:发表于2019-05-06 15:15 被阅读5次

    你会不会在开发项目的过程中遇到这样的问题,经常会拿到一个数据后需要拷贝一份副本出来,而且很多前端框架都是拷贝的,针对以上的问题小猿圈讲师分享给大家JavaScript深拷贝和浅拷贝,希望对于学习中的你,有一定的帮助。

    涉及到了JS中对数据的深浅拷贝问题,所谓深浅拷贝,浅拷贝的意思就是,你只是复制了对象数据的引用,并没有把内存里的值另外复制一份,那么深拷贝就是把值完整地复制一份新的值。操作拷贝之后的数据不会影响到原数据的值拷贝,就是深拷贝,反正,有影响则为浅拷贝。

    一、应用场景

    日常开发中,JS拷贝大多会在数据保存,数据比对,数据同步时出现,所以,当你在这些场景的时候,要记得里面隐藏有一个数据深浅拷贝的问题。

    二、浅拷贝

    functionclone(origin){

    varresult={};

    for(varpropinorigin){

    if(origin.hasOwnProperty(prop)){

    result[prop]=origin[prop];

    }

    }

    returnresult;

    }

    varjay={

    name:"jayChou",

    age:40,

    family:{

    wife:"Quinlivan"

    }

    }

    varotherJay=clone(jay);

    otherJay.age=18;

    otherJay.family.wife="otherGirl";

    console.log(jay);

    //

    //{

    //name:"jayChou",

    //age:40,//没被改变

    //family:{

    //wife:"otherGirl"//同时被改变,说明是同一个引用

    //}

    //}

    console.log(otherJay);

    //

    //{

    //name:"jayChou",

    //age:18,

    //family:{

    //wife:"otherGirl"//被改变了

    //}

    //}

    我们发现,首先,浅拷贝不是直接赋值,浅拷贝新建了一个对象,然后将源对象的属性都一一复制过来,复制的是值,而不是引用。

    我们知道,对象都是按地址引用进行访问的,浅拷贝的复制只复制了第一层的属性,并没有递归将所有的值复制过来,所以,操作拷贝数据,对原数据产生了影响,故而为浅拷贝。进而,那些可以直接返回原数组的方法就可以简单实现数组和对象浅拷贝。

    //1、数组浅拷贝-slice

    functionshallowCopy1(origin){

    returnorigin.slice();

    }

    //2、数组浅拷贝-concat

    functionshallowCopy2(origin){

    returnorigin.concat();

    }

    //3、数组浅拷贝-遍历

    functionshallowCopy3(origin){

    varresult=[];

    for(vari=0;i<origin.length;i++){

    result.push(origin[i]);

    }

    returnresult;

    }

    //4、对象浅拷贝-Object.assign

    functionshallowCopy4(origin){

    returnObject.assign({},origin)

    }

    //5、对象浅拷贝-扩展运算符

    //扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中

    functionshallowCopy5(origin){

    return{

    ...origin

    }

    }

    Object.assign的拷贝,假如源对象的属性值是一个指向对象的引用,它也只拷贝那个引用值。MDN有相应的实例和解释。

    三、深拷贝

    深拷贝就完整复制数据的值(而非引用),目的在于避免拷贝后数据对原数据产生影响。

    //1.深拷贝-JSON正反序列化

    //缺点就是无法拷贝undefined、function、symbol这类特殊的属性值。

    functiondeepClone1(origin){

    returnJSON.parse(JSON.stringify(arr));

    }

    //2.深拷贝-递归;

    functiondeepClone2(origin){

    constresult=origin.constructor===Array?[]:{};

    for(letkeysinorigin){

    //不遍历原型链上的属性

    if(origin.hasOwnProperty(keys)){

    if(origin[keys]&&typeoforigin[keys]==="object"){

    //如果值是对象,就递归一下,区分是一般对象还是数组对象

    result[keys]=origin[keys].constructor===Array?[]:{};

    //如果是引用数据类型,会递归调用

    result[keys]=deepClone(origin[keys]);

    }else{

    //如果不是,就直接赋值

    result[keys]=origin[keys];

    }

    }

    }

    returnresult;

    }

    JS的深拷贝的应用,需要根据你的使用场景进行使用,首先是有无必要深拷贝,其次是数据类型,是否直接使用JSON的API其实就可以。

    经过小猿圈老师的介绍相信很多同学对于JavaScript深拷贝和浅拷贝有了一定的了解,不过大家不要忘记点赞、收藏、转发呦前端自学交流群:820024416,让更多和你一样有同样问题的同学得到帮助,小猿圈为大家提供一个良好的学习平台。

    相关文章

      网友评论

        本文标题:小猿圈JavaScript深拷贝和浅拷贝

        本文链接:https://www.haomeiwen.com/subject/qjzroqtx.html