JavaScript 對象合并的幾種方法小結
更新時間：2023年02月17日 09:06:44 作者：憂郁的蛋~
本文主要介紹了JavaScript 對象合并的幾種方法小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
JavaScript 中有多種方法可以合并對象。
1、使用 Object.assign() 方法
它可以將一個或多個對象的屬性復制到目標對象中。例如：
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); // { a: 1, b: 3, c: 4 }
這里我們使用空對象({})作為第一個參數(shù)，避免直接修改第一個對象。
2、使用解構賦值語法
這種方法會在合并對象時保留鍵值相同的對象的屬性，例如：
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { a: 1, b: 3, c: 4 }
這里使用了擴展運算符，可以將一個對象的屬性解構到另一個對象中。
3、使用 Lodash 中的 merge() 方法
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = _.merge(obj1, obj2);
console.log(obj3); // { a: 1, b: 3, c: 4 }
4、for-in 循環(huán) + 手動賦值
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = {};
for (const key in obj1) {
obj3[key] = obj1[key];
}
for (const key in obj2) {
obj3[key] = obj2[key];
}
console.log(obj3); // { a: 1, b: 3, c: 4 }
5、使用 Object.keys() 和 Array.forEach() 方法
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = {};
Object.keys(obj1).forEach(key => {
obj3[key] = obj1[key];
});
Object.keys(obj2).forEach(key => {
obj3[key] = obj2[key];
});
console.log(obj3); // { a: 1, b: 3, c: 4 }
最后需要提醒的是，在合并對象時如果鍵值相同的對象屬性類型不同，例如一個為字符串類型，一個為數(shù)值類型，會覆蓋之前的屬性，因此需要根據(jù)項目需求做出相應的處理。
此外，如果需要對合并對象的屬性進行特殊處理，例如合并對象的屬性值是一個數(shù)組，需要合并成一個新數(shù)組，可以使用 Array.concat() 方法。
const obj1 = { a: [1, 2] };
const obj2 = { a: [3, 4] };
const obj3 = Object.assign({}, obj1, {
a: obj1.a.concat(obj2.a)
});
console.log(obj3); // { a: [1, 2, 3, 4] }
或者使用擴展運算符
const obj1 = { a: [1, 2] };
const obj2 = { a: [3, 4] };
const obj3 = {...obj1, a: [...obj1.a, ...obj2.a]}
console.log(obj3); // { a: [1, 2, 3, 4] }
此外，如果需要對合并對象的屬性值進行進一步的處理，如去重、排序等，可以使用 Array.filter()、Array.sort() 等方法。
到此這篇關于JavaScript 對象合并的幾種方法小結的文章就介紹到這了,更多相關JavaScript 對象合并內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了js獲取json元素數(shù)量的方法,可實現(xiàn)對json元素數(shù)量的統(tǒng)計功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
網(wǎng)站登錄為了更好的用戶體驗都會在輸入密碼的時候檢測是否開啟大寫，這樣有助于提醒用戶,需要學習的朋友可以參考下2012-12-12
這篇文章主要介紹了JS實現(xiàn)簡單面向對象的顏色選擇器,以完整實例形式分析了JavaScript基于面向對象實現(xiàn)顏色選擇器的具體步驟與實現(xiàn)技巧,需要的朋友可以參考下2016-04-04
微信小程序目前的火熱程度相信不用多言，最近利用空余時間用小程序實現(xiàn)了個動態(tài)的登錄頁效果，所以下面這篇文章主要給大家介紹了利用微信小程序實現(xiàn)登錄頁云層漂浮動畫效果的相關資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
這篇文章主要介紹了JavaScript設計模式之建造者模式,結合實例形式分析了設計模式中建造者模式的概念、功能及JavaScript實現(xiàn)與使用建造者模式的相關操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了微信小程序uploadFile接口實現(xiàn)文件上傳流程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
js中對于TextArea的選中區(qū)域后進行處理的代碼，需要的朋友可以參考下。2010-12-12
JS獲取經(jīng)緯度并根據(jù)經(jīng)緯度得到城市信息簡單示例
前端時間剛好使用了百度地圖的js api定位獲取用戶當前經(jīng)緯度并獲取當前詳細位置的功能,為了方便下次找起來方便一些自己在這里記錄一下,這篇文章主要給大家介紹了關于JS獲取經(jīng)緯度并根據(jù)經(jīng)緯度得到城市信息的相關資料,需要的朋友可以參考下2023-11-11
javascript轉換字符串為dom對象（字符串動態(tài)創(chuàng)建dom）
那么今天的目的就是教大家怎么去實現(xiàn)一個這樣的方法用來把字符串直接轉換為標準的dom對象2010-05-05
這篇文章主要介紹了js實現(xiàn)無縫滾動特效，結合已學知識進行擴展性練習，感興趣的朋友可以參考一下2015-12-12