Object.assign詳解

一、Object.assign是什麼？

首先了解下Object.assign()是什麼。我們先看看ES6官方文件是怎麼介紹的？

Object.assign() 方法用於將所有可列舉屬性的值從一個或多個源物件複製到目標物件。它將返回目標物件。

簡單來說，就是Object.assign()是物件的靜態方法，可以用來複制物件的可列舉屬性到目標物件，利用這個特性可以實現物件屬性的合併。

二、用法：

Object.assign(target, ...sources)

引數：target--->目標物件

source--->源物件

返回值：target，即目標物件

三、使用示例：

1、目標物件和源物件無重名屬性

var target={name:'guxin',age:18};
var source={state:'single'}
var result=Object.assign(target,source);
console.log(target,target==result);
結果如圖：

我們可以看到source上的state屬性合併到了target物件上。如果只是想將兩個或多個物件的屬性合併到一起，不改變原有物件的屬性，可以用一個空的物件作為target物件。像下面這樣：

var result=Object.assign({},target,source);
2、目標物件和源物件有重名屬性

上面的示例目標物件和源物件是沒有重名屬性的，那麼如果他們有重名屬性又會怎樣呢？是後面的屬性覆蓋前面的還是前面的屬性覆蓋後面的呢？我們接下來看下一個例子：

var target={name:'guxin',age:18}
var source={state:'signle',age:22}
var result=Object.assign(target,source)
console.log(target)
我們來看下執行結果：

可以看到如果有同名屬性的話，後面的屬性值會覆蓋前面的屬性值。

3、有多個源物件

前面的示例都是隻有一個源物件，那麼如果有多個源物件情況會不會不同呢？我們繼續看下面的例子：

var target={name:'guxin',age:18}
var source1={state:'signle',age:22}
var source2={mood:'happy',age:25}
var result=Object.assign(target,source1,source2)
console.log(target)
我們來看下執行結果：

可以看到有多個源物件情況也是和一個源物件一樣的。沒有同名的屬性會直接複製到目標物件上，同名的屬性後面的屬性值會覆蓋前面的同名屬性值。

四、注意事項：

1、Object.assign 方法只會拷貝源物件自身的並且可列舉的屬性到目標物件，繼承屬性和不可列舉屬性是不能拷貝的。

2、針對深拷貝，需要使用其他辦法，因為 Object.assign()拷貝的是屬性值。假如源物件的屬性值是一個物件的引用，那麼它也只指向那個引用。

3、目標物件自身也會改變

4、異常會打斷後續拷貝任務

五、相容性

目前IE瀏覽器不相容Object.assign()，如果需要相容IE的話最好不要直接使用這個方法。

六、與$.extend()的比較

我們通過一個簡單的示例來比較兩者有什麼不同，

var target={name:'guxin',age:18}
var source1={state:'signle',age:22}
var source2={mood:'happy',age:25}
var result=Object.assign(target,source1,source2)
console.log(target,'assign')
var targetObj={name:'guxin',age:18}
var sourceObj1={state:'signle',age:22}
var sourceObj2={mood:'happy',age:25}
var result=$.extend(targetObj,sourceObj1,sourceObj2)
console.log(targetObj,'extend')
最終執行結果如下：

可以看到兩者得到的結果是一樣的。所以，我認為這兩個方法，除了相容性應該是一樣的。
————————————————
版權宣告：本文為CSDN博主「guxin_duyin」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/guxin_duyin/article/details/88916106