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 Rxjs mergeMap 的使用場(chǎng)合
這篇文章主要介紹了JavaScript Rxjs mergeMap 的使用場(chǎng)合,mergeMap 接收一個(gè)函數(shù)作為輸入?yún)?shù)，這個(gè)函數(shù)的輸入?yún)?shù)就是通過(guò) pipe 鏈接 mergeMap 的 Observable 里包含的元素2022-07-07
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)煙花效果，實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊出現(xiàn)模擬煙花爆炸的特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
在微信小程序的文檔中，使用scroll-view標(biāo)簽，然后給它設(shè)置一個(gè)scroll-x就可以實(shí)現(xiàn)元素，橫向排列，可以左右滑動(dòng)，但是在實(shí)際開(kāi)發(fā)中會(huì)遇到各種問(wèn)題，下面小編給大家?guī)?lái)了微信小程序scroll-x失效的完美解決方法,需要的朋友可以參考下2018-07-07
基于javascript實(shí)現(xiàn)按圓形排列DIV元素(一)
本篇文章主要介紹基于javascript實(shí)現(xiàn)按圓形排列DIV元素的方法，此文著重于介紹對(duì)實(shí)現(xiàn)的按圓形排列DIV元素的分析，需要的朋友來(lái)看下吧2016-12-12
uniapp微信小程序與H5的彈窗滾動(dòng)穿透解決方法
在uni-app中彈窗的用途很常見(jiàn),比如商品規(guī)格選取、廣告彈窗等,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序與H5的彈窗滾動(dòng)穿透解決方法,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了js獲取客戶端網(wǎng)卡的IP地址、MAC地址的方法,需要的朋友可以參考下2014-03-03
這篇文章主要為大家詳細(xì)介紹了JavaScript中參數(shù)傳遞三種方式：按值傳遞、引用傳遞和共享傳遞,文中的示例代碼講解詳細(xì),感興趣的可以了解下2023-09-09
根據(jù) W3C DOM 2 Events 描述，EventTarget 接口被所有支持 DOM 事件模型的節(jié)點(diǎn)（Node）實(shí)現(xiàn)。 該接口提供addEventListener 和removeEventListener方法，用來(lái)綁定或解綁一個(gè) EventListeners 接口到一個(gè) EventTarget。2010-10-10
Javascript獲取隨機(jī)數(shù)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇Javascript獲取隨機(jī)數(shù)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
JS深入學(xué)習(xí)之?dāng)?shù)組對(duì)象排序操作示例
這篇文章主要介紹了JS深入學(xué)習(xí)之?dāng)?shù)組對(duì)象排序操作,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript數(shù)組對(duì)象排序相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05