JavaScript入门之分支语句

108 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第22天,点击查看活动详情

✔个人主页:Mr.Darcy8的掘金主页

🎉欢迎关注👀点赞👍收藏⭐留言📝以及交流人生哲理🎈学习心得🎁

引入

我们知道,当今世界丰富多彩的代码世界如果用语句来区分的话,不外乎三种:

  • 顺序语句
  • 分支语句
  • 循环语句

正是这简简单单的三类控制语句,构成了花样繁多的程序世界。

在之前的JavaScript快速入门学习中,我们了解的大部分是顺序语句,即从上到下依次运行。这期我们来看看第二个控制语句——分支,是怎么一回事

1.条件判断

和许多编程语言一样,JavaScript也使用if、else等字眼来表示条件判断,以此构成分支。

但不一样的是,JS需要用小括号把条件括起来,再用语句块的方式来执行该分支的内容——if () { ... } else { ... }

例如,一个很常见的根据年龄判断案例,可以用if语句实现如下:

var age = 20;
if (age >= 18) { // 如果年龄age >= 18true,则执行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语句,因为只有一个语句所有并不需要加{})

新人上路,欢迎互相帮扶~Mr_darcy8的掘金主页

可以的话给咱点个赞呗💖