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学前端”

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180520G1BFXS00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券