Tony学前端：条件判断，生存还是毁灭？这是个问题！

本文共有3100字，预计阅读时间：20分钟

本系列累计63400字

在文章末尾可以观看本课的视频

我们先来复习一下上次学习了哪些知识：

数值型：

整型、浮点型、浮点型计算的缺陷、科学记数法。

属性与方法：

变量的属性、变量的方法、参数。

字符型：

基本概念、字符转义、字符串的结构。

字符串处理：

常用的字符串操作。

通过两节的学习，我们已经掌握了JS一些初步概念，以及数值型与字符型两种数据类型的操作，这一节我们来学习一下程序的流程。再复杂的程序，其也总是按照指定的流程来运行，而程序流程总是离不开这三种：顺序、分支和循环。

再复杂、再大型的程序，无论是JS还是其他什么语言编写的，我们总是可以把程序分解为三种流程结构：顺序、分支和循环。

顺序：

顺序结构是最基本的流程结构，从第一行代码开始执行，直到最后的代码。

顺序结构就像是汽车生产流水线，一道工序做完后来到下一道工序。

分支：

分支结构是程序执行到特定的代码后进行条件判断，如果满足特定条件就执行特定的语句。

分支结构就像我们来到一个路口，要根据具体的条件来决定走哪一条路。

循环：

循环结构是程序执行到特定的代码后进行条件判断，如果满足循环条件则重复执行指定的代码，否则便执行其他的代码。

循环结构犹如我们买干脆面中了“再来一包”的奖励，重复吃面的动作，直至不再中奖。

在分支和循环流程结构中，有一个关键点就是对于条件的判断，那么怎么样才是满足条件，而什么又是不满足条件，这个是通过逻辑表达式来处理的，接下来我们学习逻辑表达式。

学习逻辑表达式前，我们先学习一个新的数据类型：布尔型。布尔的全称为Boolean，与我们之前学习的数值型、字符型的数据类型不同，如果一个变量是布尔型的话，那么它只会有两个值：真或者假，真用true表示，而假则是false。

var a = true ; //真值

var b = false ; //假值

一般来说，除了将一个变量直接赋予true或false，我们用的更多的是将一个表达式的结果赋予变量。

那什么是表达式呢？其实我们已经接触过表达式了，那就是算数表达式，如加法、乘法等等，譬如以下的这种表达式赋值我们应该很熟悉了：

var a = 1 + 2；

var b = a * 10；

第一个变量a的值为算数表达式1+2的结果，所以为3。而第二个变量b的值，则为算数表达式a*10的结果，此时a为3，因此b的值就为30。这里要注意的是表达式中也可以包含变量。

除了算数表达式，我们还会用到逻辑表达式，逻辑表达式经常是处理以下的这类问题：

某个数是否大于指定值？

某样物品的颜色是否为红色？

两个数字是否相等？

在条件判断中，我们使用的是逻辑表达式，很明显逻辑表达式的结果是真或者假，而其运算符包括：

等于：==

不等于：！=

大于：>

小于：

这里特别要注意的是等于关系是两个等号，而不是一个等号，用一个等号来表示等于关系是初学者最容易犯的bug，我们来看几个逻辑表达式：

var a = 2 > 1； //true

var b = '张三'；

var c = ‘张三’；

var d = b==c； //true

var e = b==‘李四’； //false

变量a的值为true，因为逻辑表达式2>1的结果为真。

同理由于变量b和c的值相同，都是“张三”，因此变量d的值也为true。

而由于变量b的值并不等于“李四”，因此变量e的值为false。

在实际的应用中，简单的逻辑表达式对于复杂条件的判断还是不够的，我们还会碰到各种逻辑表达式的组合，即处理以下的一些问题：

某个数是否大于指定数并且小于另一个数？

某样物品的颜色是红色或者是黄色？

某个字符串是否不等于另一个字符串？

注意黑体部分，对于逻辑表达式的组合，我们有以下三种关系：

与：&&

或：| |

非：！

与是“并且”的意思，用两个&（&&）表示。

或是“或者”的意思，用两个|（||）表示。

非是“不是”的意思，用感叹号（!）表示。

与算数表达式中运算符的优先级一样（先乘除后加减），逻辑表达式中也有关系运算优先级：优先级最高的是非（！），其次是与（&&），其次是或（||），最后是等于大于小于。

另外我们再来提一下不等于，不等于实际上就是非等于，因此就是非和等于关系的组合，之前我们已经知道了不等于是！=，但也许我们会这样写（我们判断a不等于b）：

! a == b

这种写法是错误 的，因为按照逻辑关系运算优先级，是先进行非运算，再进行等于的比较运算，因此这种写法的实际意思就是非a是否等于b，而这很明显不是我们的预期，因此我们要这样来写：

！（a==b）

因为在运算符中，括号的优先级比非更高，这个可以类比算术表达式中括号的作用。但是这样写实在是太繁琐了，因此对于不等于我们还是用！=来表示。

a != b

我们来演示几个逻辑表达式的组合，我们以Tony所在学校的具体情况来举例子：

华城校区的男生：

校区==华城&&性别==男

预初或初一的学生：

年级==预初||年级==初一

不是预初17班的预初学生：

年级==预初&& ！（班级==预初17班）

年级==预初&&班级！=预初17班

华城校区的男生或大唐校区的女生：

校区==华城&&性别=男||校区==大唐&&性别==女

学习了逻辑表达式，就可以在程序中进行条件判断了，在分支结构中我们需要用到的是if语句。

if语句就像单词本身的意思，是处理“如果...怎么样...”之类的问题。if语句的结构是：

if （条件）{

执行语句；

}

只有当条件为true的时候，才会执行指定的语句，执行的语句可能不止一句，因此多条执行语句要放在一个代码块中，也就是要用大括号包裹，譬如：

var a；

if （a==1）{

alert（‘“a等于1”）；

}

如果逻辑表达式“a==1”为真的话，则执行代码块中的语句，弹出消息框。当然在示例中由于a并不等于1，因此不会执行代码块中的代码。

如果代码块里只有一句语句的话，那么大括号就可以省略掉，因此上面的示例可以写成：

var a；

if（a==1） alert（“a等于1”）；

在这个例子中，我们有时还会做“如果a不等1，则怎么样”的处理，也就是“如果...怎样，如果不...又怎样”的处理，那么这种结构，我们就要用到“if...else...”的语句：

if（条件）{

执行语句；

}

else{

执行语句；

}

之前的示例我们可以这样写：

var a；

if （a==1）{

alert（‘“a等于1”）；

}

else{

alert（“a不等于1”）；

}

当然，由于代码块内只有一句语句，我们也可以简写为：

var a；

if （a==1）alert（‘“a等于1”）；

else alert（“a不等于1”）；

关于程序员买西瓜的段子

网上有一个搞笑的段子，说老妈让程序员儿子去买一个西瓜，如果看到有卖西红柿的，买两个，结果最后程序员没有买西红柿，而是买了两个西瓜回来，因为他看到有卖西红柿的！

我们学习过了条件判断，那就能够理解这位程序员的思维方式了：

var 西瓜数量=1；

if（有卖西红柿的）{

西瓜数量=2；

}

有时，我们还会处理更为复杂的情况，需要对多个条件进行判断，那么此时就要用到“if...else if...else if...else...”的结构：

if（条件1）{

执行语句；

}

else if（条件2）{

执行语句；

}

else if（条件3）{

执行语句；

}

else {

执行语句；

}

对于之前的示例，我们可以多些判断：

var a；

if （a==1）{

alert（‘“a等于1”）；

}

else if（a==2）{

alert（“a等于2”）；

}

else if（a==3）{

alert（“a等于3”）；

}

else{

alert（“a不等1也不等于2也不等于3”）；

}

接下来学习switch语句。

对于多条件的判断，我们还可以用switch语句来实现，其语句结构是：

switch（条件）{

case值1：

执行语句；

break；

case值2：

执行语句；

break；

default：

执行语句；

}

switch语句首先设置表达式（条件），随后表达式的值会和每一个case后的值做比较，如果匹配则执行case内的代码，最后通过break语句退出。这里要注意几点：

case的值后需要跟分号（：），而不是冒号。

可以使用default来执行未被匹配到的操作。

除了最后一个代码块，其他的代码块需要用break来防止执行下一个case。

我们用switch语句重写之前的示例：

var a；

switch（a）{

case 1：

alert（‘“a等于1”）；

break；

case 2：

alert（“a等于2”）；

break；

case 3：

alert（“a等于3”）；

break；

default：

alert（“a不等1也不等于2也不等于3”）；

}

后面暂时没有了，我们来总结一下，今天主要学习了：

程序流程 ：

顺序、分支、循环。

逻辑表达式：

布尔型数据类型、逻辑判断、逻辑组合。

分支结构：

if语句、else if语句、switch语句。

这一节我们通过if或switch语句来实现分支结构的流程，接下来学习如何实现循环结构。只有掌握了分支与循环，才能够真正的开始编写代码了！娃娃们加油，我们的目标是星辰大海！

点击观看本课视频，也可以在腾讯视频上搜索“Tony学前端”：