ES6+ Object.assign()

1. 前言

Object 對(duì)象的更新 把一個(gè)對(duì)象復(fù)制到另一個(gè)對(duì)象，在 ES5 中需要循環(huán)對(duì)象進(jìn)行拷貝

2. 方法詳情

2.1 基本語法

語法使用：

Object.assign(target, ...sources)

參數(shù)解釋：

2.2 拷貝對(duì)象

let target = {};
let source = {a: 1, b: 2, c: 3};
Object.assign(target, source);
target.d = 4;
console.log(target)   // {a: 1, b: 2, c: 3, d: 4}
console.log(source)   // {a: 1, b: 2, c: 3}

上面的代碼可以看出，Object.assign () 的主要用法就是把源對(duì)象拷貝到指定的對(duì)象上去，目標(biāo)對(duì)象的更改不會(huì)影響源對(duì)象。

2.3 合并對(duì)象

let target = {a: 1};
let source1 = {b: 2};
let source2 = {c: 3};
Object.assign(target, source1, source2);
console.log(target);  // {a: 1, b: 2, c: 3}

上面的代碼可以看出，Object.assign () 不會(huì)把目標(biāo)對(duì)象清空，會(huì)合并后面所有的對(duì)象上的值。

2.4 覆蓋前面的值

let target = {a: 1, b: 1};
let source1 = {b: 2, c: 2};
let source2 = {c: 3};
Object.assign(target, source1, source2);
console.log(target);  // {a: 1, b: 2, c: 3}

如果后面的源對(duì)象上有相同的值，后面的源對(duì)象會(huì)覆蓋前面對(duì)象上的值，這一點(diǎn)需要注意。

3. 淺拷貝

Object.assign() 的拷貝屬于淺拷貝，也就是說它只拷貝對(duì)下的第一層的屬性值。如果這個(gè)值是一個(gè)對(duì)象類型，那么 Object.assign() 不會(huì)對(duì)該對(duì)象進(jìn)行深拷貝，也就是說，拷貝后的對(duì)象下的這個(gè)對(duì)象類型是源對(duì)象和拷貝后的對(duì)象共有的，無論誰（源對(duì)象或拷貝后對(duì)象）對(duì)這個(gè)對(duì)象下的值進(jìn)行修改，另一個(gè)對(duì)象（源對(duì)象或拷貝后對(duì)象）也會(huì)共享這個(gè)改變?？聪旅娴睦痈逦谋磉_(dá)：

var target = {};
var source = {a: 1, b: {c: 2, d: 3}};
Object.assign(target, source);
target.a = 5;
target.b.c = 9;
console.log(target)   // {a: 5, b: {c: 9, d: 3}}
console.log(source)   // {a: 1, b: {c: 9, d: 3}}

上面的代碼中，源對(duì)象 source 是個(gè)兩層的字面量對(duì)象，b 也是一個(gè)對(duì)象。使用 Object.assign() 拷貝給目標(biāo)對(duì)象 target，拷貝后對(duì) target 對(duì)象下的值進(jìn)行修改，然后打印目標(biāo)對(duì)象和源對(duì)象。從打印的結(jié)果可以看出，對(duì) target 第一層的 a 進(jìn)行修改時(shí)，源對(duì)象是不會(huì)改變。但是對(duì) target 下的 b 對(duì)象下的值進(jìn)行修改時(shí)，因?yàn)?b 也是一個(gè)對(duì)象，所以源對(duì)象中的值也被修改了。到這里可以看出，Object.assign() 沒有對(duì) b 進(jìn)行拷貝。

如果需要深拷貝則需要，需要遞歸地使用去 Object.assign() 來拷貝對(duì)象。

4. 基本類型的合并

當(dāng)合并的源對(duì)象是基本類型時(shí)，這些基本類型會(huì)作為最后對(duì)象上的值，而鍵則以數(shù)字遞增，其中如果值是 null 和 undefined 時(shí)會(huì)被忽略。看如下實(shí)例：

var s1 = "abc";
var s2 = true;
var s3 = 10;
var s4 = Symbol("foo")
var obj = Object.assign({}, s1, null, s2, undefined, s3, s4);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

5. 拷貝異常時(shí)會(huì)被打斷

在拷貝時(shí)如果發(fā)生異常，則拷貝會(huì)被終止，并報(bào)錯(cuò)，前面已經(jīng)被拷貝的不會(huì)被影響可以繼續(xù)使用，但后面沒有被拷貝的則不能被使用。

var target = Object.defineProperty({}, "a", {
  value: 1,
  writable: false
});
Object.assign(target, {b: 2}, {a: 3}, {c: 4});
// Uncaught TypeError: Cannot assign to read only property 'a' of object '
console.log(target.b);  // 2
console.log(target.c);  // undefined

上面的代碼中，定義了目標(biāo)對(duì)象 target 上的屬性 a 是只讀的，也就是不能不被修改，在合并代碼時(shí)，源對(duì)象上有 a，則報(bào)了 a 是對(duì)象上的只讀屬性不能被 assign 操作。從后面的打印結(jié)果可以看出，b 已經(jīng)被拷貝到目標(biāo)對(duì)象上了可以正常使用，但由于拷貝中發(fā)生異常，最后一個(gè)對(duì)象沒有被拷貝，所以 c 的值是 undefined。

6. 小結(jié)

本章講解了用于合并對(duì)象的方法 Object.assign() 主要有以下幾點(diǎn)需要注意的。

• Object.assign () 屬于淺拷貝；
• 合并對(duì)象時(shí)后面的對(duì)象會(huì)覆蓋前面的對(duì)象；
• 拷貝時(shí)發(fā)生異常，前面已拷貝的不會(huì)受到影響，異常后面的對(duì)象則不會(huì)被拷貝。