基于 Web-Dev-For-Beginners 的条件逻辑实战用 JavaScript 处理双评分系统的学生成绩【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners导读本文以 Web-Dev-For-Beginners 课程中 JavaScript 基础之做出决策Making Decisions 的课后作业为骨架完整讲解一个真实场景下的条件逻辑实战一所合并后的学校需要同时处理数字评分与字母评分两套截然不同的成绩体系判断哪些学生及格。读完本文你将掌握if...else、比较运算符、逻辑运算符、typeof类型判断与数组方法组合解决实际问题的完整思路并能独立写出可运行、可扩展的成绩筛选程序。一、实战背景一个需要条件逻辑的现实问题假设你在一所刚刚与另一所院校合并的学校工作。两所学校原本使用完全不同的评分体系现在你需要编写一个程序统一处理两类学生的成绩并判断谁通过了课程——这正是练习条件逻辑的绝佳场景。这个任务的核心价值在于同一个数组里混着不同类型的数据数字和字符串程序必须先判断这条成绩属于哪套体系再套用对应的规则做判定。这种先分流、再决策的模式几乎是所有真实业务系统订单处理、权限校验、表单验证的缩影。本任务对应的原始作业文件为 assignment.md其前置知识来自 Making Decisions 课程正文遍历数组用到的循环与数组方法则来自课程的 Arrays and Loops 章节。二、任务核心双评分系统与目标输出第一套评分体系数字评分规则说明成绩范围数字1–5及格线3及以上即 3、4、5不及格低于3即 1、2第二套评分体系字母评分规则说明成绩形式字母A、A-、B、B-、C、C-及格上述全部字母成绩均为及格注意该体系不包含D、F之类的不及格等级输入与预期输出题目给出如下数组allStudents要求构建一个新数组studentsWhoPass按各自体系的规则收纳所有及格成绩let allStudents [ A, // 字母成绩 - 及格 B-, // 字母成绩 - 及格 1, // 数字成绩 - 不及格 4, // 数字成绩 - 及格 5, // 数字成绩 - 及格 2 // 数字成绩 - 不及格 ]; let studentsWhoPass [];预期输出[A, B-, 4, 5]为什么是这四个值A和B-是合法字母成绩该体系内所有字母成绩都及格4和5是数字成绩且 31和2是数字成绩且 3因此不及格。三、知识准备本实战用到的 JavaScript 决策工具在动手编码前先回顾本任务会用到的基础工具全部出自 Making Decisions 课程正文1.typeof运算符判断成绩类型这是本任务的第一步关键——数组里混着数字和字符串必须先用typeof分流typeof 5 number // true typeof A number // false typeof A string // true2. 比较运算符产出布尔值比较运算符返回true/false是条件判断的原料。本任务重点使用符号含义示例小于5 6 // true小于等于5 6 // true大于5 6 // false大于等于5 6 // false严格相等值且类型均等5 5 // false!严格不等5 ! 6 // true课程正文特别强调做相等判断时优先使用/!而非/!避免隐式类型转换带来的意外行为。3. 逻辑运算符组合多个条件符号含义示例逻辑与两侧都为真才为真(5 3) (5 10) // true\|\|逻辑或至少一侧为真即为真(5 10) \|\| (5 10) // true!逻辑非取反!(5 10) // true本任务中判断是否为合法字母成绩就要用||把多个条件串联起来。另外注意 JavaScript 的短路求值特性在A || B中若A为真B根本不会被求值可善加利用。4.if...else语句控制执行分支if...else保证任何条件下程序都走且只走一条路径if (condition) { // 条件为 true 时执行 } else { // 条件为 false 时执行 }5. 数组与push/includes方法数组的遍历与操作来自 Arrays and Loops 章节.push()向数组末尾追加元素是收集及格成绩的核心手段.includes()判断数组是否包含某元素可让合法字母成绩的判断简洁很多课程示例fruits.includes(apple) // true。四、分步实现从零写出及格筛选程序按照作业给出的 Step-by-Step Approach实现分四步走第一步设置循环遍历allStudents中的每个成绩。第二步检查成绩类型是数字还是字符串用typeof grade number判断。第三步套用对应评分体系规则数字成绩grade 3字符串成绩判断是否为合法及格字母成绩。第四步将及格成绩push进studentsWhoPass。参考实现一if...else 逻辑运算符贴合课程知识点let allStudents [A, B-, 1, 4, 5, 2]; let studentsWhoPass []; for (let i 0; i allStudents.length; i) { let grade allStudents[i]; if (typeof grade number) { // 数字评分体系 3 及格 if (grade 3) { studentsWhoPass.push(grade); } } else if ( grade A || grade A- || grade B || grade B- || grade C || grade C- ) { // 字母评分体系所有列出的字母成绩均及格 studentsWhoPass.push(grade); } } console.log(studentsWhoPass); // [A, B-, 4, 5]这段代码清晰地演示了作业要求的全部知识点typeof类型判断、比较运算符、||逻辑运算符、嵌套的if...else、以及.push()收集结果。参考实现二用for...of与includes更优雅地重写课程 Arrays and Loops 章节 还介绍了 ES6 的for...of与现代数组方法。把合法字母成绩抽成数组并用includes判断逻辑更清晰、更不易出错let allStudents [A, B-, 1, 4, 5, 2]; let studentsWhoPass []; let passingLetterGrades [A, A-, B, B-, C, C-]; for (const grade of allStudents) { if (typeof grade number grade 3) { studentsWhoPass.push(grade); } else if (passingLetterGrades.includes(grade)) { studentsWhoPass.push(grade); } } console.log(studentsWhoPass); // [A, B-, 4, 5]两种写法结果完全一致选择哪种取决于代码可读性偏好——这正符合课程中三元表达式 vs 传统 if...else那一节的取舍精神。五、测试与边界情况作业明确要求用不同场景验证代码并在 Testing Your Solution 中给出了测试数组// 测试不同的成绩组合 let testGrades1 [A-, 3, C, 1, B]; let testGrades2 [5, A, 2, C-, 4]; // 你的解法应能处理任意合法成绩组合建议在浏览器控制台逐组验证并额外自查以下边界情况空数组allStudents []时循环不执行studentsWhoPass保持[]程序不应报错边界成绩数字3刚好及格、字母C-最后一个合法字母成绩应被正确收录意外数据类型如null、undefined、布尔值混入数组时typeof分流后两套规则都匹配不到会被安全跳过大小写字符串判断对大小写敏感a不会被includes匹配——这是可以在进阶部分通过校验解决的已知限制。六、进阶挑战从能跑到健壮作业在 Bonus Challenges 中给出了三个扩展方向下面给出可直接运行的参考实现。挑战一增加输入校验对非法成绩负数、无效字母、超出范围的数字给出明确提示而不是静默跳过let allStudents [A, B-, 1, 4, 5, 2, -3, Z, 6]; let studentsWhoPass []; for (const grade of allStudents) { if (typeof grade number) { if (grade 1 grade 5) { if (grade 3) studentsWhoPass.push(grade); } else { console.log(非法数字成绩: ${grade}); } } else if (typeof grade string passingLetterGrades.includes(grade)) { studentsWhoPass.push(grade); } else { console.log(无法识别的成绩类型: ${grade}); } }挑战二统计及格与不及格人数在筛选的同时维护计数器输出统计结论let passCount 0; let failCount 0; for (const grade of allStudents) { let isPass false; if (typeof grade number) { isPass grade 3; } else if (passingLetterGrades.includes(grade)) { isPass true; } if (isPass) { passCount; studentsWhoPass.push(grade); } else { failCount; } } console.log(及格 ${passCount} 人不及格 ${failCount} 人);挑战三成绩换算到统一数字体系作业给出的换算基准为A5, B4, C3其余等级依次类推A-/B-/C-可视需求按 0.5 档折算。可以结合if...else链或课程中讲解的switch语句实现function letterToNumber(letterGrade) { switch (letterGrade) { case A: return 5; case A-: return 4.5; case B: return 4; case B-: return 3.5; case C: return 3; case C-: return 2.5; default: return null; // 非法字母 } }课程正文指出当需要把一个值与多个离散选项逐一比对时switch比一长串if...else结构更清晰——成绩换算正是它的典型适用场景。七、评分标准与提交清单作业附带了 Rubric 评分表从四个维度自评你的实现标准优秀 (4)熟练 (3)发展中 (2)起步 (1)功能程序正确识别两套体系的所有及格成绩程序可用但存在小问题或边界缺陷程序部分可用但有逻辑错误程序存在重大错误或无法运行代码结构代码干净、组织良好if...else 逻辑正确结构良好条件语句使用恰当结构可接受但组织上有问题结构差逻辑难以理解概念运用高效使用比较运算符、逻辑运算符与条件语句概念使用良好略有欠缺使用了部分概念但缺少关键要素概念运用有限问题解决对问题理解清晰解法优雅解题思路良好逻辑扎实思路一般存在一定困惑思路不清晰未体现理解提交前自查清单源自作业 Submission Guidelines用题目给出的示例充分测试代码为代码添加注释尤其要解释条件语句的判定逻辑验证输出与预期一致[A, B-, 4, 5]考虑空数组、意外数据类型等边界情况。八、小结通过这个学生成绩处理器你把课程中零散的知识点串联成了一条完整的解题链路用typeof识别数据类型 → 用比较运算符量化判定 → 用逻辑运算符组合多条件 → 用if...else分流执行 → 用数组方法收集结果。这套先分流、再决策的思维模式将直接迁移到后续课程如银行应用、太空射击游戏、聊天应用中任何需要条件判断的场景。如果还想继续深化可以尝试把for循环换成for...of或forEach或按课程末尾的 GitHub Copilot Agent ChallengeMaking Decisions 课程正文 中的成绩计算器扩展任务进一步练习if...else、switch、逻辑运算符与三元表达式的综合运用。【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考