美文网首页关于JS
深拷贝和浅拷贝

深拷贝和浅拷贝

作者: Yixi_Li | 来源:发表于2019-04-25 00:32 被阅读9次

    1. 深拷贝和浅拷贝

    1.浅拷贝: 将原对象或原数组的引用直接赋给新对象,新数组,新对象/数组只是原对象的一个引用

    2.深拷贝: 创建一个新的对象和数组,将原对象的各项属性的“值”(数组的所有元素)拷贝过来,是“值”而不是“引用”

    简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。

    2. 基本数据类型与引用数据类型

    let a=[0,1,2,3,4],
        b=a;
    console.log(a===b);
    a[0]=1;
    console.log(a,b);
    
    image.png

    嗯?明明b复制了a,为啥修改数组a,数组b也跟着变了,这里我不禁陷入了沉思。
    那么这里,就得引入基本数据类型与引用数据类型的概念了。

    面试常问,基本数据类型有哪些,number,string,boolean,null,undefined,symbol以及未来ES10新增的BigInt(任意精度整数)七类。

    引用数据类型(Object类)有常规名值对的无序对象{a:1},数组[1,2,3],以及函数等。

    而这两类数据存储分别是这样的:
    a.基本类型--名值存储在栈内存中,例如let a=1;

    image.png
    当你b=a复制时,栈内存会新开辟一个内存,例如这样:
    image.png
    所以当你此时修改a=2,对b并不会造成影响,因为此时的b已自食其力,翅膀硬了,不受a的影响了。当然,let a=1,b=a;虽然b不受a影响,但这也算不上深拷贝,因为深拷贝本身只针对较为复杂的object类型数据。
    b.引用数据类型--名存在栈内存中,值存在于堆内存中,但是栈内存会提供一个引用的地址指向堆内存中的值,我们以上面浅拷贝的例子画个图: image.png

    当b=a进行拷贝时,其实复制的是a的引用地址,而并非堆里面的值。


    image.png

    而当我们a[0]=1时进行数组修改时,由于a与b指向的是同一个地址,所以自然b也受了影响,这就是所谓的浅拷贝了。


    image.png
    那,要是在堆内存中也开辟一个新的内存专门为b存放值,就像基本类型那样,岂不就达到深拷贝的效果了

    3.为什么要使用深拷贝?

    我们希望在改变新的数组(对象)的时候,不改变原数组(对象)

    4.Object.assign

    很多人认为这个函数是用来深拷贝的。其实并不是,Object.assign 只会拷贝所有的属性值到新的对象中,如果属性值是对象的话,拷贝的是地址,所以并不是深拷贝。

    let a = {
      age: 1
    }
    let b = Object.assign({}, a)
    a.age = 2
    console.log(b.age) // 1
    

    3. ES6展开运算符 ... 来实现浅拷贝

    let a = {
      age: 1
    }
    let b = { ...a }
    a.age = 2
    console.log(b.age) // 1
    

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

    以上两种方法其实解决了第一层的问题,如果接下去的值还有对象的话,两者又会享有相同的问题,所以要实现深拷贝。

    4.JSON.parse(JSON.stringify(object))

    let a = {
      age: 1,
      jobs: {
        first: 'FE'
      }
    }
    let b = JSON.parse(JSON.stringify(a))
    a.jobs.first = 'native'
    console.log(b.jobs.first) // FE
    

    但是该方法也是有局限性的:

    1. 会忽略 undefined
    2. 会忽略 symbol
    3. 不能序列化函数
    4. 不能解决循环引用的对象

    遇到函数、 undefined 或者 symbol 的时候,该对象不能正常的序列化

    let a = {
      age: undefined,
      sex: Symbol('male'),
      jobs: function() {},
      name: 'yck'
    }
    let b = JSON.parse(JSON.stringify(a))
    console.log(b) // {name: "yck"}
    

    你会发现在上述情况中,该方法会忽略掉函数和 undefined 。

    但是在通常情况下,复杂数据都是可以序列化的,所以这个函数可以解决大部分问题。

    5.手动写递归

    var array = [
       { number: 1 },
       { number: 2 },
       { number: 3 }
    ];
    function copy (obj) {
            var newobj = obj.constructor === Array ? [] : {};
            if(typeof obj !== 'object'){
                return;
            }
            for(var i in obj){
               newobj[i] = typeof obj[i] === 'object' ?
               copy(obj[i]) : obj[i];
            }
            return newobj
    }
    var copyArray = copy(array)
    copyArray[0].number = 100;
    console.log(array); //  [{number: 1}, { number: 2 }, { number: 3 }]
    console.log(copyArray); // [{number: 100}, { number: 2 }, { number: 3 }]
    

    6. JQ的extend方法

    $.extend( [deep ], target, object1 [, objectN ] )

    deep表示是否深拷贝,为true为深拷贝,为false,则为浅拷贝

    target Object类型 目标对象,其他对象的成员属性将被附加到该对象上。

    object1 objectN可选。 Object类型 第一个以及第N个被合并的对象。

    let a=[0,1,[2,3],4],
    b=$.extend(true,[],a);
    a[0]=1;
    a[2][0]=1;
    console.log(a,b);
    可以看到,效果与上面方法一样,只是需要依赖JQ库。


    image.png

    相关文章

      网友评论

        本文标题:深拷贝和浅拷贝

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