求助：如何在JavaScript中生成1-5星级评分统计数组

我有一个公司评论数组reviews，已经成功生成了部门统计数组departmentFilters和职位统计数组designationFilters，但不知道怎么生成评分统计数组ratingFilter。需要生成包含1星到5星的统计数组，每个元素包含count（对应星级的评论数量）和name（星级名称，比如'1 Star'、'2 Stars'）。

示例输入 #

const reviews = [
   {
        designation_id: 544,
        designation: 'Software Developer',
        department_id: 18,
        department: 'IT & Information Security',
        overall_rating: 4
    },
    {
        designation_id: 592,
        designation: 'UI Designer',
        department_id: 37,
        department: 'UX, Design & Architecture',
        overall_rating: 5
    },
    {
        designation_id: 544,
        designation: 'Software Developer',
        department_id: 18,
        department: 'IT & Information Security',
        overall_rating: 3
    }
]

期望输出 #

const ratingFilter = [
    {count: 0, name: '1 Star'}, 
    {count: 0, name: '2 Stars'},
    {count: 1, name: '3 Stars'},
    {count: 1, name: '4 Stars'},
    {count: 1, name: '5 Stars'}, 
]

已完成的代码 #

const departmentFilters = [];
const designationFilters = [];

reviews.reduce((accu: { [key: string]: any }, curr) => {
    const departmentKey = curr.department
        .split(' ')
        .join('_')
        .toLowerCase();

    const designationKey = curr.designation
        .split(' ')
        .join('_')
        .toLowerCase();

    // 部门统计
    if (!accu[departmentKey]) {
        accu[departmentKey] = {
            count: 1,
            name: curr.department,
            id: curr.department_id
        };
        departmentFilters.push(accu[departmentKey]);
    } else {
        accu[departmentKey].count++;
    }

    // 职位统计
    if (!accu[designationKey]) {
        accu[designationKey] = {
            count: 1,
            name: curr.designation,
            id: curr.designation_id
        };
        designationFilters.push(accu[designationKey]);
    } else {
        accu[designationKey].count++;
    }

    return accu;
}, Object.create(null));

解决方案 #

方式一：在现有reduce中集成评分统计 #

不需要额外遍历数组，在处理部门和职位统计的同时完成评分统计，性能更优：

const departmentFilters = [];
const designationFilters = [];
// 初始化1-5星的基础数组，默认count为0
const ratingFilter = [
    { count: 0, name: '1 Star' },
    { count: 0, name: '2 Stars' },
    { count: 0, name: '3 Stars' },
    { count: 0, name: '4 Stars' },
    { count: 0, name: '5 Stars' }
];

reviews.reduce((accu: { [key: string]: any }, curr) => {
    const departmentKey = curr.department
        .split(' ')
        .join('_')
        .toLowerCase();

    const designationKey = curr.designation
        .split(' ')
        .join('_')
        .toLowerCase();

    // 部门统计
    if (!accu[departmentKey]) {
        accu[departmentKey] = {
            count: 1,
            name: curr.department,
            id: curr.department_id
        };
        departmentFilters.push(accu[departmentKey]);
    } else {
        accu[departmentKey].count++;
    }

    // 职位统计
    if (!accu[designationKey]) {
        accu[designationKey] = {
            count: 1,
            name: curr.designation,
            id: curr.designation_id
        };
        designationFilters.push(accu[designationKey]);
    } else {
        accu[designationKey].count++;
    }

    // 评分统计：通过星级-1得到数组索引，累加对应count
    const ratingIndex = curr.overall_rating - 1;
    if (ratingIndex >= 0 && ratingIndex < ratingFilter.length) {
        ratingFilter[ratingIndex].count++;
    }

    return accu;
}, Object.create(null));

方式二：单独生成评分统计数组 #

逻辑更清晰，代码可读性更强，适合和现有逻辑分离的场景：

// 第一步：统计各星级的评论数量
const ratingCounts = reviews.reduce((counts, review) => {
    const rating = review.overall_rating;
    counts[rating] = (counts[rating] || 0) + 1;
    return counts;
}, {} as Record<number, number>);

// 第二步：生成符合要求的ratingFilter数组
const ratingFilter = [1,2,3,4,5].map(star => ({
    count: ratingCounts[star] || 0,
    name: star === 1 ? `${star} Star` : `${star} Stars`
}));

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