JavaScript對象合并實(shí)現(xiàn)步驟介紹
JavaScript 中有多種方法可以合并對象。
1、使用 Object.assign()
方法:
它可以將一個或多個對象的屬性復(fù)制到目標(biāo)對象中。例如:
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、使用解構(gòu)賦值語法:
這種方法會在合并對象時保留鍵值相同的對象的屬性,例如:
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òu)到另一個對象中。
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ù)項目需求做出相應(yīng)的處理。
此外,如果需要對合并對象的屬性進(jìn)行特殊處理,例如合并對象的屬性值是一個數(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] }
或者使用擴(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] }
此外,如果需要對合并對象的屬性值進(jìn)行進(jìn)一步的處理,如去重、排序等,可以使用 Array.filter()、Array.sort() 等方法。
到此這篇關(guān)于JavaScript對象合并實(shí)現(xiàn)步驟介紹的文章就介紹到這了,更多相關(guān)JS對象合并內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript實(shí)現(xiàn)電商放大鏡效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)電商放大鏡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-11-11JavaScript實(shí)現(xiàn)基于Cookie的存儲類實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)基于Cookie的存儲類,實(shí)例分析了javascript通過cookie實(shí)現(xiàn)數(shù)據(jù)存儲的技巧,非常具有實(shí)用價值,需要的朋友可以參考下2015-04-04layui使用form表單實(shí)現(xiàn)post請求頁面跳轉(zhuǎn)的方法
今天小編就為大家分享一篇layui使用form表單實(shí)現(xiàn)post請求頁面跳轉(zhuǎn)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09《javascript設(shè)計模式》學(xué)習(xí)筆記二:Javascript面向?qū)ο蟪绦蛟O(shè)計繼承用法分析
這篇文章主要介紹了Javascript面向?qū)ο蟪绦蛟O(shè)計繼承用法,結(jié)合實(shí)例形式分析了《javascript設(shè)計模式》中JavaScript面向?qū)ο蟪绦蛟O(shè)計繼承相關(guān)概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04