JavaScript如何实现按单个Subject科目分组人员姓名列表

问题根因 #

原代码直接把存储多个科目的Subject数组作为分组对象的键，JS会隐式将数组转换为逗号拼接的字符串作为键名，最终只会按照科目组合分组，无法拆分到单个科目维度。

调整思路 #

遍历每个人员时，不要直接拿整个科目数组当键，而是循环遍历当前人员关联的每一个单独科目，给每个科目对应的分组数组追加当前人员即可。

修正代码 #

const personList = [
    {
        Name: 'Josh',
        Subject: ['Biology', 'Chemistry'],  
    },
    {
        Name: 'James',
        Subject: ['Chemistry', 'Physics'],
    },
    {
        Name: 'Mary',
        Subject: ['Physics', 'Mathematics'],
    },
]

const groupedBySubject = personList.reduce((groupMap, person) => {
    person.Subject.forEach(singleSubject => {
        // 对应科目分组不存在时先初始化空数组
        if (!groupMap[singleSubject]) {
            groupMap[singleSubject] = []
        }
        // 按需选择存完整人员信息还是只存姓名
        groupMap[singleSubject].push(person.Name)
    })
    return groupMap
}, {})

console.log(groupedBySubject)

运行结果 #

{
  Biology: [ 'Josh' ],
  Chemistry: [ 'Josh', 'James' ],
  Physics: [ 'James', 'Mary' ],
  Mathematics: [ 'Mary' ]
}

可选优化点 #

• 如果原始数据存在同一人重复关联同一科目的情况，可以在push前加判断，避免同一个人在单个科目分组里重复出现
• 如果前端渲染需要固定科目顺序，可以拿到分组结果后，对Object.keys(groupedBySubject)做自定义排序后再遍历渲染
• 如果需要统计每个科目的报名人数，直接取对应分组数组的length属性即可

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