JS数组按指定字段转map-list结构(示例详解)
作者：天葬
在开发过程中经常会出现接口返回整个数组，我们需要将数组进行二次处理,这篇文章主要介绍了js 数组按指定字段转map-list结构,需要的朋友可以参考下
js 数组按指定字段转map-list结构
背景介绍
在开发过程中经常会出现接口返回整个数组，我们需要将数组进行二次处理，如下格式按照不同功能模块（type）进行数据拆分
原始数据
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}
];转换方法
/**
* @param {Object} listData 原始数据
* @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] = [];
}
// 将数据添加到相应 'type' 的数组中
arrayMap[item_type].push(item);
});
return arrayMap;
}测试验证
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
}
]
}到此这篇关于js 数组按指定字段转map-list结构的文章就介绍到这了,更多相关js数组转map-list结构内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！