当前位置:   article > 正文

assign深拷贝_Object.assign(拷贝)

object.assign() 深拷贝

Object.assign

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
  1. const target = { a: 1, b: 2 };
  2. const source = { b: 4, c: 5 };
  3. const returnedTarget = Object.assign(target, source);
  4. console.log(target);
  5. // expected output: Object { a: 1, b: 4, c: 5 }
  6. console.log(returnedTarget);
  7. // expected output: Object { a: 1, b: 4, c: 5 }

实例:复制一个对象

  1. const obj = { a: 1 };
  2. const copy = Object.assign({}, obj);
  3. console.log(copy); // { a: 1 }

基本用法

Object.assign方法用于对象的合并,将源对象( source )的所有可枚举属性,复制到目标对象( target )。
  1. var target = { a: 1 };
  2. var source1 = { b: 2 };
  3. var source2 = { c: 3 };
  4. Object.assign(target, source1, source2);
  5. target // {a:1, b:2, c:3}

Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。

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

  1. var target = { a: 1, b: 1 };
  2. var source1 = { b: 2, c: 2 };
  3. var source2 = { c: 3 };
  4. Object.assign(target, source1, source2);
  5. target // {a:1, b:2, c:3}
  • 如果只有一个参数,Object.assign会直接返回该参数。
  1. var obj = {a: 1};
  2. Object.assign(obj) === obj // true
  • 如果该参数不是对象,则会先转成对象,然后返回。
typeof Object.assign(2) // "object"
  • 由于undefined和null无法转成对象,所以如果它们作为参数,就会报错。
  1. Object.assign(undefined) // 报错
  2. Object.assign(null) // 报错

如果非对象参数出现在源对象的位置(即非首参数),那么处理规则有所不同。

首先,这些参数都会转成对象,如果无法转成对象,就会跳过。这意味着,如果undefined和null不在首参数,就不会报错。

  1. let obj = {a: 1};
  2. Object.assign(obj, undefined) === obj // true
  3. Object.assign(obj, null) === obj // true

其他类型的值(即数值、字符串和布尔值)不在首参数,也不会报错。
但是,除了字符串会以数组形式,拷贝入目标对象,其他值都不会产生效果。

  1. var v1 = 'abc';
  2. var v2 = true;
  3. var v3 = 10;
  4. var obj = Object.assign({}, v1, v2, v3);
  5. console.log(obj); // { "0": "a", "1": "b", "2": "c" }

上面代码中,v1、v2、v3分别是字符串、布尔值和数值,结果只有字符串合入目标对象(以字符数组的形式),数值和布尔值都会被忽略。这是因为只有字符串的包装对象,会产生可枚举属性。

  1. Object(true) // {[[PrimitiveValue]]: true}
  2. Object(10) // {[[PrimitiveValue]]: 10}
  3. Object('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}

上面代码中,布尔值、数值、字符串分别转成对应的包装对象,可以看到它们的原始值都在包装对象的内部属性[[PrimitiveValue]]上面,这个属性是不会被Object.assign拷贝的。只有字符串的包装对象,会产生可枚举的实义属性,那些属性则会被拷贝。

Object.assign拷贝的属性是有限制的,只拷贝源对象的自身属性(不拷贝继承属性),也不拷贝不可枚举的属性(enumerable: false)。

  1. Object.assign({b: 'c'},
  2. Object.defineProperty({}, 'invisible', {
  3. enumerable: false,
  4. value: 'hello'
  5. })
  6. )
  7. // { b: 'c' }

上面代码中,Object.assign要拷贝的对象只有一个不可枚举属性invisible,这个属性并没有被拷贝进去。

属性名为 Symbol 值的属性,也会被Object.assign拷贝。

  1. Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
  2. // { a: 'b', Symbol(c): 'd' }

注意点

Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。

  1. var obj1 = {a: {b: 1}};
  2. var obj2 = Object.assign({}, obj1);
  3. obj1.a.b = 2;
  4. obj2.a.b // 2

上面代码中,源对象obj1的a属性的值是一个对象,Object.assign拷贝得到的是这个对象的引用。这个对象的任何变化,都会反映到目标对象上面。

对于这种嵌套的对象,一旦遇到同名属性,Object.assign的处理方法是替换,而不是添加

  1. var target = { a: { b: 'c', d: 'e' } }
  2. var source = { a: { b: 'hello' } }
  3. Object.assign(target, source)
  4. // { a: { b: 'hello' } }
es6 javascript对象方法Object.assign()​blog.csdn.net
e86eb9440a2ee037a525c295393bfd11.png
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/68200
推荐阅读
相关标签
  

闽ICP备14008679号