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值型別和引用型別一章節。
相關文章
- object.assignObject
- Object.assign 模組Object
- Object.assign()的痛點Object
- JS: Object.assign() Vs Spread OperatorJSObject
- Object.assign()從認識到實現Object
- 瞎說系列之Object.assign入門Object
- ES6 的Object.assign(target, source_1, ···)Object
- [譯] Object.assign 和 Object Spread 之爭, 用誰?Object
- Vue 3學習理解 Object.assign淺複製VueObject
- 【進階4-2期】Object.assign 原理及其實現Object
- ES6高階函式Array.reduce()和Object.assign()函式Object
- Java中parse方法,ValueOf方法,toString方法Java
- Java的方法靜態方法Java
- js includes方法 和 filter方法JSFilter
- 方法
- initialize方法與load方法比較
- Java System類,currentTimeMillis方法,arraycopy方法。Java
- Java方法03:方法的過載Java
- [方法]需求挖掘採集的方法
- javaSE-day04--ArrayList基本用方法、類內定義方法和方法過載、靜態方法static(類的方法)、工具方法(static)的定義和使用Java
- wait()方法與await()方法的區別AI
- Python - 物件導向程式設計 - 例項方法、靜態方法、類方法Python物件程式設計
- getPropertyPriority() 方法
- deleteRule() 方法delete
- getPropertyValue() 方法
- getBoundingClientRect() 方法GCclient
- removeProperty() 方法REM
- Equals方法
- call() 方法
- Promise then() 方法Promise
- 一、方法
- 迭代方法
- replace方法
- SpecialCells 方法
- requestFullScreen() 方法
- exitFullscreen() 方法
- toJSON() 方法JSON
- Java方法Java