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