企业官网建设流程全解析

点此查看所有教程、项目、源码导航

1. 背景

上一篇我们学习了基础的if else，了解了选择结构的作用，也搞懂了代码块大括号对语句作用范围的控制。

但if else并不是只有 “二选一” 这一种写法。在实际开发里，业务需求五花八门：有的时候条件满足才做事，不满足就什么都不执行；有的时候是二分支，满足和不满足各自一套逻辑；还有很多场景是多分支，需要对多种区间、多种情况分别处理。

本篇我们就系统梳理 JS 选择结构的三种常用写法：单 if 分支、if-else 双分支、if-else if-else 多分支，同时讲清楚它们的执行逻辑、适用场景和容易踩的坑。

2. 单分支：只有 if

单分支结构，只有if，没有配套的else。它的特点是：条件成立就执行内部代码块，条件不成立的时候，直接跳过这一段，继续往下走后面的同步代码，不会有额外分支逻辑。

举个例子，我们只给未成年人做提示，成年人不需要任何弹窗：

varage=17;if(age<18){alert("未成年人");}

如果把 age 修改成 20，age < 18结果为 false，大括号里面的代码直接跳过，不会弹出任何窗口，程序继续执行 if 后面其他代码。

单 if 适合这种 “满足条件才处理，不满足无操作” 的场景。

这里要注意一个关键点：单 if 不会自动兜底，没有默认执行的逻辑。如果需求是不管条件真假都要有对应处理，那就不适合只用单 if。

3. 双分支：if + else

if + else 属于二选一的分支结构，是互斥的两条路线。条件成立，走 if 内部代码；条件不成立，一定会走 else 里面的代码，二者有且只有一个分支会执行，不存在两个分支同时执行，也不会两个都跳过。

我们继续用年龄判断的例子：

varage=17;if(age<18){alert("未成年人");}else{alert("已成年");}

age < 18结果为 true，执行 if 里的弹窗；如果 age 改成 20，条件为 false，就会进入 else 分支。

适合场景：一件事情只有两种对立情况，非此即彼。比如登录判断账号密码是否正确、判断数字是奇数还是偶数。

4. 多分支：if + else if + else

当我们的情况超过两种，就需要用到else if串联多个判断条件，实现多分支判断。

我们以分数评级举例：小于 60 不及格，60~79 及格，80~89 良好，90 及以上优秀。

varscore=85;if(score<60){alert("不及格");}elseif(score<80){alert("及格");}elseif(score<90){alert("良好");}else{alert("优秀");}

这个结构有一个非常核心的执行规则：从上到下依次判断，只要某一个条件为 true，执行对应代码块之后，整个 if 分支链直接结束，后面所有 else if、else 都不再判断、不再执行。

我们拆解上面 score=85 的执行流程：
第一步：判断score < 60，85<60 不成立，跳过这个分支；
第二步：判断score < 80，85<80 不成立，继续往下；
第三步：判断score < 90，85<90 成立，执行弹窗 “良好”；
执行完成，整个选择结构直接结束，最后的 else 不会进入。

这里有一个高频易错点：条件的顺序不能随便乱写。
如果我们把判断score < 90写到score < 80的前面，代码逻辑直接出错。
举一个错误示范：

varscore=70;if(score<60){alert("不及格");}elseif(score<90){alert("良好");}elseif(score<80){alert("及格");}else{alert("优秀");}

70 满足小于 90，直接进入 “良好” 分支，永远不会走到score < 80，评级完全错乱。
所以写 else if 的时候，条件一定要按照区间顺序，从小到大或者从大到小依次排列。

另外末尾的 else 是兜底分支：前面所有 else if 条件全都不满足的时候，才会执行最后的 else。这个 else 不是强制必须写的，可以根据需求决定要不要兜底。

5. 三种分支结构对比与选型思路

单 if：只有满足条件才执行，无兜底，适合可选操作；
if else：两个互斥分支，二选一，适合只有两种结果的判断；
if else if else：多个条件依次判断，多选一，适合多区间、多种分类场景。

很多新手会分不清什么时候用 else if，什么时候单独写多个独立 if。这里补充一个重点区别：
独立写多个 if，它们之间互不影响，每一个 if 都会单独判断；而 else if 是串联互斥结构，只要命中一条，剩下全部跳过。

看这个对比示例：

// 多个独立if，互不干扰，可能同时命中varscore=85;if(score>=60){console.log("过线");}if(score>=80){console.log("高分");}

85 会同时触发两句打印。
而 else if 链式结构，同一时间只会命中一条分支。

6. 小结

这三种 if 的写法，覆盖了开发中绝大多数条件判断场景，是选择结构里最基础、最高频的语法。

记住几个核心要点：

1. 单 if：条件成立才执行，不成立直接跳过，没有兜底逻辑；
2. if else：两个分支互斥，有且仅有一个分支执行；
3. if else if else：从上往下依次判断，命中即终止，条件顺序非常关键；
4. else if 链式分支 和 多个独立 if 不是一回事，独立 if 之间互不排斥，可以同时触发。