副队长JavaScript教程(41)-函数的应用案例
发布时间:2026/10/27 9:23:07 锦皓数字建站
-函数的应用案例`)
点此查看所有教程、项目、源码导航文章目录1. 背景2. 案例实现思路3. 代码实现4. 运行输出5. 重点拆解里面的核心知识点6. 拓展思考可以自己尝试改造7. 小结1. 背景前面我们已经把函数的基础知识点全部学完定义调用、参数、返回值、作用域、匿名函数、函数表达式。上一篇的小案例偏向单一功能比较简单。本篇我们做一个更贴近真实开发的综合案例把判断、循环、分支、多个函数互相调用、局部作用域全部融合在一起。需求说明我们封装一组学生成绩工具函数实现这些能力计算一组成绩的平均分找出一组成绩里的最高分、最低分统计及格人数大于等于 60 分为及格根据平均分自动评定等级90 及以上优秀80~89 良好70~79 中等60~69 及格60 以下不及格我们把每一个独立能力单独封装成函数最后写一个总函数一次性输出整套统计结果。2. 案例实现思路遵循一个原则一个函数只负责一件事。getAverage接收成绩数组返回平均分getMaxScore接收成绩数组返回最高分getMinScore接收成绩数组返回最低分getPassCount接收成绩数组返回及格人数getLevel接收平均分返回评价等级showScoreInfo总函数调用上面所有工具函数统一打印全部统计信息3. 代码实现// 计算平均分functiongetAverage(scoreArr){letsum0;for(leti0;iscoreArr.length;i){sumsumscoreArr[i];}letavgsum/scoreArr.length;returnavg;}// 获取最高分functiongetMaxScore(scoreArr){letmaxscoreArr[0];for(leti1;iscoreArr.length;i){if(scoreArr[i]max){maxscoreArr[i];}}returnmax;}// 获取最低分functiongetMinScore(scoreArr){letminscoreArr[0];for(leti1;iscoreArr.length;i){if(scoreArr[i]min){minscoreArr[i];}}returnmin;}// 统计及格人数functiongetPassCount(scoreArr){letcount0;for(leti0;iscoreArr.length;i){if(scoreArr[i]60){count;}}returncount;}// 根据平均分获取等级functiongetLevel(avg){if(avg90){return优秀;}elseif(avg80){return良好;}elseif(avg70){return中等;}elseif(avg60){return及格;}else{return不及格;}}// 汇总函数一次性统计全部信息functionshowScoreInfo(scoreList){// 内部局部变量只在这个函数内可用letaveragegetAverage(scoreList);letmaxgetMaxScore(scoreList);letmingetMinScore(scoreList);letpassNumgetPassCount(scoreList);letlevelgetLevel(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. 重点拆解里面的核心知识点函数之间互相调用showScoreInfo这个汇总函数内部调用了我们前面写好的多个工具函数。这就是函数复用的魅力不用反复抄写循环和判断代码。局部变量的使用average、max、min这些变量是定义在showScoreInfo里面的局部变量只能在这个函数内部使用外部访问不到不会污染全局。同一个工具函数可以传入多组不同数据我们传入了 class1、class2 两组成绩复用同一套统计逻辑只需要改变传入的数据结果自动变化。分工清晰方便维护如果以后想修改 “及格线”我们只需要修改getPassCount里面的判断条件如果想修改等级划分标准只需要修改getLevel不会影响其他功能。真实项目开发就是这样拆分功能。6. 拓展思考可以自己尝试改造大家可以试着自己给这个案例增加功能锻炼思维增加功能统计不及格人数增加功能计算及格率及格人数 / 总人数改造使用函数表达式改写其中某一个工具函数7. 小结这个综合案例模拟了开发中很常见的工具函数封装思路把一个大需求拆成多个小、独立、单一职责的函数再由一个汇总函数统一调度。循环、分支、参数、返回值、作用域这些知识点在这个案例里全部结合起来使用。到这里函数相关的主线内容就实战巩固完毕下一篇我们开启全新的章节JS 对象。
锦
锦皓数字建站
深耕本土企业品牌数字化升级,专注原创端正雅致商务官网,从视觉设计到稳定运维全程保驾护航。