js合并數(shù)組對(duì)象代碼實(shí)現(xiàn)(將數(shù)組中具有相同屬性對(duì)象合并到一起組成一個(gè)新數(shù)組)
更新時(shí)間：2024年01月24日 16:19:10 作者：smileAgain-lg
項(xiàng)目過(guò)程中經(jīng)常會(huì)遇到JS數(shù)組合并的情況,時(shí)常為這個(gè)糾結(jié),這篇文章主要給大家介紹了關(guān)于js合并數(shù)組對(duì)象(將數(shù)組中具有相同屬性對(duì)象合并到一起組成一個(gè)新數(shù)組)的相關(guān)資料,需要的朋友可以參考下
一、根據(jù)數(shù)組對(duì)象中某一key值，合并相同key值的字段，到同一個(gè)數(shù)組對(duì)象中，組成新的數(shù)組
1.原數(shù)組：
var array = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 1, age: 25 },
{ id: 3, name: 'Charlie', age: 30 }
];
2.合并后數(shù)組：
var array = [
{ id: 1, name: 'Alice'， age: 25 },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie', age: 30 }
];
3.實(shí)現(xiàn)方法：
// 原始數(shù)組
var array = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 1, age: 25 },
{ id: 3, name: 'Charlie', age: 30 }
];
// 使用 reduce 方法合并具有相同屬性的對(duì)象
var mergedArray = array.reduce(function(result, obj) {
var target = result.find(function(item) {
return item.id === obj.id;
});
if (target) {
Object.assign(target, obj);
} else {
result.push(obj);
}
return result;
}, []);
console.log(mergedArray);
4.測(cè)試：
二、根據(jù)數(shù)組對(duì)象中某一key值，合并相同key值的對(duì)象，到同一個(gè)對(duì)象中，組成新的數(shù)組
1.原數(shù)組：
let list = [
{
name: "張三",
gender: "張",
age: "20"
},
{
name: "李四",
gender: "李",
age: "25"
},
{
name: "王五",
gender: "王",
age: "30"
},
{
name: "張飛",
gender: "張",
age: "20"
},
{
name: "李紅",
gender: "李",
age: "22"
}
]
2.合并后數(shù)組：
let list = [
{
gender: "張",
{
name: "張三",
gender: "張",
age: "20"
},
{
name: "張飛",
gender: "張",
age: "20"
}
},
{
gender: "李",
{
name: "李四",
gender: "李",
age: "25"
},
{
name: "李紅",
gender: "李",
age: "22"
}
},
{
gender: "王",
{
name: "王五",
gender: "王",
age: "30"
},
}
]
3.實(shí)現(xiàn)方法一：
let tempArr = [];
let Data = [];
for (let i = 0; i < list.length; i++) {
if (tempArr.indexOf(list[i].gender) === -1) {
Data.push({
gender: list[i].gender,
dataInfo: [list[i]]
});
tempArr.push(list[i].gender);
} else {
for (let j = 0; j < Data.length; j++) {
if (Data[j].gender== list[i].gender) {
Data[j].dataInfo.push(list[i]);
break;
}
}
}
}
console.log(Data);
測(cè)試：
4.實(shí)現(xiàn)方法二：
let dataInfo = {};
list.forEach((item, index) => {
let { gender } = item;
if (!dataInfo[gender]) {
dataInfo[gender] = {
gender,
child: []
}
}
dataInfo[gender].child.push(item);
});
let newList = Object.values(dataInfo); // list 轉(zhuǎn)換成功的數(shù)據(jù)
console.log(newList)
測(cè)試：
總結(jié)
到此這篇關(guān)于js合并數(shù)組對(duì)象代碼實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)js合并數(shù)組對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Javascript中內(nèi)建函數(shù)reduce的應(yīng)用詳解
內(nèi)建函數(shù)其實(shí)就是內(nèi)置函數(shù),reduce函數(shù)是ECMAScript5規(guī)范中出現(xiàn)的數(shù)組方法。在平時(shí)的工作中，相信大家使用的場(chǎng)景并不多，這篇文章給大家詳細(xì)介紹了函數(shù)reduce的應(yīng)用以及多重疊加，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-10-10
帝國(guó)cms首頁(yè)列表頁(yè)實(shí)現(xiàn)點(diǎn)贊功能
這篇文章主要介紹了帝國(guó)cms首頁(yè)列表頁(yè)實(shí)現(xiàn)點(diǎn)贊功能的相關(guān)資料,需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)更換背景圖片,文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
js如何去除數(shù)組中的empty?undefined空項(xiàng)
這篇文章主要介紹了js如何去除數(shù)組中的empty?undefined空項(xiàng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家介紹了SharedWorker?多頁(yè)面相互通信示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這是一個(gè)由JS實(shí)現(xiàn)的網(wǎng)頁(yè)密碼保護(hù)代碼，在進(jìn)入網(wǎng)頁(yè)前需要在彈出框中輸入密碼才可以，不過(guò)現(xiàn)在不怎么用了，一般情況下，目前都在后臺(tái)處理這種功能，用戶(hù)輸入用戶(hù)名和密碼后交給服務(wù)器處理，然后再返回信息，若登錄無(wú)誤就可看到某些內(nèi)容2013-04-04
fetch函數(shù)是一個(gè)用于在JavaScript中執(zhí)行HTTP請(qǐng)求的現(xiàn)代API,它提供了一種更簡(jiǎn)潔、更強(qiáng)大的方式來(lái)處理網(wǎng)絡(luò)請(qǐng)求,這篇文章主要介紹了JavaScript中fetch方法的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
基于Echarts實(shí)現(xiàn)繪制立體柱狀圖的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何基于Echarts實(shí)現(xiàn)繪制立體柱狀圖的功能，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，需要的可以參考一下2023-02-02
BootStrap Fileinput插件和Bootstrap table表格插件相結(jié)合實(shí)現(xiàn)文件上傳、預(yù)覽、提交的導(dǎo)入E
這篇文章主要介紹了BootStrap Fileinput插件和Bootstrap table表格插件相結(jié)合實(shí)現(xiàn)文件上傳、預(yù)覽、提交的導(dǎo)入Excel數(shù)據(jù)操作步驟,需要的朋友可以參考下2017-08-08
css輕松實(shí)現(xiàn)整站樣式互相切換。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-10-10