如何实现按班级统计学生人数？现有JS代码优化需求

现有代码 #

学生数据数组 #

let student = [{
 id:1,
 name:'aman',
 class:'10',
 gender:'male'
},{
 id:2,
 name:'shivani',
 class:'10',
 gender:'female'
},{
 id:2,
 name:'riyan',
 class:'11',
 gender:'female'
}]

原customFilter函数 #

function customFilter(objList, text) {
    if (undefined === text || text === '' ) return objList;
    return objList.filter(product => {
        let flag;
        for (let prop in product) {
            if (product[prop].toString().indexOf(text)>-1) {
                product[prop] = 0
                product[prop]++
                flag = product[prop]
                console.log(flag)
            }
        }
    return flag;
    });}
    
console.log(customFilter(student, '10'))

问题分析 #

原函数无法达成需求的原因：

• 返回的是匹配的学生数组，而非指定格式的统计结果
• 错误修改了原数组的属性值，破坏原始数据
• 遍历所有属性进行模糊匹配，会误匹配到其他含目标文本的属性（比如id为10的学生），不符合“按班级筛选”的精准需求

解决方案 #

以下实现可精准统计指定班级的学生人数，并返回{class: 班级值, student: 人数}格式的结果：

方案1：Filter + 长度统计 #

function customFilter(objList, className) {
    // 处理未传入班级参数的情况，返回所有班级的统计
    if (!className) {
        const classStats = {};
        objList.forEach(student => {
            const cls = student.class;
            classStats[cls] = (classStats[cls] || 0) + 1;
        });
        return Object.entries(classStats).map(([cls, count]) => ({ class: cls, student: count }));
    }
    // 统计指定班级的人数
    const studentCount = objList.filter(student => student.class === className).length;
    return { class: className, student: studentCount };
}

// 调用示例
console.log(customFilter(student, '10')); // 输出 {class: '10', student: 2}
console.log(customFilter(student)); // 输出 [{class: '10', student: 2}, {class: '11', student: 1}]

方案2：Reduce 高效统计（推荐） #

使用reduce一次遍历完成统计，性能更优：

function customFilter(objList, className) {
    if (!className) {
        const stats = objList.reduce((acc, student) => {
            const cls = student.class;
            acc[cls] = (acc[cls] || 0) + 1;
            return acc;
        }, {});
        return Object.entries(stats).map(([cls, num]) => ({ class: cls, student: num }));
    }
    const total = objList.reduce((sum, student) => {
        return student.class === className ? sum + 1 : sum;
    }, 0);
    return { class: className, student: total };
}

关键改进 #

• 不修改原数组，保留原始数据完整性
• 针对class属性精准匹配，确保统计结果准确
• 返回符合要求的格式，支持指定班级和全班级统计两种场景

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