美文网首页
深拷贝浅拷贝和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'
});

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

相关文章

  • js 对象拷贝 浅拷贝 深拷贝

    浅拷贝 Object.assign(target, source) 扩展运算符(...) 深拷贝 乞丐版的深拷贝 ...

  • es6(...运算符)

    ...运算符可用于浅拷贝 深拷贝 用Object.assign(obj)实现深拷贝 浅拷贝 当然,我们也可以在浅拷...

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

    javascript中存储对象都是存地址的,所以浅拷贝是都指向同一块内存区块,而深拷贝则是另外开辟了一块区域。下面...

  • 手写深拷贝

    注意:Object.assign()不是深拷贝 语法:Object.assign(target, ...sourc...

  • js 深浅拷贝

    深拷贝 更好的写法: 浅拷贝 浅拷贝,还可以用 Object.assign 、展开运算符 ...

  • 深浅拷贝

    原生的Object.assign(target, src)方法来实现浅拷贝:Object.assign({},ab...

  • ☘️lodash的merge与Object.assgin的区别

    Object.assign() --- 是浅拷贝 lodash的_.merge() --- 是深拷贝 一、Obje...

  • 深拷贝&浅拷贝

    浅拷贝:Object.assign({},obj);解构赋值(...) 深拷贝:递归遍历JSON.parse() ...

  • 2020-11-17

    浅拷贝,深拷贝针对深拷贝,需要使用其他办法,因为 Object.assign()拷贝的是属性值。假如源对象的属性值...

  • js浅拷贝和深拷贝

    1⃣️ 浅拷贝 直接赋值 Object.assign 2⃣️ 深拷贝 JSON.stringify & JSON....

网友评论

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

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