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