Object.assign()方法

assign翻譯成漢語是將某事物從一個人轉讓給另一個人。

Object.assign方法功能正如其名，能夠將一個或者多個物件的屬性拷貝到目標物件。

特別說明：

（1）.可以被拷貝的屬性必須是可列舉。

（2）.同時可以被拷貝的屬性必須是自有屬性，不能繼承自原型鏈。

（3）.此方法進行的是淺拷貝。

ES2015新增此方法。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
Object.assign(target, ...sources );

引數解析:

（1）.target：必需，接收拷貝屬性的目標物件。

（2）.sources:必需，將要從中拷貝屬性的物件。

瀏覽器相容：

（1）.IE瀏覽器不支援此方法。

（2）.Edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.火狐瀏覽器支援此方法。

（5）.opera瀏覽器支援此方法。

（6）.safria瀏覽器支援此方法。

程式碼例項:

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let webName = {
    webName: "螞蟻部落",
}
let webUrl = {
  url:"www.softwhy.com"
}
let web = Object.assign(webName, webUrl);
console.log(web);

程式碼執行效果截圖如下：

程式碼解析如下：

（1）.webName是目標物件。

（2）.方法將webUrl物件中的屬性拷貝到目標物件webName中。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let webName = {
    webName: "螞蟻部落",
}
let webUrl = {
  url:"www.softwhy.com"
}
let web = Object.assign(webName, webUrl);
console.log(web==webName);

程式碼執行效果截圖如下：

由列印結果可以看到，Object.assign方法是操作目標物件。

也就是說此方法並不會新建一個物件，而是直接將屬性拷貝到目標物件自身之上。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let webName = {
    webName: "螞蟻部落",
}
let webUrl = {
  url:"www.softwhy.com"
}
let webAddress={
  address:"青島市南區"
}
let web = Object.assign(webName, webUrl,webAddress);
console.log(web);

程式碼執行效果截圖如下：

可以一次性拷貝多個物件的屬性，物件與物件之間使用逗號分隔。

通過Object.defineProperty方法定義address屬性為不可列舉（enumerable特性值為false）。

那麼Object.assign方法只會拷貝可列舉屬性，所以上述程式碼只拷貝antzone物件中的url和age兩個屬性。

關於Object.defineProperty方法可以參閱Object.defineProperty()一章節。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let webName = {
  webName: "螞蟻部落"
}
let webUrl = {
  url:"www.softwhy.com",
  num: {
    x: 1,
    y: 2
  }
}
var web = Object.assign(webName, webUrl);
console.log(web);

程式碼執行效果截圖如下：

上述程式碼分析如下：

（1）.webUrl物件的num屬性與url屬性不同，它指向另一個物件。

（2）.屬性值本質上是物件{x:1,y:2}物件的儲存地址，而不是物件本身。

（3）.Object.assign方法進行的是淺拷貝，也就說它只遍歷物件第一層屬性，比如webUrl物件中的url和num屬性，不會再去遍歷拷貝出num物件中的屬性，於是拷貝到目標物件的num屬性的值只是{x:1,y:2}物件的地址，那麼webName中的num屬性和webUrl中的num屬性指向同一個物件。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let webName = {
  webName: "螞蟻部落"
}
let webUrl = {
  url:"www.softwhy.com",
  num: {
    x: 1,
    y: 2
  }
}
var web = Object.assign(webName, webUrl);
console.log(web.num==webUrl.num);

程式碼執行效果截圖如下：

程式碼程式碼的列印結果印證了webName中的num屬性和webUrl中的num屬性指向同一個物件。

關於引用型別型資料可以參閱JavaScript值型別和引用型別一章節。