JavaScript if...Else 语句

JavaScriptif...else语句学习笔记if...else语句是 JavaScript 中最基本的流程控制结构。它允许程序根据特定条件的真假true或false来决定执行哪一段代码。1. 基础语法结构1.1 单分支if只有当条件为true时才执行代码块。if(条件表达式){// 条件为 true 时执行的代码}1.2 双分支if...else条件为true执行if块为false执行else块。if(条件表达式){// 条件为 true 时执行}else{// 条件为 false 时执行}1.3 多分支if...else if...else用于处理多个互斥的条件。if(条件1){// 条件 1 为 true 时执行}elseif(条件2){// 条件 1 为 false 且 条件 2 为 true 时执行}else{// 以上条件都为 false 时执行}2. 条件表达式与“真值/假值”在if语句中括号内的表达式不需要一定是布尔值。JavaScript 会自动将其转换为布尔值进行判断。2.1 假值 (Falsy)以下 6 个值在条件判断中会被视为falsefalse0(数字零)-0和0n(BigInt 零)或(空字符串)nullundefinedNaNif(0){console.log(不会执行);}if(){console.log(不会执行);}if(null){console.log(不会执行);}if(NaN){console.log(不会执行);}2.2 真值 (Truthy)除了上述 7 个假值外所有其他值都是真值。非空字符串0,false, (空格)非零数字-1,0.1对象和数组{},[],null(注意对象本身是真值即使内容为空)函数function(){}if(0){console.log(执行字符串0是真值);}if([]){console.log(执行空数组是真值);}if({}){console.log(执行空对象是真值);}3. 代码块与花括号{}最佳实践即使代码块只有一行也强烈建议始终使用花括号{}。原因防止后续添加代码时忘记加花括号导致逻辑错误Dangling Else 问题。// ❌ 不推荐 (容易出错)if(condition)doSomething();doAnotherThing();// 这行无论条件如何都会执行// ✅ 推荐if(condition){doSomething();doAnotherThing();}4. 常见应用场景与示例4.1 范围判断 (成绩分级)letscore85;letgrade;if(score90){gradeA;}elseif(score80){gradeB;}elseif(score70){gradeC;}elseif(score60){gradeD;}else{gradeF;}console.log(成绩等级${grade});// 成绩等级B注意else if的顺序很重要。一旦某个条件满足后续的else if和else将不再执行。4.2 多重条件组合 (,||,!)letage25;lethasLicensetrue;letisDrunkfalse;// 逻辑与必须同时满足if(age18hasLicense!isDrunk){console.log(可以合法驾驶);}else{console.log(禁止驾驶);}// 逻辑或满足其一即可letisWeekendtrue;letisHolidayfalse;if(isWeekend||isHoliday){console.log(今天休息);}4.3 空值检查与默认值letuserInput;// 用户输入为空字符串letnameuserInput;if(!name){// 空字符串是假值进入 ifnameGuest;}console.log(name);// Guest// 或者使用逻辑运算符简化 (见下文)4.4 嵌套if(慎用)当条件具有层级关系时使用但嵌套过深会降低可读性。letuser{isLoggedIn:true,role:admin};if(user.isLoggedIn){if(user.roleadmin){console.log(欢迎管理员);}else{console.log(欢迎普通用户);}}else{console.log(请先登录);}// 优化合并条件if(user.isLoggedInuser.roleadmin){console.log(欢迎管理员);}elseif(user.isLoggedIn){console.log(欢迎普通用户);}else{console.log(请先登录);}5. 高级技巧与优化5.1 卫语句 (Guard Clauses)提前返回减少嵌套层级提高代码可读性。// ❌ 嵌套过深functionprocessOrder(order){if(order){if(order.items.length0){if(order.payment){// 处理逻辑return处理成功;}else{return未支付;}}else{return订单为空;}}else{return订单不存在;}}// ✅ 卫语句 (提前返回)functionprocessOrder(order){if(!order)return订单不存在;if(order.items.length0)return订单为空;if(!order.payment)return未支付;// 处理逻辑return处理成功;}5.2 三元运算符替代简单if...else当if...else只是用来赋值时可以使用三元运算符。// if...elseletstatus;if(age18){status成年;}else{status未成年;}// 三元运算符 (更简洁)letstatusage18?成年:未成年;注意如果逻辑复杂包含多行代码或副作用请使用if...else不要强行使用三元运算符。5.3switch语句的替代当需要判断同一个变量的多个离散值时switch通常比一连串的if...else if更清晰。// if...else ifletday3;letdayName;if(day1)dayName周一;elseif(day2)dayName周二;elseif(day3)dayName周三;elsedayName其他;// switch (更清晰)letdayName;switch(day){case1:dayName周一;break;case2:dayName周二;break;case3:dayName周三;break;default:dayName其他;}6. 常见陷阱与注意事项6.1 赋值与 相等混淆这是新手最容易犯的错误。letx5;// ❌ 错误这是赋值操作x 变成了 10且表达式结果为 10 (真值)if(x10){console.log(这行会执行因为 10 是真值);}// ✅ 正确比较操作if(x10){console.log(这行不会执行);}技巧将常量写在左边Yoda 条件虽然现代编辑器会报错但有助于防止此错误。if (10 x)- 如果误写成语法会报错。6.2 忘记break(在switch中)虽然这是switch的问题但常与if混淆。在switch中忘记break会导致“穿透”执行。6.3 浮点数比较leta0.10.2;letb0.3;if(ab){// false! 因为 0.30000000000000004 ! 0.3console.log(相等);}// 正确做法使用误差范围if(Math.abs(a-b)0.000001){console.log(近似相等);}6.4 对象/数组的真值陷阱letemptyObj{};letemptyArr[];if(emptyObj){console.log(对象是真值);}// 执行if(emptyArr){console.log(数组是真值);}// 执行// 判断对象是否为空需要专门的方法if(Object.keys(emptyObj).length0){console.log(对象为空);}7. 总结速查表场景推荐写法说明简单判断if (cond) { ... }单分支二选一if (cond) { ... } else { ... }双分支多选一if...else if...else范围判断或复杂逻辑多值匹配switch...case离散值匹配比if...else if清晰赋值const x cond ? a : b三元运算符提前返回if (!cond) return;卫语句减少嵌套空值检查if (!val)检查null,undefined,0,严格检查if (val ! null)检查null或undefined(宽松相等)8. 实战练习题目编写一个函数checkTicket(age, hasDiscount, isMember)规则如下如果年龄小于 3 岁免费。如果年龄大于 60 岁半价。如果是会员且有折扣打 8 折。否则全价。functioncheckTicket(age,hasDiscount,isMember){if(age3){return免费;}elseif(age60){return半价;}elseif(isMemberhasDiscount){return8折;}else{return全价;}}console.log(checkTicket(2,false,false));// 免费console.log(checkTicket(65,false,false));// 半价console.log(checkTicket(25,true,true));// 8折console.log(checkTicket(25,false,true));// 全价掌握if...else及其变体是编写逻辑严密程序的基础。记住代码的可读性往往比代码的简洁性更重要尤其是在处理复杂逻辑时。