Object.assign()的使用

阿新 • • 發佈：2020-08-27

一、Object.assign()物件的拷貝

 1 Object.assign() 方法用於將所有可列舉屬性的值從一個或多個源物件複製到目標物件。它將返回目標物件。
 2 Object.assign(target, ...sources)    【target：目標物件】，【souce：源物件（可多個）】
 3 舉個栗子：
 4 const object1 = {
 5   a: 1,
 6   b: 2,
 7   c: 3
 8 };
 9 
10 const object2 = Object.assign({c: 4, d: 5}, object1);
11 
12 console.log(object2.c, object2.d);
 
13 console.log(object1)  // { a: 1, b: 2, c: 3 }
14 console.log(object2)  // { c: 3, d: 5, a: 1, b: 2 }
15 
16 注意：
17 1.如果目標物件中的屬性具有相同的鍵，則屬性將被源物件中的屬性覆蓋。後面的源物件的屬性將類似地覆蓋前面的源物件的屬性
18 2.Object.assign 方法只會拷貝源物件自身的並且可列舉的屬性到目標物件。該方法使用源物件的[[Get]]和目標
19 物件的[[Set]]，所以它會呼叫相關 getter 和 setter。因此，它分配屬性，而不僅僅是複製或定義新的屬性。如
 
20 果合併源包含getter，這可能使其不適合將新屬性合併到原型中。為了將屬性定義（包括其可列舉性）複製到
21 原型，應使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。

二、Object.assign()物件的深拷貝

 1 針對深拷貝，需要使用其他辦法，因為 Object.assign()拷貝的是屬性值。假如源物件的屬性值是一個物件的引用，那麼它也只指向那個引用。
 2 let obj1 = { a: 0 , b: { c: 0}}; 
 3 let obj2 = Object.assign({}, obj1); 
 4 
 console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} 
 5 
 6 obj1.a = 1; 
 7 console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} 
 8 console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} 
 9 
10 obj2.a = 2; 
11 console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} 
12 console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
13  
14 obj2.b.c = 3; 
15 console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} 
16 console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} 
17 最後一次賦值的時候，b是值是物件的引用，只要修改任意一個，其他的也會受影響
18 
19 // Deep Clone （深拷貝）
20 obj1 = { a: 0 , b: { c: 0}}; 
21 let obj3 = JSON.parse(JSON.stringify(obj1)); 
22 obj1.a = 4; 
23 obj1.b.c = 4; 
24 console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}

3、物件的合併

1 const o1 = { a: 1 };
2 const o2 = { b: 2 };
3 const o3 = { c: 3 };
4 
5 const obj = Object.assign(o1, o2, o3);
6 console.log(obj); // { a: 1, b: 2, c: 3 }
7 console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目標物件自身也會改變。
8 其實就是物件的拷貝，o1就是目標物件，後面的是源物件，後面的屬性等會拷貝到目標物件

4、合併具有相同屬性的物件

1 const o1 = { a: 1, b: 1, c: 1 };
2 const o2 = { b: 2, c: 2 };
3 const o3 = { c: 3 };
4 
5 const obj = Object.assign({}, o1, o2, o3);
6 console.log(obj); // { a: 1, b: 2, c: 3 }
7 1.屬性被後續引數中具有相同屬性的其他物件覆蓋。
8 2.目標物件的屬性與源物件的屬性相同，源的會覆蓋目標的屬性

5.繼承屬性和不可列舉屬性是不能拷貝

 1 const obj = Object.create({foo: 1}, { // foo 是個繼承屬性。
 2     bar: {
 3         value: 2  // bar 是個不可列舉屬性。
 4     },
 5     baz: {
 6         value: 3,
 7         enumerable: true  // baz 是個自身可列舉屬性。
 8     }
 9 });
10 建立物件時，如果沒有設定enumerable的值，預設為false（不可列舉屬性），設定為true，則為可列舉屬性
11 const copy = Object.assign({}, obj);
12 console.log(copy); // { baz: 3 }

6.原始型別會被包裝為物件

1 const v1 = "abc";
2 const v2 = true;
3 const v3 = 10;
4 const v4 = Symbol("foo")
5 
6 const obj = Object.assign({}, v1, null, v2, undefined, v3, v4); 
7 // 原始型別會被包裝，null 和 undefined 會被忽略。
8 // 注意，只有字串的包裝物件才可能有自身可列舉屬性。
9 console.log(obj); // { "0": "a", "1": "b", "2": "c" }

7.異常會打斷後續拷貝任務

 1 const target = Object.defineProperty({}, "foo", {
 2     value: 1,
 3     writable: false
 4 }); // target 的 foo 屬性是個只讀屬性。
 5 
 6 Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});
 7 // TypeError: "foo" is read-only
 8 // 注意這個異常是在拷貝第二個源物件的第二個屬性時發生的。
 9 
10 console.log(target.bar);  // 2，說明第一個源物件拷貝成功了。
11 console.log(target.foo2); // 3，說明第二個源物件的第一個屬性也拷貝成功了。
12 console.log(target.foo);  // 1，只讀屬性不能被覆蓋，所以第二個源物件的第二個屬性拷貝失敗了。
13 console.log(target.foo3); // undefined，異常之後 assign 方法就退出了，第三個屬性是不會被拷貝到的。
14 console.log(target.baz);  // undefined，第三個源物件更是不會被拷貝到的。