引入
我们知道,当今世界丰富多彩的代码世界如果用语句来区分的话,不外乎三种:
顺序语句
分支语句
循环语句
正是这简简单单的三类控制语句,构成了花样繁多的程序世界。
在之前的JavaScript快速入门学习中,我们了解的大部分是顺序语句,即从上到下依次运行。这期我们来看看第二个控制语句——分支,是怎么一回事
1.条件判断
和许多编程语言一样,JavaScript也使用if、else等字眼来表示条件判断,以此构成分支。
但不一样的是,JS需要用小括号把条件括起来,再用语句块的方式来执行该分支的内容——if () { ... } else { ... }
例如,一个很常见的根据年龄判断案例,可以用if
语句实现如下:
var age = 20; if (age >= 18) { // 如果年龄age >= 18为true,则执行if语句块 alert('adult'); } else { // 年龄age小于18执行else语句块 alert('teenager'); }
注意:其实{}是可以省略的,但是省略之后js默认只执行if和else下的一个语句:
var age = 20; if (age >= 18) // 如果年龄age >= 18为true,则执行if语句块 alert('adult'); else // 年龄age小于18执行else语句块 alert('teenager'); console.log('age < 18');
此时执行完alert之后console.log便不再执行了。所以建议在写的时候多养成打{}的习惯。 很多时候你会发现有些人打代码经常出错,事后要花费大量精力在一堆代码中找错误修复bug,有些人却基本不需要怎么调试,关键问题解决了就能一次跑通,本质上或许就是练习的时候注重不注重习惯的差距吧
2. 多行条件判断
如果需要细分的分支不止两个,我们可以使用else if来创建更多分支——
我们还是拿年龄判断案例来看看:
var age = 3; if (age >= 18) { alert('adult'); } else if (age >= 6) { alert('teenager'); } else { alert('kid'); }
else if是在if判断为false之后再运行并判断的。允许存在多个else if,优先级按从上到下的顺序来,先判断上面的,为false的时候再依次往下判断。只有在if和所有else if都判断为false的时候才会执行最后else的语句
从原理上理解,其实else if相当于多层if else嵌套:
var age = 3; if (age >= 18) { alert('adult'); } else { if (age >= 6) { alert('teenager'); } else { alert('kid'); } }
只不过实际操作起来嵌套太多层会降低代码可读性,我们就用这样的else if来帮助我们编写代码。(可以看到,我们其实就是把else后面的{}去除了,相当于else后紧跟一个if语句,因为只有一个语句所有并不需要加{})