javascript對象的多種合并方式詳解
更新時間：2021年08月31日 16:53:27 作者：易風有點瘋
這篇文章主要介紹了JavaScript中的多種對象合并方法,通過代碼的形式給大家介紹的非常詳細，需要的朋友可以參考下，希望能夠給你帶來幫助
對象合并的多種方式（對于通過接口獲取數據之后賦值給本地對象的時候極其有用）
第一種：手動賦值(很撈)
const obj1 = {
name: "zs",
age: 13,
};
const obj2 = {
name: "ls",
sex: "女",
};
obj1.name = obj2.name;
obj1.sex = obj2.sex;
這種方法時最簡單的，但是日常項目中一個對象的屬性是非常多的，如果還是用這種方法的話就會有點繁瑣了
第二種：擴展運算符
const obj1 = {
name: "zs",
age: 13,
};
const obj2 = {
name: "ls",
sex: "女",
};
const newObj = { ...obj1, ...obj2 };
console.log(newObj === obj1); //false
console.log(newObj === obj2); //false
通過擴展運算符的特性可以快速的進行對象的合并，缺點就是需要用一個新的變量來接收
第三種：Object.assign() (最推薦)
const obj1 = {
name: "zs",
age: 13,
};
const obj2 = {
name: "ls",
sex: "女",
};
const newObj = Object.assign(obj1, obj2);
console.log(newObj === obj1); //true
console.log(newObj === obj2); //false
console.log(newObj);
// {
// name:'ls',
// age:13,
// sex:'女'
// }
Object.assign()方法可以接收一個目標對象和一個或者多個源對象作為參數，如果對象中有一樣的屬性，后面對象的屬性會覆蓋掉前面對象的那個屬性。
其原理是將后面的對象通過 set 訪問屬性來添加進目標對象，所以最后返回的值其實就是第一個目對象，可以在目標對象上添加訪問屬性來見識覆蓋過程
const obj1 = {
set a(val) {
console.log(val);
},
};
Object.assign(obj1, { a: "tom" }, { a: "jerry" }, { a: "dog" });
//'tom'
//'jerry'
//'dog'
這個方法的使用場景有很多，都特別好用，例如：
1.vue 項目清空表單
日常有些同學清空表單可能會給 form 里面的數據一個一個的賦空值來進行表單的清空操作，其實效率是非常低的,但是如果使用 Object.assign()和$options 配合的話，效率就很高
// 日常 this.ruleForm.name=''; this.ruleForm.phone=''; this.ruleForm.imgUrl=''; this.ruleForm.des=''; ...此處省略一萬字 // 使用Object.assign和$options Object.assign(this.ruleForm,this.$options.data)
Tips： $options 存儲的是 Vue 實例的初始值，所以通過 Object.assign()覆蓋值的特性，可以快速的做到重置表單，同理，如果是在進行表單數據修改的時候也能對頁面的 ruleForm 進行快速的賦值
const { data } = await xxxApi.getList();
Object.assign(this.ruleForm, data);
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!
相關文章
這個其實就是利用qq官方提供的東西，簡單的通過圖片來測試是否在線，隱身也是不在線狀態(tài)。純粹學習使用。2010-04-04
這篇文章介紹了js 表單提交后按鈕變灰的實例代碼，有需要的朋友可以參考一下2013-08-08
這篇文章主要介紹了TypeScript 類型編程之索引類型遞歸去掉可選修飾，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
如何使用wheelnav.js構建酷炫的動態(tài)導航菜單
本文主要介紹一種基于SVG的web動態(tài)導航組件,通過這個組件可以實現(xiàn)很多豐富酷炫的效果,首先介紹這款wheelnav.js的相關知識,然后結合代碼講解如何在html頁面中創(chuàng)建其對象,接著講解wheelnav的一些屬性和方法,最后給出基于wheelnav的實際成果,喜歡的朋友一起學習吧2024-06-06
這篇文章主要介紹了chrome監(jiān)聽cookie變化與賦值問題,cookie監(jiān)聽與賦值操作需要manifest文件里聲明權限問題，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
IE中提供了一個fireEvent方法大概就是觸發(fā)某個事件發(fā)生的意思，以為是和onclick()一樣，看來是我自已為是了,有時間還要多看看javascript的細節(jié)啊,廣大網友也是啊2013-02-02
這篇文章主要介紹了JS實現(xiàn)設置ff與ie元素絕對位置的方法,涉及JavaScript針對頁面元素及元素屬性的相關操作技巧,需要的朋友可以參考下2016-03-03
這篇文章主要為大家詳細介紹了微信小程序websocket實現(xiàn)聊天功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要介紹了JavaScript的URL對象是什么，還有各個屬性的具體實現(xiàn)方法，對JS URL感興趣的同學，可以參考下2021-05-05
要將PCM文件轉換為MP3文件,您可以使用Js實現(xiàn),這篇文章主要給大家介紹了關于如何用js將blob為pcm格式轉換為MP3格式的相關資料,需要的朋友可以參考下2023-11-11