JS數(shù)組按指定字段轉(zhuǎn)map-list結(jié)構(gòu)(示例詳解)
更新時(shí)間：2023年11月07日 09:24:20 作者：天葬
在開(kāi)發(fā)過(guò)程中經(jīng)常會(huì)出現(xiàn)接口返回整個(gè)數(shù)組，我們需要將數(shù)組進(jìn)行二次處理,這篇文章主要介紹了js?數(shù)組按指定字段轉(zhuǎn)map-list結(jié)構(gòu),需要的朋友可以參考下
js 數(shù)組按指定字段轉(zhuǎn)map-list結(jié)構(gòu)
背景介紹
在開(kāi)發(fā)過(guò)程中經(jīng)常會(huì)出現(xiàn)接口返回整個(gè)數(shù)組，我們需要將數(shù)組進(jìn)行二次處理，如下格式按照不同功能模塊（type）進(jìn)行數(shù)據(jù)拆分
原始數(shù)據(jù)
const list = [
{"type":"red","id":1,"name":"a","count":1},
{"type":"red","id":2,"name":"b","color":2},
{"type":"green","id":3,"name":"c","color":3},
{"type":"green","id":4,"name":"d","color":4},
{"type":"blue","id":5,"name":"e","color":4},
{"type":"blue","id":6,"name":"f","color":4}
];轉(zhuǎn)換方法
/**
* @param {Object} listData 原始數(shù)據(jù)
* @param {Object} field 字段 key
*/
const arrayToMap = (listData,field)=>{
const arrayMap = {};
listData.forEach(item => {
const item_type = item[field];
if (!arrayMap[item_type]) {
arrayMap[item_type] = [];
}
// 將數(shù)據(jù)添加到相應(yīng) 'type' 的數(shù)組中
arrayMap[item_type].push(item);
});
return arrayMap;
}測(cè)試驗(yàn)證
console.log(arrayToMap(list,'type'))
{
"red": [
{
"type": "red",
"id": 1,
"name": "a",
"count": 1
},
{
"type": "red",
"id": 2,
"name": "b",
"color": 2
}
],
"green": [
{
"type": "green",
"id": 3,
"name": "c",
"color": 3
},
{
"type": "green",
"id": 4,
"name": "d",
"color": 4
}
],
"blue": [
{
"type": "blue",
"id": 5,
"name": "e",
"color": 4
},
{
"type": "blue",
"id": 6,
"name": "f",
"color": 4
}
]
}到此這篇關(guān)于js 數(shù)組按指定字段轉(zhuǎn)map-list結(jié)構(gòu)的文章就介紹到這了,更多相關(guān)js數(shù)組轉(zhuǎn)map-list結(jié)構(gòu)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了GoJs基本使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
JavaScript中使用replace結(jié)合正則實(shí)現(xiàn)replaceAll的效果
JavaScript?中使用?replace?達(dá)到?replaceAll的效果，其實(shí)就用利用的正則的全局替換。2010-06-06
Javascript刪除指定元素節(jié)點(diǎn)的方法
這篇文章主要介紹了使用Javascript刪除指定元素節(jié)點(diǎn)的方法,通俗易懂,需要的朋友可以參考下。2016-06-06
JavaScript練習(xí)小項(xiàng)目之修改div塊的顏色
這篇文章主要給大家介紹了關(guān)于JavaScript練習(xí)小項(xiàng)目之修改div塊的顏色的相關(guān)資料,文中通過(guò)舉例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-01-01 
JavaScript中的this總是讓人迷惑，應(yīng)該是js眾所周知的坑之一。 個(gè)人也覺(jué)得js中的this不是一個(gè)好的設(shè)計(jì)，由于this晚綁定的特性，它可以是全局對(duì)象，當(dāng)前對(duì)象，或者…有人甚至因?yàn)榭哟蠖挥胻his
2015-12-12 
chart.js實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)顯示拆線圖的效果
本文主要介紹了chart.js實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)顯示拆線圖的效果,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-11-11 
詳解微信小程序-canvas繪制文字實(shí)現(xiàn)自動(dòng)換行
這篇文章主要介紹了微信小程序canvas繪制文字實(shí)現(xiàn)自動(dòng)換行，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04 
用js實(shí)現(xiàn)調(diào)用flash，去除虛邊框效果代碼
2008-04-04 
詳解JavaScript對(duì)數(shù)組操作（添加/刪除/截取/排序/倒序）
這篇文章主要介紹了JavaScript對(duì)數(shù)組操作，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04