Object.assign()

Object.assign()方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象分配到目標(biāo)對(duì)象

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// { a: 1, b: 4, c: 5 }

語(yǔ)法

Object.assign(target, ...sources)

參數(shù)

• target

  目標(biāo)對(duì)象。

• sources

  源對(duì)象。

返回值

目標(biāo)對(duì)象。

描述

如果目標(biāo)對(duì)象中的屬性具有相同的鍵，則屬性將被源對(duì)象中的屬性覆蓋。后面的源對(duì)象的屬性將類似地覆蓋前面的源對(duì)象的屬性。

Object.assign 方法只會(huì)拷貝源對(duì)象自身的并且可枚舉的屬性到目標(biāo)對(duì)象。

String類型和 Symbol 類型的屬性都會(huì)被拷貝。

在出現(xiàn)錯(cuò)誤的情況下，例如，如果屬性不可寫，會(huì)引發(fā)TypeError，如果在引發(fā)錯(cuò)誤之前添加了任何屬性，則可以更改target對(duì)象。

注意，Object.assign 不會(huì)在那些source對(duì)象值為 null 或 undefined 的時(shí)候拋出錯(cuò)誤。

深拷貝問(wèn)題

Object.assign()拷貝的是（可枚舉）屬性值。

假如源值是一個(gè)對(duì)象的引用，它僅僅會(huì)復(fù)制其引用值。

const log = console.log;

function test() {
  'use strict';
  let obj1 = { a: 0 , b: { c: 0}};
  let obj2 = Object.assign({}, obj1);
  log(JSON.stringify(obj2));
  // { a: 0, b: { c: 0}}

  obj1.a = 1;
  log(JSON.stringify(obj1));
  // { a: 1, b: { c: 0}}
  log(JSON.stringify(obj2));
  // { a: 0, b: { c: 0}}

  obj2.a = 2;
  log(JSON.stringify(obj1));
  // { a: 1, b: { c: 0}}
  log(JSON.stringify(obj2));
  // { a: 2, b: { c: 0}}

  obj2.b.c = 3;
  log(JSON.stringify(obj1));
  // { a: 1, b: { c: 3}}
  log(JSON.stringify(obj2));
  // { a: 2, b: { c: 3}}

  // Deep Clone
  obj1 = { a: 0 , b: { c: 0}};
  let obj3 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 4;
  obj1.b.c = 4;
  log(JSON.stringify(obj3));
  // { a: 0, b: { c: 0}}
}

test();

合并對(duì)象

const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目標(biāo)對(duì)象自身也會(huì)改變。

合并具有相同屬性的對(duì)象

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

屬性被后續(xù)參數(shù)中具有相同屬性的其他對(duì)象覆蓋。

拷貝symbol類型的屬性

const o1 = { a: 1 };
const o2 = { [Symbol('foo')]: 2 };

const obj = Object.assign({}, o1, o2);
console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox)
Object.getOwnPropertySymbols(obj); // [Symbol(foo)]

繼承屬性和不可枚舉屬性是不能拷貝的

const obj = Object.create({foo: 1}, { // foo 是個(gè)繼承屬性。
    bar: {
        value: 2  // bar 是個(gè)不可枚舉屬性。
    },
    baz: {
        value: 3,
        enumerable: true  // baz 是個(gè)自身可枚舉屬性。
    }
});

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

原始類型會(huì)被包裝為對(duì)象

const v1 = "abc";
const v2 = true;
const v3 = 10;
const v4 = Symbol("foo")

const obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
// 原始類型會(huì)被包裝，null 和 undefined 會(huì)被忽略。
// 注意，只有字符串的包裝對(duì)象才可能有自身可枚舉屬性。
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

異常會(huì)打斷后續(xù)拷貝任務(wù)

const target = Object.defineProperty({}, "foo", {
    value: 1,
    writable: false
}); // target 的 foo 屬性是個(gè)只讀屬性。

Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});
// TypeError: "foo" is read-only
// 注意這個(gè)異常是在拷貝第二個(gè)源對(duì)象的第二個(gè)屬性時(shí)發(fā)生的。

console.log(target.bar);  // 2，說(shuō)明第一個(gè)源對(duì)象拷貝成功了。
console.log(target.foo2); // 3，說(shuō)明第二個(gè)源對(duì)象的第一個(gè)屬性也拷貝成功了。
console.log(target.foo);  // 1，只讀屬性不能被覆蓋，所以第二個(gè)源對(duì)象的第二個(gè)屬性拷貝失敗了。
console.log(target.foo3); // undefined，異常之后 assign 方法就退出了，第三個(gè)屬性是不會(huì)被拷貝到的。
console.log(target.baz);  // undefined，第三個(gè)源對(duì)象更是不會(huì)被拷貝到的。

牛！學(xué)到了！