基于 Web-Dev-For-Beginners 的条件逻辑实战：用 JavaScript 处理双评分系统的学生成绩

基于 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是数字成绩且>= 3；
• 1和2是数字成绩且< 3，因此不及格。

三、知识准备：本实战用到的 JavaScript 决策工具

在动手编码前，先回顾本任务会用到的基础工具（全部出自 Making Decisions 课程正文）：

1.typeof运算符：判断成绩类型

这是本任务的第一步关键——数组里混着数字和字符串，必须先用typeof分流：

typeof 5 === 'number' // true typeof 'A' === 'number' // false typeof 'A' === 'string' // true

2. 比较运算符：产出布尔值

比较运算符返回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]; // 你的解法应能处理任意合法成绩组合

建议在浏览器控制台逐组验证，并额外自查以下边界情况：

1. 空数组：allStudents = []时循环不执行，studentsWhoPass保持[]，程序不应报错；
2. 边界成绩：数字3（刚好及格）、字母'C-'（最后一个合法字母成绩）应被正确收录；
3. 意外数据类型：如null、undefined、布尔值混入数组时，typeof分流后两套规则都匹配不到，会被安全跳过；
4. 大小写：字符串判断对大小写敏感，'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} 人`);

挑战三：成绩换算到统一数字体系

作业给出的换算基准为A=5, B=4, C=3（其余等级依次类推，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）：

1. 用题目给出的示例充分测试代码；
2. 为代码添加注释，尤其要解释条件语句的判定逻辑；
3. 验证输出与预期一致：['A', 'B-', 4, 5]；
4. 考虑空数组、意外数据类型等边界情况。

八、小结

通过这个"学生成绩处理器"，你把课程中零散的知识点串联成了一条完整的解题链路：用typeof识别数据类型 → 用比较运算符量化判定 → 用逻辑运算符组合多条件 → 用if...else分流执行 → 用数组方法收集结果。这套"先分流、再决策"的思维模式，将直接迁移到后续课程（如银行应用、太空射击游戏、聊天应用）中任何需要条件判断的场景。

如果还想继续深化，可以尝试把for循环换成for...of或forEach，或按课程末尾的 GitHub Copilot Agent Challenge（Making 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