视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript对象的深复制
2020-11-27 20:23:13 责编:小采
文档
js的数据类型可以分为两大类:

  • 值类型(原始类型):
    比如String、Number类型都是值类型。

  • 引用类型:
    比如Object、Array是引用类型。

  • 简单说一下他们两者的区别:
    最明显的区别就是赋值。值类型的赋值是真正的copy一份赋给新的变量的:

    var a, b = "issax";
    a = b;
    a +="_coder";
    console.log(a); //issax_coder
    console.log(b); //issax

    看上面的例子,将b赋值给a之后,a、b两个变量就是相互的,改变自身的值不会影响到对方,这就是值类型。

    然后看看引用类型:

    var obj_i, obj_ii = { name: 'issax' };
    obj_i = obj_ii;
    obj_i['career'] = 'coder';
    console.log(obj_i); //Object {name: "issax", career: "coder"}
    console.log(obj_ii); //Object {name: "issax", career: "coder"}

    看到没有,将obj_ii的值赋给obj_i后,改变obj_i的内容,会连同obi_ii的内容也改变,这就是引用类型。引用类型的变量存储并不是内容本身,而是指向内容的一个指针,没错,你赋值的时候其实只是将这个指针赋值给了新变量,他们都指向同一个内容,为什么出现上面的情况就不言而喻了。

    握草,我在说什么gui,我是来说对象的深复制的啊[捂脸]

    复制又可以分为浅复制和深复制,看完上面例子,大概联想一下就知道什么是浅复制什么是什么深复制了,
    平常的值类型的赋值过程就是深复制,而引用类型的赋值就是浅复制。

    既然对象是引用类型,那么它平常的赋值过程就是浅复制了,但是啊,有时候对象也是需要深交的,握草,我说了什么gui,是深复制。

    比如,前两天在做Vue,遇到一个需求,要按name来排序,奇数次click就排序,偶数次click就恢复原来的按更新时间排序。这Tm还不简单,每次都sort一下不就好了。真Tm这样做就sb了,尼玛你想一下,除了第一次排序是有意义的,第二三四五六七八……有什么意义,他们都是重复的,每次sort一下不是很浪费性能吗!那么就该将sort后的对象存储起来……
    然后就gg了,对象是引用类型,一开始我直接赋值了,然后场面一度十分尴尬,数据根本不动[捂脸];

    要想属性一个一个的递归复制吗?然后我的对象是类似这样的:


    Paste_Image.png

    握草,真递归复制就sb啦,好在想到个好办法,值类型是深复制的,这Tm将引用类型转成值类型不就o了吗[狂喜]
    小二,上代码:

    function deepCopy(sender){
     var temp = JSON.stringify(sender);
     return JSON.parse(temp);
    } 
    var obj_i, obj_ii = { name: 'issax' };
    obj_i = deepCopy(obj_ii);
    obj_i['career'] = 'coder';
    console.log(obj_i); //Object {name: "issax", career: "coder"}
    console.log(obj_ii); //Object {name: "issax"}


    Paste_Image.png

    下载本文
    显示全文
    专题