JavaScript (5)-流程控制,if, switch, while, for

在流程控制之前,首先要明白什么是代码块

代码块

用{}包围起来的代码，就是代码块。

JS中的代码块，只具有分组的作用，没有其他的用途。

代码块中的内容，在外部是完全可见的。举例：

{

var a=2;

alert("smyhvae");

console.log("永不止步");

}

console.log("a = "+a);

打印结果：（可以看出，虽然变量 a 是定义在代码块中的，但是在外部依然可以访问）

永不止步

a = 2

流程控制语句

在一个程序执行的过程中，各条语句的执行顺序对程序的结果是有直接影响的。所以，我们必须清楚每条语句的执行流程。而且，很多时候我们要通过控制语句的执行顺序来实现我们要完成的功能。

流程控制语句分类

顺序结构

选择结构：if语句、switch语句

循环结构：while语句、for语句

顺序结构

按照代码的先后顺序，依次执行。结构图如下：

if语句

if语句有以下三种。

1、条件判断语句

条件成立才执行。如果条件不成立，那就什么都不做。

格式：

if(条件表达式) {

// 条件为真时，做的事情

}

2、条件分支语句

格式1：

if(条件表达式) {

// 条件为真时，做的事情

}else{

// 条件为假时，做的事情

}

格式：（多分支的if语句）

if(条件表达式1) {

// 条件1为真时，做的事情

}elseif(条件表达式2) {

// 条件1不满足，条件2满足时，做的事情

}elseif(条件表达式3) {

// 条件1、2不满足，条件3满足时，做的事情

}else{

// 条件1、2、3都不满足时，做的事情

}

以上所有的语句体中，只执行其中一个。

例如:

根据BMI（身体质量指数）显示一个人的体型。

BMI指数，就是体重、身高的一个计算公式。公式是：

BMI =体重÷身高的平方

比如，老师的体重是81.6公斤，身高是1.71米。

那么老师的BMI就是 81.6 ÷ 1.712 等于 27.906022365856163

过轻：低于18.5

正常：18.5-24.99999999

过重：25-27.9999999

肥胖：28-32

非常肥胖, 高于32

用JavaScript开发一个程序，让用户先输入自己的体重，然后输入自己的身高（弹出两次prompt框）。

计算它的BMI，根据上表，弹出用户的身体情况。比如“过轻” 、 “正常” 、“过重” 、 “肥胖” 、“非常肥胖”。

答案：

写法1：

//第一步，输入身高和体重

var height=parseFloat(prompt("请输入身高，单位是米"));

var weight=parseFloat(prompt("请输入体重，单位是公斤"));

//第二步，计算BMI指数

var BMI=weight/Math.pow(height,2);

//第三步，if语句来判断。注意跳楼现象

if(BMI<18.5) {

alert("偏瘦");

}elseif(BMI<25) {

alert("正常");

}elseif(BMI<28) {

alert("过重");

}elseif(BMI<=32) {

alert("肥胖");

}else{

alert("非常肥胖");

}

写法2：

//第一步，输入身高和体重

var height=parseFloat(prompt("请输入身高，单位是米"));

var weight=parseFloat(prompt("请输入体重，单位是公斤"));

//第二步，计算BMI指数

var BMI=weight/Math.pow(height,2);

//第三步，if语句来判断。注意跳楼现象

if(BMI>32) {

alert("非常肥胖");

}else if(BMI>=28) {

alert("肥胖");

}else if(BMI>=25) {

alert("过重");

}else if(BMI>=18.5) {

alert("正常")

}else{

alert("偏瘦");

}

if语句的嵌套

我们通过下面这个例子来引出if语句的嵌套。

一个加油站为了鼓励车主多加油，所以加的多有优惠。

92号汽油，每升6元；如果大于等于20升，那么每升5.9；

97号汽油，每升7元；如果大于等于30升，那么每升6.95

编写JS程序，用户输入自己的汽油编号，然后输入自己加多少升，弹出价格。

代码实现如下：

//第一步，输入

var bianhao=parseInt(prompt("您想加什么油？填写92或者97"));

var sheng=parseFloat(prompt("您想加多少升？"));

//第二步，判断

if(bianhao==92) {

//编号是92的时候做的事情

if(sheng>=20) {

varprice=sheng*5.9;

}else{

varprice=sheng*6;

}

}else if(bianhao==97) {

//编号是97的时候做的事情

if(sheng>=30) {

varprice=sheng*6.95;

}else{

varprice=sheng*7;

}

}else{

alert("对不起，没有这个编号的汽油！");

}

alert("价格是"+price);

switch语句（条件分支语句）

switch语句也叫条件分支语句。

格式：

switch(表达式) {

case 值1：

语句体1;

break;

case 值2：

语句体2;

break;

...

default：

语句体 n+1;

break;

}

switch语句的执行流程

流程图如下：

执行流程如下：

（1）首先，计算出表达式的值，和case依次比较，一旦有对应的值，就会执行相应的语句，在执行的过程中，遇到break就会结束。

（2）然后，如果所有的case都和表达式的值不匹配，就会执行default语句体部分。

switch 语句的结束条件【非常重要】

情况a：遇到break就结束，而不是遇到default就结束。（因为break在此处的作用就是退出switch语句）

情况b：执行到程序的末尾就结束。

我们来看下面的两个例子就明白了。

case穿透的问题

switch 语句中的break可以省略，但一般不建议。否则结果可能不是你想要的，会出现一个现象：case穿透。

举例1：（case穿透的情况）

var num=4;

//switch判断语句

switch(num) {

case 1:

console.log("星期一");

break;

case 2:

console.log("星期二");

break;

case 3:

console.log("星期三");

break;

case 4:

console.log("星期四");

//break;

case 5:

console.log("星期五");

//break;

case 6:

console.log("星期六");

break;

case 7:

console.log("星期日");

break;

default:

console.log("你输入的数据有误");

break;

}

上方代码的运行结果，可能会令你感到意外：

星期四

星期五

星期六

上方代码的解释：因为在case 4和case 5中都没有break，那语句走到case 6的break才会停止。

举例2：

//switch判断语句

var number=5;

switch(number) {

default:

console.log("我是defaul语句");

// break;

case(2):

console.log("第二个呵呵:"+number);

//break;

case(3):

console.log("第三个呵呵:"+number);

break;

case(4):

console.log("第四个呵呵:"+number);

break;

}

上方代码的运行结果，你也许会意外：

我是defaul语句

第二个呵呵:5

第三个呵呵:5

上方代码的解释：代码走到 default 时，因为没有遇到 break，所以会继续往下走，直到遇见 break 或者走到程序的末尾。从这个例子可以看出：switch 语句的结束与 default 的顺序无关。

循环语句：通过循环语句可以反复的执行一段代码多次。

for循环

语法：

for(①初始化表达式; ②条件表达式; ④更新表达式){

③语句...

}

执行流程：

①执行初始化表达式，初始化变量（初始化表达式只会执行一次）

②执行条件表达式，判断是否执行循环：

如果为true，则执行循环③

如果为false，终止循环

④执行更新表达式，更新表达式执行完毕继续重复②

for循环举例：

for(var i=1;i<=100;i++) {

console.log(i);

}

上方代码的解释：

例子

for(var i=1;i<13;i=i+4) {

console.log(i);

}

上方代码的遍历步骤：

程序一运行，将执行var i = 1;这条语句，所以i的值是1。

然后程序会验证一下i < 13是否满足，1<13是真，所以执行一次循环体（就是大括号里面的语句）。

执行完循环体之后，会执行i=i+4这条语句，所以i的值，是5。

程序会会验证一下i < 13是否满足，5<13是真，所以执行一次循环体（就是大括号里面的语句）。

执行完循环体之后，会执行i=i+4这条语句，所以i的值，是9。

程序会会验证一下i < 13是否满足，9<13是真，所以执行一次循环体（就是大括号里面的语句）。

执行完循环体之后，会执行i=i+4这条语句，所以i的值，是13。

程序会会验证一下i < 13是否满足，13<13是假，所以不执行循环体了，将退出循环。

最终输出输出结果为：1、5、9

接下来做几个题目。

题目1：

for(var i=1;i<10;i=i+3) {

i=i+1;

console.log(i);

}

输出结果：2、6、10

题目2：

for(var i=1;i<=10;i++) {

}

console.log(i);

输出结果：11

题目3：

for(var i=1;i<7;i=i+3){

}

console.log(i);

输出结果：7

题目4：

for(var i=1;i>0;i++) {

console.log(i);

}

死循环。

while循环

语法：

while(条件表达式){

语句...

}

执行流程：

while语句在执行时，先对条件表达式进行求值判断：

如果值为true，则执行循环体：

循环体执行完毕以后，继续对表达式进行判断

如果为true，则继续执行循环体，以此类推

如果值为false，则终止循环

如果有必要的话，我们可以使用 break 来终止循环。

do...while循环

语法：

do{

语句...

}while(条件表达式)

执行流程：

do...while语句在执行时，会先执行循环体：

循环体执行完毕以后，在对while后的条件表达式进行判断：

如果结果为true，则继续执行循环体，执行完毕继续判断以此类推

如果结果为false，则终止循环

while循环和 do...while循环的区别

这两个语句的功能类似，不同的是：

while是先判断后执行，而do...while是先执行后判断。

也就是说，do...while可以保证循环体至少执行一次，而while不能。

while循环举例

题目：假如投资的年利率为5%，试求从1000块增长到5000块，需要花费多少年？

代码实现：

<!DOCTYPE html>

<htmllang="">

<head>

<meta>

<title>Document</title>

</head>

<body>

* 假如投资的年利率为5%，试求从1000块增长到5000块，需要花费多少年

* 1000 1000*1.05

* 1050 1050*1.05

//定义一个变量，表示当前的钱数

var money=1000;

//定义一个计数器

var count=0;

//定义一个while循环来计算每年的钱数

while(money<5000) {

money*=1.05;

//使count自增

count++;

}

console.log(money);

console.log("一共需要"+count+"年");

</script>

</body>

</html>

打印结果：

5003.18854203379

一共需要33年

另外，你也可以自己算一下，假如投资的年利率为5%，从1000块增长到1万块，需要花费48年：

10401.269646942128

一共需要48年

break 和 continue

这个知识点非常重要。

break

break可以用来退出switch语句或整个循环语句（循环语句包括for、while。不包括if。if里不能用 break 和 continue，否则会报错）。

break会立即终止离它最近的那个循环语句。

可以为循环语句创建一个label，来标识当前的循环（格式：label:循环语句）。使用break语句时，可以在break后跟着一个label，这样break将会结束指定的循环，而不是最近的。

举例1：通过 break 终止循环语句

for(var i=0;i<5;i++) {

console.log('i的值:'+i);

if(i==2) {

break;// 注意，虽然在 if 里使用了 break，但这里的 break 是服务于外面的 for 循环。

}

打印结果：

i的值:0

i的值:1

i的值:2

举例2：label的使用

outer:

for(var i=0;i<5;i++) {

console.log("外层循环 i 的值："+i)

for(var j=0;j<5;j++) {

breakouter;// 直接跳出outer所在的外层循环（这个outer是我自定义的label）

console.log("内层循环 j 的值:"+j);

}

打印结果：

外层循环 i 的值：0

continue

continue可以用来跳过当次循环。

同样，continue默认只会离他最近的循环起作用。

例子1:在页面中接收一个用户输入的数字，并判断该数是否是质数。

代码实现：

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

质数：只能被1和它自身整除的数，1不是质数也不是合数，质数必须是大于1的自然数。

va rnum=prompt("请输入一个大于1的整数:");

//判断这个值是否合法

if(num<=1) {

alert("该值不合法！");

}else{

//先用flag标志位，来保存当前的数的状态

//默认当前num是质数

var flag=true;

//判断num是否是质数

//获取2-num之间的数

for(var i=2;i<num;i++) {

//console.log(i);

//判断num是否能被i整除

if(num%i==0) {

//如果num能被i整除，则说明num一定不是质数

//设置flag为false

flag=false;

}

//如果num是质数则输出

if(flag) {

alert(num+"是质数！！！");

}else{

alert("这个不是质数")

}

</script>

</head>

<body>

</body>

</html>

例子2:打印1~100之间的所有质数

代码实现：

<!DOCTYPE html>

<html>

<head>

* 打印出1-100之间所有的质数

//打印2-100之间所有的数

for(var i=2;i<=100;i++) {

//创建一个布尔值，用来保存结果，默认i是质数

var flag=true;

//判断i是否是质数

//获取到2-i之间的所有的数

for(var j=2;j<i;j++) {

//判断i是否能被j整除

if(i%j==0) {

//如果进入判断则证明i不是质数,修改flag值为false

flag=false;

}

//如果是质数，则打印i的值

if(flag) {

console.log(i);

}

</script>

</head>

<body>

</body>

</html>

打印结果：

例子3:打印99乘法表

代码实现：

<!DOCTYPE html>

<html>

<head>

body{

width:2000px;

}

span{

display:inline-block;

width:80px;

}

</style>

* 1.打印99乘法表

* 1*1=1

* 1*2=2 2*2=4

* 1*3=3 2*3=6 3*3=9

* 1*4=4 2*4=8 3*4=12 4*4=16

* ....9*9=81

* 2.打印出1-100之间所有的质数

//创建外层循环，用来控制乘法表的高度

for(var i=1;i<=9;i++) {

//创建一个内层循环来控制图形的宽度

for(va rj=1;j<=i;j++) {

document.write("<span>"+j+"*"+i+"="+i*j+"</span>");

}

//输出一个换行

document.write("<br />");

}

</script>

</head>

<body>

</body>

</html>

页面效果：

JavaScript (5)-流程控制,if, switch, while, for