淺談Object.assign()

Object.assign()方法用於將全部可枚舉屬性的值從一個或多個源對象複製到目標對象。返回值爲目標對象。

• 1 Object.assign 是 ES6 新添加的接口，主要的用途是用來合併多個 JavaScript 的對象。
• 2 Object.assign()接口能夠接收多個參數，第一個參數是目標對象，後面的都是源對象，assign 方法將多個原對象的屬性和方法都合併到了目標對象上面，注意：若是在這個過程當中出現同名的屬性（方法），後合併的屬性（方法）會覆蓋以前的同名屬性（方法）。
• 3 針對深拷貝，須要使用其餘方法，由於 Object.assign()拷貝的是屬性值。假如源對象的屬性值是一個指向對象的引用，它也只拷貝那個引用值。
• 4 Object.assign()它接收的第一個參數（目標）應該是對象，若是不是對象的話，它會在內部轉換成對象，因此若是碰到了 null 或者 undefined 這種不能轉換成對象的值的話，assign 就會報錯。可是若是源對象的參數位置，接收到了沒法轉換爲對象的參數的話，會忽略這個源對象參數。
• 5 一樣，Object.assign 拷貝的屬性是有限制的，只會拷貝對象自己的屬性（不會拷貝繼承屬性），也不會拷貝不可枚舉的屬性。可是屬性名爲 Symbol 值的屬性，是能夠被 Object.assign 拷貝的。
  若是 assign 只接收到了一個對象做爲參數的話，就是說沒有源對象要合併到目標對象上，那會原樣把目標對象返回

const obj = {
  name: "zs",
  age: 18,
  sex: "man"
};
const newObj = Object.assign({ newname: "lisi" }, obj);
console.log(newObj, obj);
// { newname: 'lisi', name: 'zs', age: 18, sex: 'man' } { name: 'zs', age: 18, sex: 'man' }

實例 1

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" }

爲何會出現這個結果呢？首先，第一個參數位置接收到的是對象，因此不會報錯，其次，因爲字符串轉換成對象時，會將字符串中每一個字符做爲一個屬性，因此，abc 三個字符做爲「0」，「1」，「2」三個屬性被合併了進去，可是布爾值和數值在轉換對象時雖然也成功了，可是屬性都是不可枚舉的，因此屬性沒有被成功合併進去。在這裏須要記住「assign 不會合並不可枚舉的屬性」 ##實例 2

注意：

• 1 Object.assign()方法進行的是淺拷貝，若是拷貝過來的屬性值爲對象等複雜數據類型屬性，只能拷貝引用（地址）。因此對象內部的變化，都會隨對象變化而變化。

const obj1 = { a: { b: 1 } };
const newobj1 = Object.assign({}, obj1);
console.log(newobj1.a.b);
console.log(obj1.a.b);

• 2 Object.assign()進行合併的時候，遇到同名屬性，後合併的會出現覆蓋現象
• 3 Object.assign()是針對 Object 開發的 API，源對象的參數接收到了其餘類型的參數，會嘗試類型轉換。數組類型轉換結果是將每一個數組成員的值做爲屬性鍵值，將數組成員在數組中的位置做爲屬性鍵名。多個數組組成參數一同傳入的話還會形成覆蓋。具體例子以下：
  assign 把數組視爲屬性名爲 0、一、2 的對象，所以源數組的 0 號屬性 4 覆蓋了目標數組的 0 號屬性 1。

Object.assign([1, 2, 3], [4, 5]);
// [4, 5, 3]

• 4 Object.assign 只能將屬性值進行復制，若是屬性值是一個 get（取值函數）的話，那麼會先求值，而後再複製。

// 源對象
const source = {
  //屬性是取值函數
  get foo() {
    return 1;
  }
};
//目標對象
const target = {};
Object.assign(target, source);
//{foo ; 1}  此時foo的值是get函數的求值結果