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