ES6的Object.assign()基本用法

Posted 2021-03-16 z_66

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

  例如：

　　const target = {a:1},

　　const source1 = {b:2}

　　const source2 = {c:3};

Object.assign(target, source1,source2);

　　target   // {a:1,b:2,c:3}

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

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

   例如：

　　const target = {a:1, b:1};

　　const source1 = {b:2,c:2}

　　const source2 = {c:3}

Object.assign(target, source1, source2);

　target   // {a:1,b:2,c:3}

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

　　const obj = {a: 1};
　　Object.assign(obj) === obj // true

如果该参数不是对象，则会先转成对象，然后返回。

typeof Object.assign(2) // "object"

由于undefined和null无法转成对象，所以如果它们作为参数，就会报错。

Object.assign(undefined) // 报错
Object.assign(null) // 报错

如果非对象参数出现在源对象的位置（即非首参数），那么处理规则有所不同。首先，这些参数都会转成对象，如果无法转成对象，就会跳过。这意味着，如果undefined和null不在首参数，就不会报错。

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

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

const v1 = ‘abc‘;
const v2 = true;
const v3 = 10;

const obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

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

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

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

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

Object.assign({b: ‘c‘},
  Object.defineProperty({}, ‘invisible‘, {
    enumerable: false,
    value: ‘hello‘
  })
)
// { b: ‘c‘ }

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

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

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

　　其中关于使用Object.assign()的浅拷贝以及常见用途，见详情：

https://github.com/ruanyf/es6tutorial/blob/14a4724b859ed0f119b58e91f939ffe6dc040c0d/docs/object-methods.md