js 数组根据某个字段进行分组

---

前言

接上一条博文账单页面月份悬浮，在那个功能中，有一个数据处理，将后端同事返回的一维数据进行月份抽取分组成二维数据，今天分享一下抽取的封装的方法，可直接服用。

---

一、数据分组方法封装

/**
 * 数据处理
 * @param arr [Array] 被处理的数组
 * @param group_key [String] 分组字段
*/
function formattingData (arr, group_key){
    let map = {}
    let res = []

    for (let i = 0; i < arr.length; i++) {
        let ai = arr[i]
        if (!map[ai[group_key]]) {
            map[ai[group_key]] = [ai]
        } else {    
            map[ai[group_key]].push(ai)
        }
    }
    Object.keys(map).forEach(key => {
        res.push({
            [group_key]: key,
            list: map[key],
        })
    })

    return res
}

二、使用步骤

1.使用方法

var arr = [
            { id: '1', group: '一班', name: '张三' },
            { id: '2', group: '二班', name: '李四' },
            { id: '3', group: '一班', name: '王五' },
            { id: '4', group: '一班', name: '老六' },
            { id: '5', group: '二班', name: '乔治' },
            { id: '6', group: '三班', name: '麦克' }
          ]
// 直接调用formattingData方法，将需要处理的一维数组及key传入即可
var newArr = formattingData(arr, 'group')
console.log('newArr :>> ', newArr);

2.效果展示

总结

在日常开发中，由于分页原因需使用一维数据进行数据传输，但是又需要实现二维数组的效果，便可使用此方法进行数据处理。有兴趣的小伙伴可以研究一下封装方法的代码。也可直接复制粘贴方法直接使用。so easy~