-选择结构与代码块)
点此查看所有教程、项目、源码导航
文章目录
- 1. 背景
- 2. 基础 if else 条件判断
- 3. 缩进规范
- 4. if else 的作用范围陷阱
- 5. 代码块 {}
- 6. 选择结构搭配代码块
- 7. 编码规范建议
- 8. 小结
1. 背景
上一篇我们讲解了 JS 语言最基本的结构 —— 顺序结构，JS 代码在一般情况下，会自上而下，依次执行每一行代码。
但是，正如生活肯定不会总是一帆风顺，总是充满着机遇和选择。我们的程序也不会一直平淡地执行，很多时候需要根据不同的情况做出不同的选择。为了模拟现实社会中不同情形下的选择，JS 语言提供了选择结构。
当然，选择是如此重要，所以不仅 JS 语言，其他高级语言如 C/C++/Java/Python/C# 等，也都具备选择结构，而且不约而同使用了同一个关键字：if。
2. 基础 if else 条件判断
JS 语言的选择结构依据if条件判断语句实现，格式如下：
if(条件)语句1;else语句2;是不是很容易看懂？当条件成立时，会运行语句 1，否则运行语句 2。
那么如何算是条件成立，其实就是看条件的值，如果是布尔值 true，则为成立，如果是布尔值 false，则不成立。
我们来看一个例子，根据年龄判断一个人是否成年：
varage=30;if(age>=18)alert("已成年");elsealert("未成年");运行结果如下：
分析这段程序，首先给 age 赋值 30，然后判断age>=18，判断结果为 true，所以执行 if 后面的代码即alert("已成年");，网页弹窗显示已成年。
3. 缩进规范
首先注意，下面两种写法都是语法正确的：
//写法1varage=30;if(age>=18)alert("已成年");elsealert("未成年");// 写法2varage=30;if(age>=18)alert("已成年");elsealert("未成年");但是放眼望去，想必也能发现写法 2 的代码更加条理，也更容易理解，这是因为写法 2 合理利用了缩进。
习惯上，我们可以将 if、else 后面代码缩进一个 tab 键（一般是 4 个空格）的距离，这样看起来代码更加美观。如果此时使用的是 VSCode 编辑器的话，可以直接按【Alt+Shift+F】，编辑器会自动将代码格式化为标准的缩进距离。
4. if else 的作用范围陷阱
这里有一个非常容易踩坑的知识点：if、else 语句的影响力，默认只限于紧跟它之后的一行代码。
看下面这段示例：
varage=30;if(age>=18)alert("已成年");//会执行该行代码elsealert("未成年");alert("需要保护");//会执行该行代码我们的本意是，当用户 age>=18，则显示已成年；否则显示未成年、然后再显示需要保护。
但代码实际运行后，哪怕满足成年条件弹出 “已成年”，最后也一定会弹出 “需要保护”。
原因就是alert("需要保护");并不受 else 控制，它独立于 if-else 结构，不管条件判断是否成立，这一行都会执行。
我们调整格式，就能一眼看清它的归属关系：
varage=30;if(age>=18)alert("已成年");//条件判断成立时执行elsealert("未成年");//条件判断不成立时执行alert("需要保护");//不归if、else管理，不论条件判断是否成立，都会执行5. 代码块 {}
想要让 if 或者 else 同时控制多行代码，就要用到代码块。
JS 中，使用一对大括号{}包裹起来的内容，就是一个代码块。
{vara=1;varb=2;varc=a+b;}在单纯的顺序结构里面，代码块单独使用没有特殊效果，代码依旧自上而下执行。但是搭配选择结构的时候，代码块就发挥关键作用了：大括号内部的所有代码，会被当成一个整体。
6. 选择结构搭配代码块
我们可以在 if、else 后面加上大括号，写成代码块形式，这样 if、else 的控制范围就可以覆盖大括号里面的全部多行代码。
改写上面年龄的例子：
varage=30;if(age>=18){alert("已成年");}else{alert("未成年");alert("需要保护");}由于 if、else 后面都使用了代码块，所以它俩的影响范围会覆盖其后代码块中的全部代码。
当上面代码执行时，由于age>=18成立，所以执行 if 后面代码块的内容，而 else 后面代码块中的两行代码属于 else 的控制范围，所以不会执行。
7. 编码规范建议
在程序员业界有一条普遍共识：优先使用代码块。哪怕 if、else 里面仅仅只有一行代码，也强烈建议写上大括号包裹起来。
这样做可以避免后续新增代码时，不小心踩中作用范围的 bug，代码可读性也更强。
8. 小结
生活中处处存在选择，小到选择衣服、选择食品，大到选择学校、选择城市、选择工作；同样，程序中也是处处需要选择，需要通过条件判断语句 if 实现选择。
而代码块{}是配合 if、else 的重要工具，用来批量管理多条语句，明确代码的归属范围，养成加上大括号的好习惯，可以避开很多隐蔽 bug。
