简介
把对象数组进行分组可能是日常开发中最经常使用到的功能了，除了杀鸡用牛刀引入 lodash 外也可以自己实现一个短小精悍的数组分组。
// 该源码来自于 https://30secondsofcode.org
const groupBy = (arr, fn) =>
arr.map(typeof fn === ‘function’ ? fn : val => val[fn]).reduce((acc, val, i) => {
acc[val] = (acc[val] || []).concat(arr[i]);
return acc;
}, {});
代码分析
先利用 Array.prototype.map 来对需要分组的数据进行提取，再使用 Array.prototype.reduce 来遍历提取后的数据并做归集。点睛之笔是 fn 为函数时可以进行复杂的操作和判断，不为函数时直接从对象属性中读取使得易用和实用性都得到了增强。
小技巧：使用 || 来进行数据的初始化。
使用场景
把用户购买过的物品按照品类进行分组，并生成标签方便用户快速查询对应种类的商品。
// 原始数据
const items = [
{name: ‘Apple iPhone X’, category: ‘ 手机数码 ’},
{name: ‘ 索尼 NW-A55 音乐播放器 ’, category: ‘ 手机数码 ’},
{name: ‘ 舒克 海洋之风牙膏 ’, category: ‘ 日常用品 ’},
{name: ‘ 洁丽雅 纯棉强吸水毛巾 ’, category: ‘ 日常用品 ’},
]
// 分类后的商品数据
const categoryItems = groupBy(items, ‘category’)
// 分类种类
const categoryKeys = Object.keys(categoryItems)
打赏 & 联系
如果您感觉有收获，欢迎给我打赏，以激励我输出更多的优质内容。
本文原稿来自 PushMeTop