如何使用Lodash countBy统计嵌套对象，同时获取分类name、key和出现次数

之前方案的问题：

• 第一种直接遍历原始所有分类条目，没有做去重处理，所以会出现重复的分类渲染
• 第二种仅提取了分类名称做统计，丢失了名称和对应key的关联关系，所以无法拿到key值

你可以使用Lodash的_.groupBy()方法实现需求，核心逻辑是用分类的唯一标识key作为分组依据，同一分类的所有条目会被聚合到同一组，组的长度就是该分类的出现次数，同时可以从组内第一条数据拿到完整的分类name和key信息：

import { groupBy } from 'lodash'

// 按分类的唯一key分组，相同key的条目会被归为同一组
const categoryGroups = groupBy(items, item => item.category.key)

// 格式化分组结果，得到去重后的分类列表，同时附带出现次数
const uniqueCategories = Object.values(categoryGroups).map(group => {
  // 同一组内所有条目的category信息一致，取第一条的category即可
  const category = group[0].category
  return {
    ...category,
    count: group.length
  }
})

在React组件中直接遍历处理好的uniqueCategories即可：

{uniqueCategories.map(item => (
  <CustomComponent 
    category={item.name} 
    key={item.key} 
    count={item.count} 
  />
))}

如果业务场景存在同key不同名的极端情况，你可以把分组键替换为${item.category.name}_${item.category.key}，确保分组完全精准。

内容的提问来源于stack exchange，提问作者John107