Web-Dev-For-Beginners 实战用 JavaScript 条件逻辑掌控程序分支——布尔、比较运算符、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本教程源自 Web-Dev-For-Beginners 开源课程第 2 单元「JavaScript 基础」的第 3 课《Making Decisions》面向零基础开发者系统讲解 JavaScript 的条件逻辑从布尔值、比较运算符出发到if/if..else/switch分支结构再到、||、!逻辑运算符与三元表达式。学完本篇你将掌握用代码评估状况、做出选择、控制执行路径的完整能力能够写出可对用户输入与运行环境做出智能响应的动态程序。本课原图由 Tomomi Imura 绘制的 Sketchnote 配图系统梳理了本课全部决策结构。课程定位12 周 Web 开发入门之旅的第三课在 Web-Dev-For-Beginners 课程体系中JavaScript 是Web 的语言。第 2 单元《Introduction to JavaScript》共四课按序递进变量与数据类型函数与方法用 JavaScript 做决策本课数组与循环为什么决策如此关键正如查尔斯·巴贝奇的分析机Analytical Engine被设计为根据条件执行不同的操作序列现代 JavaScript 程序也需要依据千变万化的运行环境做出选择。这种分支与决策能力正是把静态代码转化为响应式、智能化应用的分水岭导航系统如何选出最快路线、恒温器如何决定何时开启暖气其底层都是同一套决策机制——条件逻辑。布尔值一切决策的基石在探索决策之前先回顾上一课中的布尔值。布尔Boolean以英国数学家、哲学家与逻辑学家乔治·布尔George Boole1815–1864命名代表二进制状态——只有true或false没有歧义、没有中间地带。这些二值构成了全部计算逻辑的基础程序中每一个决策最终都会归约为一次布尔求值。创建布尔变量非常直观let myTrueBool true; let myFalseBool false;这行代码创建了两个携带显式布尔值的变量。理解这一点后真正的核心问题是日常开发中几乎不会手动写死布尔值而是通过求值生成布尔值——这个数比那个数大吗这两个值相等吗答案就是下一步要讲的比较运算符。比较运算符把问题变成 true / false比较运算符comparison operators用来比较两个值并根据操作数之间的关系返回布尔结果。下表是课程中给出的完整运算符清单符号描述示例小于比较两个值若左侧值小于右侧值则返回布尔true5 6 // true小于或等于比较两个值若左侧值小于或等于右侧值则返回true5 6 // true大于比较两个值若左侧值大于右侧值则返回true5 6 // false大于或等于比较两个值若左侧值大于或等于右侧值则返回true5 6 // false严格相等比较两个值仅当左右值相等且数据类型相同时返回true5 6 // false!不相等返回与严格相等运算符相反的结果5 ! 6 // true几个关键直觉直接看例子即可体会5 6返回true因为 5 确实小于 610 10返回false因为数字 10 与字符串 10 虽然数值上相同但数据类型不同hello ! world返回true因为两个字符串确实不相等。专业提示Pro tip除非你确实需要类型转换否则相等性判断一律使用与!。这能避免大量因隐式类型转换引发的意外行为。为什么优于课程中的自测问题直击本课最重要的坑点为什么严格相等通常比宽松相等更受推荐——因为会先做类型转换再比较例如5 5返回true而要求类型与值都相同5 5返回false行为更可预测你能预测5 5与5 5各自返回什么吗——前者false后者true!与!的区别是什么——与/同理!是严格不相等类型与值都参与判断!是宽松不相等会先做类型转换。从执行机制看严格相等/!会同时检查类型与值不进行任何类型转换而关系运算符、、、在比较时会尝试将操作数转换为数字因此特别适合做区间与数值大小判断。这也是本课反复强调比较运算符的返回值就是布尔值的原因。if 语句代码里的一次提问if语句就像在代码中提出一个问题如果这个条件为真那么就做这件事。它是 JavaScript 中做决策最重要、最常用的工具。if (condition) { // 条件为真执行此代码块 }条件写在圆括号内若求值为trueJavaScript 执行花括号中的代码若为false则整块跳过。条件通常由比较运算符构造看一个贴合本课的实战例子let currentMoney 1000; let laptopPrice 800; if (currentMoney laptopPrice) { // 条件为真执行此代码块 console.log(Getting a new laptop!); }因为1000 800求值为true花括号内的代码被执行控制台输出 Getting a new laptop!。若把currentMoney改为 500则条件为假代码块被整体跳过程序静默继续。if..else 语句给程序一条备选路径如果希望条件为假时程序做点别的就用else——它像一份备用计划如果这个条件不成立那就做另一件事。let currentMoney 500; let laptopPrice 800; if (currentMoney laptopPrice) { // 条件为真执行此代码块 console.log(Getting a new laptop!); } else { // 条件为假执行此代码块 console.log(Cant afford a new laptop, yet!); }由于500 800为falseJavaScript 跳过第一个块、执行else块控制台输出 Cant afford a new laptop, yet!。关键洞察if..else保证恰好有一条路径被执行——它确保程序对任何条件都有回应不会出现无路可走的空白分支。本课的自测问题很适合动手验证当currentMoney恰好等于laptopPrice时走哪个分支答案是走if分支因为包含相等情况。还可以把这段逻辑扩展到多个价格档位自然过渡到下一节的switch。switch 语句多分支的清晰结构当需要把一个值与多个离散选项逐一比对时虽然可以串起一串if..else但代码会迅速变得笨重。switch语句提供了更干净的结构——它很像早期电话交换机中的机械切换系统一个输入值决定执行走哪条特定通路。switch (expression) { case x: // 代码块 break; case y: // 代码块 break; default: // 代码块 }执行规则如下JavaScript只对表达式求值一次依次检查每个case寻找匹配项找到匹配后执行对应代码块break告诉 JavaScript 停止并退出 switch若所有case都不匹配则执行default块如果有。课程给出了星期几的完整示例// 使用 switch 语句根据数字输出星期几 let dayNumber 2; let dayName; switch (dayNumber) { case 1: dayName Monday; break; case 2: dayName Tuesday; break; case 3: dayName Wednesday; break; default: dayName Unknown day; break; } console.log(Today is ${dayName});此例中dayNumber为2匹配到case 2将dayName设为 Tuesday 后break跳出最终控制台输出 Today is Tuesday。围绕 switch 的三个自测问题是理解其边界的关键忘记break会发生什么—— 程序会贯穿fall-through继续执行下一个case的代码直到遇到break或 switch 结束这常导致意外输出何时用switch而非多个if..else—— 当比较的是同一个变量与多个特定离散值时用switch当涉及区间判断或复杂条件如 60这种范围时用if..else为什么default仍然有用—— 即使你自认为覆盖了所有可能值default仍可作为兜底处理未来数据变化或脏数据避免静默无输出。最佳实践switch擅长单变量对多值if-else擅长区间检查与复合条件。选对结构代码的可读性与可维护性都会显著提升。逻辑运算符组合多个条件复杂决策往往需要同时评估多个条件。正如布尔代数允许数学家组合逻辑表达式编程语言用逻辑运算符把多个布尔条件连接起来符号描述示例逻辑与AND比较两个布尔表达式仅当两侧都为真时返回 true(5 3) (5 10) // 两侧都为真返回 true\|\|逻辑或OR比较两个布尔表达式只要至少一侧为真即返回 true(5 10) \|\| (5 10) // 一侧为假、另一侧为真返回 true!逻辑非NOT返回布尔表达式的相反值!(5 10) // 5 不大于 10所以 ! 使其为 true组合规律一目了然AND两个条件必须同时为真OR||至少一个条件为真即可NOT!把真翻成假、假翻成真。真实世界的映射也很直观年龄 18 持有驾照两个条件都满足才可驾车、isWeekend || isHoliday任一是真就休息、!isLoggedIn未登录时执行引导逻辑。用逻辑运算符做真实决策打折笔记本示例把上述运算符组合起来就得到课程中的现实版决策场景——用||判断按原价买不起、但打折后买得起let currentMoney 600; let laptopPrice 800; let laptopDiscountPrice laptopPrice - (laptopPrice * 0.2); // 打 8 折后的笔记本价格 if (currentMoney laptopPrice || currentMoney laptopDiscountPrice) { // 条件为真执行此代码块 console.log(Getting a new laptop!); } else { // 条件为假执行此代码块 console.log(Cant afford a new laptop, yet!); }执行过程先算出 20% 折扣价640再判断现有资金是否覆盖原价或折后价。由于600 800为假但600 640也为假——注意这里课程的表述需要谨慎理解严格按给定数值计算600 并不满足 640 的折扣门槛条件整体为假会输出 Cant afford a new laptop, yet!。这正是逻辑运算符的实用价值改一个变量值程序就走不同分支。你可以把currentMoney改为650亲手验证||的只要一侧为真即真。短路求值short-circuit evaluation课程特别强调一个性能要点JavaScript 采用短路求值short-circuit evaluation。在A B中若A为假B根本不会被求值结果已确定为假在A || B中若A为真B也不会被求值结果已确定为真。利用这一点可以把可能抛错或代价高昂的表达式放在靠后位置也可以写出安全的守卫语句如if (user user.isActive)防止访问不存在的属性。这是从能用到会优化的关键认知升级。围绕逻辑运算符的自测题同样值得动手验证在A B中若A为假B会被求值吗——不会短路什么场景需要同时使用、||、!——例如非管理员且未登录或会话过期这类复合校验!user.isActive与user.isActive ! true有何区别——两者在布尔语义上近似但前者是纯逻辑非、直接翻转布尔值后者是严格比较当属性值可能为undefined等非布尔值时行为与语义会有微妙差异理解这一点有助于写出意图明确的代码。否定运算符!反过来想问题有时候以何时为不真来思考更自然。比如与其问用户已登录吗不如问用户未登录吗。感叹号运算符!帮你翻转逻辑if (!condition) { // 条件为假时执行 } else { // 条件为真时执行 }!就像在说……的反面true变falsefalse变true。它常用于提前返回守卫、置灰逻辑与布尔状态的切换场景。三元表达式一行代码的 if..else对于简单的条件赋值JavaScript 提供了三元运算符ternary operator——把条件表达式压缩成一行非常适合根据条件二选一赋值的场景。let variable condition ? returnThisIfTrue : returnThisIfFalse;它读起来像一句提问这个条件为真吗为真就用这个值否则用那个值。课程中的实例let firstNumber 20; let secondNumber 10; let biggestNumber firstNumber secondNumber ? firstNumber : secondNumber;这行代码的意思是firstNumber大于secondNumber吗是就把firstNumber赋给biggestNumber否就赋secondNumber。因此biggestNumber最终为20。三元运算符本质上就是传统if..else的简写。下面两种写法结果完全相同let biggestNumber; if (firstNumber secondNumber) { biggestNumber firstNumber; } else { biggestNumber secondNumber; }取舍建议三元运算符胜在简洁适合简单赋值、短路条件、内联决策与return语句而条件复杂时传统if..else结构更易读。二者的选择标准是可读性优先而非一味追求短。挑战从逻辑运算符到三元表达式课程布置的课后挑战非常精炼先用逻辑运算符写一个程序再用三元表达式重写一遍。这个练习迫使你同时掌握两种语法并思考哪种写法更符合自己的表达习惯——这正是形成个人代码风格的第一步。配套作业《Making Decisions: Student Grade Processor》则提供了完整的实战场景一所学校合并了两套评分体系数字制 1–5 分制及格线为 ≥3字母制 A、A-、B、B-、C、C-均为及格要求遍历学生数组、用typeof判断成绩类型、用比较运算符与逻辑运算符区分两套规则最终用.push()收集及格学生期望输出[A, B-, 4, 5]。这份作业把本课的if..else、比较运算符、逻辑运算符与数组方法串联成一个完整任务并附带了功能、代码结构、概念运用、问题解决四个维度的评分表Rubric是检验学习成效的黄金标准。仓库源码印证条件逻辑的真实应用条件逻辑不只是练习题本仓库中的真实项目就在大量使用它。以记忆翻牌游戏 MemoryGame.jsx 为例复合条件与区间判断创建游戏时用if (2 size size 10 (size % 2 0))校验棋盘尺寸必须为 2–10 之间的偶数——这正是本课逻辑运算符与关系运算符的组合运用相等性比较翻牌配对时用if (array[firstId].number array[secondId].number)判断两张牌数值是否相同——这正是严格相等的典型场景守卫式短路if (disabled || won) return;与if (flipped.length 0)等写法体现了用条件提前退出的编程习惯三元表达式渲染层{isFlipped(card.id) ? card.number : ?}与{won ? You Won! : }正是本课一行 if..else的直接落地。从源码结构可以推断条件逻辑是几乎所有交互式 Web 应用的骨架状态切换、输入校验、游戏胜负判定、UI 条件渲染处处离不开本课知识。这也印证了课程总结的核心观点——每个交互式应用都依赖条件逻辑对用户动作与变化的环境做出智能响应。复习路径与总结学完本课建议按以下路径巩固打开浏览器控制台DevTools Console逐条敲击本课的5 6、5 5、!(5 10)等表达式观察返回值改写currentMoney/laptopPrice/dayNumber等变量值验证不同分支的走向完成挑战逻辑运算符版 → 三元版与配套的 学生成绩处理器作业到下一课继续学习 数组与循环把条件逻辑与遍历能力结合写出真正完整的程序。若需深入可进一步查阅 JavaScript 官方运算符参考文档MDN Operators与社区运营的运算符速查表系统掌握本课之外的位运算、展开运算符等更多操作符家族。本课知识全景布尔逻辑true/false、比较结果、逻辑表达式→ 条件语句if、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），仅供参考