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
        }
    ]
}