点此查看所有教程、项目、源码导航

1. 背景

前面我们已经把函数的基础知识点全部学完：定义调用、参数、返回值、作用域、匿名函数、函数表达式。
上一篇的小案例偏向单一功能，比较简单。本篇我们做一个更贴近真实开发的综合案例，把判断、循环、分支、多个函数互相调用、局部作用域全部融合在一起。

需求说明：
我们封装一组学生成绩工具函数，实现这些能力：

1. 计算一组成绩的平均分
2. 找出一组成绩里的最高分、最低分
3. 统计及格人数（大于等于 60 分为及格）
4. 根据平均分自动评定等级：90 及以上优秀，80~89 良好，70~79 中等，60~69 及格，60 以下不及格

我们把每一个独立能力，单独封装成函数，最后写一个总函数，一次性输出整套统计结果。

2. 案例实现思路

遵循一个原则：一个函数只负责一件事。

• getAverage：接收成绩数组，返回平均分
• getMaxScore：接收成绩数组，返回最高分
• getMinScore：接收成绩数组，返回最低分
• getPassCount：接收成绩数组，返回及格人数
• getLevel：接收平均分，返回评价等级
• showScoreInfo：总函数，调用上面所有工具函数，统一打印全部统计信息

3. 代码实现

// 计算平均分functiongetAverage(scoreArr){letsum=0;for(leti=0;i<scoreArr.length;i++){sum=sum+scoreArr[i];}letavg=sum/scoreArr.length;returnavg;}// 获取最高分functiongetMaxScore(scoreArr){letmax=scoreArr[0];for(leti=1;i<scoreArr.length;i++){if(scoreArr[i]>max){max=scoreArr[i];}}returnmax;}// 获取最低分functiongetMinScore(scoreArr){letmin=scoreArr[0];for(leti=1;i<scoreArr.length;i++){if(scoreArr[i]<min){min=scoreArr[i];}}returnmin;}// 统计及格人数functiongetPassCount(scoreArr){letcount=0;for(leti=0;i<scoreArr.length;i++){if(scoreArr[i]>=60){count++;}}returncount;}// 根据平均分获取等级functiongetLevel(avg){if(avg>=90){return"优秀";}elseif(avg>=80){return"良好";}elseif(avg>=70){return"中等";}elseif(avg>=60){return"及格";}else{return"不及格";}}// 汇总函数：一次性统计全部信息functionshowScoreInfo(scoreList){// 内部局部变量，只在这个函数内可用letaverage=getAverage(scoreList);letmax=getMaxScore(scoreList);letmin=getMinScore(scoreList);letpassNum=getPassCount(scoreList);letlevel=getLevel(average);console.log("=====成绩统计报告=====");console.log("平均分："+average);console.log("最高分："+max);console.log("最低分："+min);console.log("及格人数："+passNum);console.log("整体等级："+level);}// 测试两组不同班级的成绩letclass1=[88,76,59,92,66,45,79,95];letclass2=[55,48,62,71,53];showScoreInfo(class1);showScoreInfo(class2);

4. 运行输出

=====成绩统计报告=====平均分：75最高分：95最低分：45及格人数：6整体等级：中等=====成绩统计报告=====平均分：57.8最高分：71最低分：48及格人数：2整体等级：不及格

5. 重点拆解里面的核心知识点

1. 函数之间互相调用showScoreInfo这个汇总函数内部，调用了我们前面写好的多个工具函数。
   这就是函数复用的魅力，不用反复抄写循环和判断代码。
2. 局部变量的使用average、max、min这些变量是定义在showScoreInfo里面的局部变量，只能在这个函数内部使用，外部访问不到，不会污染全局。
3. 同一个工具函数，可以传入多组不同数据
   我们传入了 class1、class2 两组成绩，复用同一套统计逻辑，只需要改变传入的数据，结果自动变化。
4. 分工清晰，方便维护
   如果以后想修改 “及格线”，我们只需要修改getPassCount里面的判断条件；
   如果想修改等级划分标准，只需要修改getLevel，不会影响其他功能。
   真实项目开发，就是这样拆分功能。

6. 拓展思考（可以自己尝试改造）

大家可以试着自己给这个案例增加功能，锻炼思维：

• 增加功能：统计不及格人数
• 增加功能：计算及格率（及格人数 / 总人数）
• 改造：使用函数表达式改写其中某一个工具函数

7. 小结

这个综合案例，模拟了开发中很常见的工具函数封装思路：
把一个大需求，拆成多个小、独立、单一职责的函数，再由一个汇总函数统一调度。
循环、分支、参数、返回值、作用域这些知识点，在这个案例里全部结合起来使用。

到这里，函数相关的主线内容就实战巩固完毕，下一篇我们开启全新的章节：JS 对象。