JS数组按指定字段转map-list结构(示例详解)
更新时间:2023年11月07日 09:24:20 作者:天葬
在开发过程中经常会出现接口返回整个数组,我们需要将数组进行二次处理,这篇文章主要介绍了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结构内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
如何使用JavaScript和XLSX.js将数据导出为Excel文件
这篇文章主要给大家介绍了关于如何使用JavaScript和XLSX.js将数据导出为Excel文件的相关资料,xlsx.js基于JavaScript的Excel文件读写库 如果你需要在浏览器端处理Excel文件,那么xlsx.js可能是一个不错的选择,需要的朋友可以参考下2024-05-05
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
这篇文章主要介绍了Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
这篇文章主要介绍了原生javascript运动函数的封装,结合实例形式分析了JavaScript封装匀速、抛物线、多属性的运动等函数及相关使用方法,需要的朋友可以参考下2020-02-02


最新评论