美文网首页
深拷贝浅拷贝和Object.assign(target, ...

深拷贝浅拷贝和Object.assign(target, ...

作者: Allan要做活神仙 | 来源:发表于2017-05-20 20:36 被阅读885次

    javascript中存储对象都是存地址的,所以浅拷贝是都指向同一块内存区块,而深拷贝则是另外开辟了一块区域。下面实例也可以看出这一点:

    // 浅拷贝
    const a = {t: 1, p: 'gg'};
    const b = a;
    b.t = 3;
    console.log(a); // {t: 3, p: 'gg'}
    console.log(b); // {t: 3, p: 'gg'}
    
    //深拷贝
    const c = {t: 1, p: 'gg'};
    const d = deepCopy(c);
    d.t = 3;
    console.log(c); // {t: 1, p: 'gg'}
    console.log(d); // {t: 3, p: 'gg'}
    

    可以明显看出,浅拷贝在改变其中一个值时,会导致其他也一起改变,而深拷贝不会。

    Object.assign() ————深拷贝神器!

    // Cloning an object
    var obj = { a: 1 };
    var copy = Object.assign({}, obj);
    console.log(copy); // { a: 1 }
    
    // Merging objects
    var o1 = { a: 1 };
    var o2 = { b: 2 };
    var o3 = { c: 3 };
    
    var obj = Object.assign(o1, o2, o3);
    console.log(obj); // { a: 1, b: 2, c: 3 }
    console.log(o1);  // { a: 1, b: 2, c: 3 }, target object itself is changed.
    

    是不是很完美,又可以clone又可以merge。在我这种情况下,我觉得我的代码量又可以减少了,比如:

    const defaultOpt = {
        title: 'hello', 
        name: 'oo', 
        type: 'line'
    };
    // 原来可能需要这样
    const opt1 = deepCopy(a);
    opt1.title = 'opt1';
    opt1.type = 'bar';
    opt1.extra = 'extra'; // 额外增加配置
    // 现在只要这样
    const opt2 = Object.assign({}, a, {
        title: 'opt2', 
        type: 'bar', 
        extra: 'extra'
    });
    

    注:它只对顶层属性做了赋值,完全没有继续做递归之类的把所有下一层的属性做深拷贝。

    相关文章

      网友评论

          本文标题:深拷贝浅拷贝和Object.assign(target, ...

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