跟着 MDN 学JavaScript day_13：在代码中做决定——条件语句

引言在编程的世界里代码并非总是墨守成规地自上而下逐行执行。真正的程序活力源于其根据不同情况做出不同反应的能力。这就是我们今天要深入探讨的核心——JavaScript 中的条件语句。它们赋予了代码智能决策的能力让静态的脚本能够动态地响应各种输入和状态变化。无论是游戏角色的生命值归零还是天气应用根据时段切换背景其背后都是条件语句在发挥作用。一、你只需要一个条件条件语句的哲学根植于我们日常的逻辑判断。人类无时无刻不在做决定从早餐吃一片面包还是两片这样的小事到选择哪个职业方向这样的人生大事。每一个决定都基于一个或多个条件的评估并导向不同的行为路径。JavaScript 中的条件语句正是为了在代码中模拟这种“如果…就…否则…”的决策过程。其核心思想非常朴素程序会测试一个表达式的真假然后根据这个结果选择执行两个或多个代码块中的一个。这个被测试的表达式我们称之为条件。它可以是一个简单的布尔值也可以是一个利用比较运算符组合而成的复杂逻辑。一旦你掌握了这个结构你的代码就从一条单行道瞬间变成了四通八达的交通网络能够自如地处理各种可能性。二、if…else 语句if...else语句是 JavaScript 中最基础、最核心的条件结构也是你编写决策代码时最常用的工具。2.1 基本语法最基本的if...else语法非常直观。它从关键字if开始后面紧跟一对圆括号括号里放置一个会被求值为布尔值true或false的条件表达式。紧接着是一对花括号包含了当条件为true时要执行的代码。之后是可选的else关键字和另一对花括号其中包含的代码只会在条件为false时执行。if (条件) { 条件为 true 时执行的代码 } else { 条件为 false 时执行的代码 }这种结构的可读性极强它直接映射了人类的思维“如果if这个条件成立就执行A计划否则else就执行B计划”。几个关键要点else语句块并非强制要求如果省略else那么当条件为false时程序会直接跳过if的花括号继续执行后续代码无论条件如何if块之外的代码都会执行这一点在设计逻辑时必须明确虽然从语法上说当if或else中只有一行代码时花括号可以被省略但这通常被视为一种不良实践会降低代码的可读性和可维护性建议始终使用花括号。2.2 一个真实的示例让我们通过一个生活化的例子来理解它。想象一下父母为了激励孩子做家务可能会说“如果你帮我去购物我就给你十块钱零花钱否则你只能得到五块。” 下面这段代码生动地描绘了这个场景letshoppingDonefalse;letchildsAllowance;if(shoppingDonetrue){childsAllowance10;}else{childsAllowance5;}在这段代码中变量shoppingDone的值是一个布尔值false它直接决定了childsAllowance的结果。因为条件shoppingDone true的求值结果是false所以程序会跳过if后面的代码块转而执行else中的代码将childsAllowance赋值为5。这清晰地展示了如何通过改变变量的状态来控制程序流向不同的逻辑分支。三、else if 的链式判断现实世界的决策往往不是非黑即白的二元选择而是存在多种互斥的可能性。else if子句正是为此而生它允许你将多个条件链接起来从前到后依次进行测试。语法结构if(条件1){// 代码块1}elseif(条件2){// 代码块2}elseif(条件3){// 代码块3}else{// 兜底代码块}执行规则程序会按顺序评估每一个条件一旦遇到一个结果为true的条件就执行它对应的代码块执行完毕后立即跳出整个if...else if...else结构不再继续检查后续条件只有当所有前置的if和else if条件都为false时最后的else里的代码才会执行。你可以根据需要添加任意数量的else if语句。最后的else块变成了一个兜底选项这在实际应用中非常实用——例如一个天气应用根据用户选择的不同天气类型晴天、雨天、雪天、阴天显示不同的建议信息当用户未选择或选择了无效选项时通过最后的else将提示信息清空提供了一个非常友好的用户交互体验。四、比较运算符的细节条件是条件语句的灵魂而塑造灵魂的工具正是比较运算符。常用比较运算符一览运算符含义说明严格相等值和类型都相等才为true!严格不相等值和类型任一不相等即为true小于左边值小于右边值为true大于左边值大于右边值为true小于等于左边值小于或等于右边值为true大于等于左边值大于或等于右边值为true建议和!是我们应该默认使用的选择因为它们同时比较值和数据类型能避免类型转换带来的意外行为。真值Truthy与假值Falsy在编写条件时有一个极为常见且强大的技巧值得注意JavaScript 会自动将非布尔值转换为布尔值即真值或假值。假值Falsy——以下值在条件判断中会被当作false处理falseundefinednull0NaN空字符串真值Truthy——除此之外的几乎所有值都会被当作true。这意味着你可以直接在条件括号里写一个变量名来测试它是否存在或是否为真值if(cheese){console.log(有奶酪);}这行代码会检查cheese变量是否有值——只要它不是那六种假值之一条件就成立。这在检查用户输入或验证数据是否存在时非常方便。五、嵌套 if…else条件判断可以像套娃一样层层嵌套也就是在一个if或else的代码块内部再编写另一个if...else语句。这种结构使你能够处理更复杂、更精细的决策树。例如在天气应用中你不仅想根据天气类型给出建议还想在晴天时根据温度的高低给出更具体的建议if(choicesunny){if(temperature86){para.textContent外面风和日丽非常适合出游。;}else{para.textContent外面超级热记得涂防晒。;}}注意尽管代码逻辑上相互嵌套但每一个if...else语句本身在语法上都是一个独立的、完整的结构。过度使用嵌套可能会导致代码缩进层次过深变得难以阅读和维护——这时候我们接下来要探讨的逻辑运算符就能提供一种更优雅的解决方案。六、逻辑运算符与、或、非逻辑运算符是简化复杂条件、减少不必要的嵌套、让你的代码逻辑表达力更强的利器。它们能将多个简单的比较条件组合成一个复杂的复合条件。6.1 逻辑与当且仅当它所连接的所有子条件都为真时整个复合条件的结果才为真。任何一个子条件为假整个表达式立即短路求值为假。if(choicesunnytemperature86){para.textContent外面风和日丽非常适合出游。;}这行代码完美地将之前嵌套的例子展平——只有当是晴天并且温度低于86度这两个条件同时满足时才会执行风和日丽的提示。6.2 逻辑或||只要它所连接的任何一个子条件为真整个表达式的结果就为真。只有当所有子条件都为假时结果才为假。if(iceCreamVanOutside||houseStatuson fire){console.log(你应该赶紧离开);}只要冰淇淋车在外面或者房子着火了任一情况发生就会建议你离开。6.3 逻辑非!它只是一个前缀感叹号!用于对后面的布尔值进行取反——真的变成假的假的变成真的。if(!isLoggedIn){console.log(请先登录。);}你可以随意组合这些逻辑运算符并用圆括号清晰地界定优先级构建出满足各种复杂业务规则的判断条件。6.4 逻辑或的经典陷阱 ⚠️这是一个使用逻辑或时的经典错误// ❌ 错误写法if(x5||7||10||20){// 这个条件永远为 true}你内心的想法可能是如果 x 等于 5、或 7、或 10、或 20 中的任何一个。但 JavaScript 会这样理解先评估x 5然后评估7——而7是一个真值所以整个逻辑或表达式会立即返回true条件永远成立10和20根本就没被检查。// ✅ 正确写法if(x5||x7||x10||x20){// 正确在逻辑或的每一侧都写出完整的比较表达式}这是从初学者到熟练者的必经之路上需要牢记的一个细节。七、switch 语句当你的决策逻辑是基于单个表达式的值进行多种可能性的匹配时if...else if链有时会显得冗长和重复。switch语句正是为这种场景设计的它提供了一种更结构化、更清晰的方式来处理这种多选一的分支。7.1 switch 语句的结构switch(表达式){case值1:// 当表达式 值1 时执行的代码break;case值2:// 当表达式 值2 时执行的代码break;case值3:// 当表达式 值3 时执行的代码break;default:// 当没有任何 case 匹配时执行的代码}各部分说明组成部分作用switch(表达式)需要评估的表达式程序会在case中寻找与它匹配的值case 值:一个可能的匹配项使用严格相等进行比较break强制退出整个switch块防止代码跌落到下一个casedefault:可选的兜底分支类似于if...else中的else7.2 switch 示例将天气预报应用改写为switch语句后代码结构变得一目了然switch(select.value){casesunny:para.textContent天气不错阳光明媚。;break;caserainy:para.textContent外面下雨记得带伞。;break;casesnowing:para.textContent正在下雪多穿点衣服。;break;caseovercast:para.textContent阴天灰蒙蒙的。;break;default:para.textContent;}与if...else if链相比switch语句在这种场景下的意图更加明确它强调了对单一变量多个可能值的分发。切记break的重要性不容忽视。忘记写break会导致代码意外地继续执行下一个case的代码——这种现象被称为跌落fall-through。虽然有时可以被巧妙利用但绝大多数时候它都是一个程序缺陷。default块在逻辑上不需要break因为它已经是最后一个分支了。八、三元运算符三元运算符也叫条件运算符是 JavaScript 中唯一的、需要三个操作数的运算符。它为最简单的if...else赋值场景提供了一种极其简洁的内联式写法。8.1 基本语法condition?exprIfTrue:exprIfFalse首先评估condition如果结果为真 → 执行并返回?后面的exprIfTrue如果结果为假 → 执行并返回:后面的exprIfFalse8.2 基础示例// 使用 if...else —— 需要 5 行letgreeting;if(isBirthday){greeting生日快乐;}else{greeting早上好。;}// 使用三元运算符 —— 只需 1 行constgreetingisBirthday?生日快乐:早上好。;三元运算符的强大之处在于它不仅能返回值还能用来执行函数调用将整个流程控制浓缩在一个表达式里select.addEventListener(change,()select.valueblack?update(black,white):update(white,black));8.3 使用原则适合使用不适合使用简单的二选一赋值复杂的多条件嵌套内联表达式多行复杂逻辑函数调用分发需要else if的场景需要警惕的是过度嵌套或在过于复杂的逻辑中使用三元运算符会严重损害代码的可读性。因此它最适合用于简单的、在两个选择之间进行选择的赋值或执行场景。总结条件语句是程序逻辑的核心它打破了代码线性执行的束缚让程序能够感知环境、判断状态并做出相应的反应。知识点核心用途if...else二元决策最基本的条件分支else if多路分支链式判断互斥条件比较运算符构建条件的基础工具、!、、等真值/假值理解非布尔值在条件中的转换行为、||、!组合多个条件减少嵌套switch基于单一变量的多路分发结构更清晰三元运算符简化简单的二选一赋值场景我们从最基本的if...else起步掌握了二元决策通过else if处理了多路分支借助比较运算符与逻辑运算符锻造了构建复杂条件的工具箱然后遇到了switch语句它为基于单一变量的多路分发提供了更清晰的结构最后我们见识了三元运算符在简化简单逻辑上的优雅与高效。熟练运用这些结构是你从编写脚本迈向构建真正交互式应用程序的关键一步。随着后续对循环的学习你将能够将决策能力与重复执行能力结合起来真正释放 JavaScript 的强大潜能。