JavaScript對(duì)象合并實(shí)現(xiàn)步驟介紹
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)賦值語(yǔ)法：
這種方法會(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ì)象合并實(shí)現(xiàn)步驟介紹的文章就介紹到這了,更多相關(guān)JS對(duì)象合并內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了深入理解JavaScript 參數(shù)按值傳遞，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
這篇文章主要為大家詳細(xì)介紹了原生js+css實(shí)現(xiàn)tab切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
詞法作用域就是定義在詞法階段的作用域,如果詞法作用域完全由寫代碼期間函數(shù)所聲明的位置來(lái)定義,怎樣才能在運(yùn)行時(shí)來(lái)“修改”（也可以說(shuō)欺騙）詞法作用域呢?JavaScript 中有兩種機(jī)制來(lái)實(shí)現(xiàn)這個(gè)目的,感興趣的朋友跟隨小編一起看看吧2023-10-10
javascript實(shí)現(xiàn)電商放大鏡效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)電商放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，下面這篇文章主要給大家介紹了axios學(xué)習(xí)教程的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友下面來(lái)一起看看吧。2017-03-03
這篇文章主要介紹了BootStrap model彈出框的使用，介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-04-04
JavaScript實(shí)現(xiàn)基于Cookie的存儲(chǔ)類實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)基于Cookie的存儲(chǔ)類,實(shí)例分析了javascript通過(guò)cookie實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
layui使用form表單實(shí)現(xiàn)post請(qǐng)求頁(yè)面跳轉(zhuǎn)的方法
今天小編就為大家分享一篇layui使用form表單實(shí)現(xiàn)post請(qǐng)求頁(yè)面跳轉(zhuǎn)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
這篇文章主要介紹了JavaScript獲取table中某一列的值的方法,需要的朋友可以參考下2014-05-05
《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記二：Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)繼承用法分析
這篇文章主要介紹了Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)繼承用法,結(jié)合實(shí)例形式分析了《javascript設(shè)計(jì)模式》中JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)繼承相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04