数据分组

数据分组在开发中十分常用，它指的是按照给定的 key 对一组数据进行分类，得到一组新的符合分类要求的数据

原生方法

JS 引擎提供了 Object.groupBy() 静态方法，它可以通过给定的键对一组数据进行分类，它的用法如下：

• items：一个将进行元素分组的可迭代对象
• callback：获取分组的键的方法，会对每条数据执行一次（此方法的参数为 element 和 index，分别表示当前正在处理的元素和当前元素索引）

const inventory = [
    { name: "asparagus", type: "vegetables", quantity: 5 },
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "goat", type: "meat", quantity: 23 },
    { name: "cherries", type: "fruit", quantity: 5 },
    { name: "fish", type: "meat", quantity: 22 },
];
//按照 type 字段进行分组
const result = Object.groupBy(inventory, ({ type }) => type);
console.log(result);
// 输出：
// {
//     "vegetables": [
//         {name: 'asparagus', type: 'vegetables', quantity: 5}
//     ],
//     "meat":[
//         {name: 'goat', type: 'meat', quantity: 23},
//         {name: 'fish', type: 'meat', quantity: 22}
//     ],
//     "fruit":[
//         {name: 'bananas', type: 'fruit', quantity: 0},
//         {name: 'cherries', type: 'fruit', quantity: 5}
//     ]
// }

需要注意的是， Object.groupBy() 方法的兼容性不太好，对于浏览器的版本要求较高

通用方法

使用 js 实现的分组方法，代码简单，兼容性好

function groupBy(arr,callback){
    if(!arr || !arr.length) return
    
    //对字符串的 key 做归一化处理
    if(typeof callback === 'string'){
        const key = callback
        callback = (item,index,list) => item[key]
    }

    const result = {}
    const len = arr.length
    for(let i=0;i<len;i++){
        const key = callback(arr[i],i,arr)
        if(result[key]){
            result[key].push(arr[i])
        }else{
            result[key] = [arr[i]]
        }
    }

    return result
}

const inventory = [
    { name: "asparagus", type: "vegetables", quantity: 5 },
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "goat", type: "meat", quantity: 23 },
    { name: "cherries", type: "fruit", quantity: 5 },
    { name: "fish", type: "meat", quantity: 22 },
];
//按照 quantity 字段进行分组
const result = groupBy(inventory, ({ quantity }) => quantity);
console.log(result)
//输出：
// {
//     "0":[
//         {name: 'bananas', type: 'fruit', quantity: 0}
//     ],
//     "5":[
//         {name: 'asparagus', type: 'vegetables', quantity: 5},
//         {name: 'cherries', type: 'fruit', quantity: 5}
//     ],
//     "22":[
//         {name: 'fish', type: 'meat', quantity: 22}
//     ],
//     "23":[
//         {name: 'goat', type: 'meat', quantity: 23}
//     ]
// }

上面的 groupBy() 方法接收 2 个参数：

• arr：要分组的数据（一个可迭代的对象）
• callback：一个获取分组依据的 key 的回调函数，也可以直接传入字符串形式的 key，但使用回调函数的形式更加灵活