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