美文网首页前端
有关深浅拷贝

有关深浅拷贝

作者: 陈Bella | 来源:发表于2020-09-25 11:39 被阅读0次

    在说深浅拷贝之前先说一下Objct.assign()的用法

    1.Objct.assign()将源对象的所有枚举属性复制给目标对象,他至少需要两个对象作为参数,第一个参数为目标对象,后面的对象都是源对象。

    let targetObj1 = { a: 1 };
      let sourceObj1 = { b: 1 };
      let sourceObj11 = { c: 3 };
      Object.assign(targetObj1, sourceObj1, sourceObj11);
      console.log(targetObj1);
    
    打印结果如下: 01.png

    2.如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性

    let targetObj1 = { a: 1, b: 2 };
            let sourceObj1 = { b: 1 };
            let sourceObj11 = { c: 3 };
            Object.assign(targetObj1, sourceObj1, sourceObj11);
            console.log(targetObj1);
    
    打印结果如下: 02.png

    3.如果只有一个参数,Object.assign会直接返回该参数。

     let targetObj1 = { a: 4 }
      Object.assign(targetObj1);
      console.log(targetObj1)
    
    打印结果如下: 03.png
    1. 如果该参数不是对象,则会先转成对象,然后返回。(由于undefined和null无法转成对象,所以如果它们作为参数,就会报错。)
    console.log(typeof (Object.assign(2)));
    
    打印结果如下: 04.png

    5.Object.assign可以用来处理数组,但是会把数组视为对象。

    console.log(Object.assign([1, 2, 3], [4, 5]));
    

    结果为[4,5,3],4代替1,5代替2,因为他们对应的位置一致。

    6.Objct.assign()实行的是浅拷贝。如果源对象某个属性的值是对象,目标对象拷贝得到的是这个对象的引用。

    var object1 = { a: { b: 1 } };
      var object2 = Object.assign({}, object1);
      object1.a.b = 2;
      console.log(object2.a.b);
    
    打印结果如下: 05.png

    接下来要将基本类型和引用类型

    1.数据类型分为基本类型和引用类型:

    基本类型:number,string,null,boolean,undifine等。
    引用类型:Obj类型,也可以细分为Array类型,Obj类型,Function类型,Date类型等。

    2.两种数据类型不同的存储方式

    基本类型:
    基本数据类型 保存在 栈内存,形式如下:栈内存中分别存储着变量的标识符以及变量的值。


    即:

    var a  = "A";
    

    在栈内存中是这样的



    引用类型:
    引用类型保存在 堆内存 中, 栈内存存储的是变量的标识符以及对象在堆内存中的存储地址,当需要访问引用类型(如对象,数组等)的值时,首先从栈中获得该对象的地址指针,然后再从对应的堆内存中取得所需的数据。


    即:

    var a = {name:“jack”};
    

    在内存中是这样的

    3.不同类型的复制方式

    基本类型 的复制:当你在复制基本类型的时候,相当于把值也一并复制给了新的变量。

    var a = 1;
    var b = a;
    console.log(a === b);
    var a = 2;
    console.log(a);
    console.log(b);
    
    打印结果如下:

    虽然改变 a 变量的值,但是并不会影响 b 的值。
    内存中是这样的:

    var a = 1;
    
    var b = a;
    
    a = 2;
    

    引用类型 的复制:当你在复制引用类型的时候,实际上只是复制了指向堆内存的地址,即原来的变量与复制的新变量指向了同一个东西。

    var a = {name:"jack",age:20};
    var b = a;
    console.log(a === b);
    a.age = 30;
    console.log(a);
    console.log(b);
    
    打印结果如下:

    改变 a 变量的值,b的值也会改变。
    内存中是这样的:

    var a = {name:"jack",age:20};
    
    var b = a;
    
    a.age = 30;
    

    最后最后要讲的就是深拷贝与浅拷贝

    如果明白了上面的知识,那么就很容易理解深拷贝与浅拷贝。
    那么如何区分深拷贝与浅拷贝呢?假设B复制了A,修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,如果B没变,那就是深拷贝。

    概念

    深拷贝:对于仅仅是复制了地址,复制了之后,原来的变量和新的变量指向同一个东西,彼此之间的操作还是会会互相影响。
    浅拷贝:在堆中重新分配内存,拥有不同的地址,但是值是一样的,复制后的对象与原来的对象是完全隔离,互不影响

    解决办法

    那么,怎么让下面的代码实现深拷贝呢?

    var a = {name:"jack",age:20};
    var b = a;
    console.log(a === b);
    a.age = 30;
    console.log(a);
    console.log(b);
    

    我们可以想象出让 b 在内存中像下图这样,肯定就是深拷贝了。


    方法:1.JOSN 对象中的 stringify 可以把一个 js 对象序列化为一个 JSON 字符串,parse 可以把 JSON 字符串反序列化为一个 js 对象,这两个方法实现的是深拷贝。

    var obj = {name:'xixi',age:20,company : { name : '腾讯', address : '深圳'} };
    var obj_json = JSON.parse(JSON.stringify(obj));
    console.log(obj === obj_json);
    obj.company.name = "ali";
    obj.name = "hei";
    console.log(obj);
    console.log(obj_json);
    
    打印结果如下:

    2.这是一种封装函数的方法,个人觉得没有第一种方法好用。

    相关文章

      网友评论

        本文标题:有关深浅拷贝

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