美文网首页
JavaScript深克隆与浅克隆

JavaScript深克隆与浅克隆

作者: LeeYaMaster | 来源:发表于2019-01-11 17:57 被阅读12次

    在JavaScript高级编程那本书中,(就是那本封面小男孩拿着望远镜,总共一千多页那本书),有一章节便讲到了这里。那么什么是深克隆与浅克隆呢?我们来看下面的示例代码:

               var a = {
                    name: "zhangsan",
                    age: 18
                };
                var b = a;
                b.name = "lisi";
                console.log(a); //{age:18,name:"lisi"}
                console.log(b); //{age:18,name:"lisi"}
    

    定义一个对象a,赋值两个属性,接着让b=a,赋值过去。然后修改b的属性,但是却发现,我们console.log(a和b),只修改了b的值,却把a的值也修改了。这是为什么呢?那是因为b=a,a是一个对象,对象的赋值,是赋值对象在内存中的引用,也就是说,b=a之后,b和a都指向同一个内存地址,这也就是为什么修改一个,而另外一个也会修改的原因,


    内存指向

    为了避免这个问题,那么我们就要把它的值全部拿出来,通过循环的方式,这里可以用递归。值全部拿出来后,再赋值,就可以达到效果了,不过注意,采用这种方式比较耗内存。

                function deepClone(arr) {
                    if(typeof arr != "object") {
                        return arr;
                    }
                    var result = {};
                    for(var i in arr) {
                        result[i] = deepClone(arr[i]);
                    }
                    return result;
                }
                var e = {
                    name: "zhangsan",
                    age: 18
                };
                var f = deepClone(e);
                f.name = "lisi";
                console.log(e); //{age:18,name:"zhangsan"}
                console.log(f); //{age:18,name:"lisi"}
    

    这里f=e,把e赋值到f里面去,因为是深克隆,把所有的值都拿出来了。所以赋值过去的是值,而不是引用的地址。所以修改f并不会影响到e。

    相关文章

      网友评论

          本文标题:JavaScript深克隆与浅克隆

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