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

代碼塊

用{}包圍起來(lái)的代碼，就是代碼塊。

JS中的代碼塊，只具有分組的作用，沒(méi)有其他的用途。

代碼塊中的內(nèi)容，在外部是完全可見(jiàn)的。舉例：

?? {

var a=2;

alert("smyhvae");

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

?? }

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

打印結(jié)果：（可以看出，雖然變量 a 是定義在代碼塊中的，但是在外部依然可以訪問(wèn)）

永不止步

a = 2

流程控制語(yǔ)句

在一個(gè)程序執(zhí)行的過(guò)程中，各條語(yǔ)句的執(zhí)行順序?qū)Τ绦虻慕Y(jié)果是有直接影響的。所以，我們必須清楚每條語(yǔ)句的執(zhí)行流程。而且，很多時(shí)候我們要通過(guò)控制語(yǔ)句的執(zhí)行順序來(lái)實(shí)現(xiàn)我們要完成的功能。

流程控制語(yǔ)句分類

順序結(jié)構(gòu)

選擇結(jié)構(gòu)：if語(yǔ)句、switch語(yǔ)句

循環(huán)結(jié)構(gòu)：while語(yǔ)句、for語(yǔ)句

順序結(jié)構(gòu)

按照代碼的先后順序，依次執(zhí)行。結(jié)構(gòu)圖如下：

if語(yǔ)句

if語(yǔ)句有以下三種。

1、條件判斷語(yǔ)句

條件成立才執(zhí)行。如果條件不成立，那就什么都不做。

格式：

? ? if(條件表達(dá)式) {

? ? ? ? // 條件為真時(shí)，做的事情

? ? }

2、條件分支語(yǔ)句

格式1：

? ? if(條件表達(dá)式) {

? ? ? ? // 條件為真時(shí)，做的事情

? ? }else{

? ? ? ? // 條件為假時(shí)，做的事情

? ? }

格式：（多分支的if語(yǔ)句）

? ? if(條件表達(dá)式1) {

? ? ? ? // 條件1為真時(shí)，做的事情

? ? }elseif(條件表達(dá)式2) {

? ? ? ? // 條件1不滿足，條件2滿足時(shí)，做的事情

? ? }elseif(條件表達(dá)式3) {

? ? ? ? // 條件1、2不滿足，條件3滿足時(shí)，做的事情

? ? }else{

? ? ? ? // 條件1、2、3都不滿足時(shí)，做的事情

? ? }

以上所有的語(yǔ)句體中，只執(zhí)行其中一個(gè)。

例如:

? ? 根據(jù)BMI（身體質(zhì)量指數(shù)）顯示一個(gè)人的體型。

? ? BMI指數(shù)，就是體重、身高的一個(gè)計(jì)算公式。公式是：

? ? BMI =體重÷身高的平方

? ? 比如，老師的體重是81.6公斤，身高是1.71米。

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

? ? 過(guò)輕：低于18.5

? ? 正常：18.5-24.99999999

? ? 過(guò)重：25-27.9999999

? ? 肥胖：28-32

? ? 非常肥胖, 高于32

? ? 用JavaScript開發(fā)一個(gè)程序，讓用戶先輸入自己的體重，然后輸入自己的身高（彈出兩次prompt框）。

? ? 計(jì)算它的BMI，根據(jù)上表，彈出用戶的身體情況。比如“過(guò)輕” 、 “正?！?、“過(guò)重” 、 “肥胖” 、“非常肥胖”。

答案：

寫法1：

? ? //第一步，輸入身高和體重

? ? var height=parseFloat(prompt("請(qǐng)輸入身高，單位是米"));

? ? var weight=parseFloat(prompt("請(qǐng)輸入體重，單位是公斤"));

? ? //第二步，計(jì)算BMI指數(shù)

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

? ? //第三步，if語(yǔ)句來(lái)判斷。注意跳樓現(xiàn)象

? ? if(BMI<18.5) {

? ? ? ? alert("偏瘦");

? ? }elseif(BMI<25) {

? ? ? ? alert("正常");

? ? }elseif(BMI<28) {

? ? ? ? alert("過(guò)重");

? ? }elseif(BMI<=32) {

? ? ? ? alert("肥胖");

? ? }else{

? ? ? ? alert("非常肥胖");

? ? }

寫法2：

? ? //第一步，輸入身高和體重

? ? var height=parseFloat(prompt("請(qǐng)輸入身高，單位是米"));

? ? var weight=parseFloat(prompt("請(qǐng)輸入體重，單位是公斤"));

? ? //第二步，計(jì)算BMI指數(shù)

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

? ? //第三步，if語(yǔ)句來(lái)判斷。注意跳樓現(xiàn)象

? ? if(BMI>32) {

? ? ? ? alert("非常肥胖");

? ? }else if(BMI>=28) {

? ? ? ? alert("肥胖");

? ? }else if(BMI>=25) {

? ? ? ? alert("過(guò)重");

? ? }else ?if(BMI>=18.5) {

? ? ? ? alert("正常")

? ? }else{

? ? ? ? alert("偏瘦");

? ? }

if語(yǔ)句的嵌套

我們通過(guò)下面這個(gè)例子來(lái)引出if語(yǔ)句的嵌套。

? ? 一個(gè)加油站為了鼓勵(lì)車主多加油，所以加的多有優(yōu)惠。

? ? 92號(hào)汽油，每升6元；如果大于等于20升，那么每升5.9；

? ? 97號(hào)汽油，每升7元；如果大于等于30升，那么每升6.95

? ? 編寫JS程序，用戶輸入自己的汽油編號(hào)，然后輸入自己加多少升，彈出價(jià)格。

代碼實(shí)現(xiàn)如下：

? ? //第一步，輸入

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

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

? ? //第二步，判斷

? ? if(bianhao==92) {

? ? ? ? //編號(hào)是92的時(shí)候做的事情

? ? ? ? if(sheng>=20) {

? ? ? ? ? ? varprice=sheng*5.9;

? ? ? ? }else{

? ? ? ? ? ? varprice=sheng*6;

? ? ? ? }

? ? }else if(bianhao==97) {

? ? ? ? //編號(hào)是97的時(shí)候做的事情

? ? ? ? if(sheng>=30) {

? ? ? ? ? ? varprice=sheng*6.95;

? ? ? ? }else{

? ? ? ? ? ? varprice=sheng*7;

? ? ? ? }

? ? }else{

? ? ? ? alert("對(duì)不起，沒(méi)有這個(gè)編號(hào)的汽油！");

? ? }

? ? alert("價(jià)格是"+price);

switch語(yǔ)句（條件分支語(yǔ)句）

switch語(yǔ)句也叫條件分支語(yǔ)句。

格式：

switch(表達(dá)式) {

? ? case 值1：

? ? ? ? 語(yǔ)句體1;

? ? ? ? break;

? ? case 值2：

? ? ? ? 語(yǔ)句體2;

? ? ? ? break;

? ? ...

? ? ...

? ? default：

? ? ? ? 語(yǔ)句體 n+1;

? ? ? ? break;

}

switch語(yǔ)句的執(zhí)行流程

流程圖如下：

執(zhí)行流程如下：

（1）首先，計(jì)算出表達(dá)式的值，和case依次比較，一旦有對(duì)應(yīng)的值，就會(huì)執(zhí)行相應(yīng)的語(yǔ)句，在執(zhí)行的過(guò)程中，遇到break就會(huì)結(jié)束。

（2）然后，如果所有的case都和表達(dá)式的值不匹配，就會(huì)執(zhí)行default語(yǔ)句體部分。

switch 語(yǔ)句的結(jié)束條件【非常重要】

情況a：遇到break就結(jié)束，而不是遇到default就結(jié)束。（因?yàn)閎reak在此處的作用就是退出switch語(yǔ)句）

情況b：執(zhí)行到程序的末尾就結(jié)束。

我們來(lái)看下面的兩個(gè)例子就明白了。

case穿透的問(wèn)題

switch 語(yǔ)句中的break可以省略，但一般不建議。否則結(jié)果可能不是你想要的，會(huì)出現(xiàn)一個(gè)現(xiàn)象：case穿透。

舉例1：（case穿透的情況）

var num=4;

//switch判斷語(yǔ)句

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("你輸入的數(shù)據(jù)有誤");

break;

?? }

上方代碼的運(yùn)行結(jié)果，可能會(huì)令你感到意外：

星期四

星期五

星期六

上方代碼的解釋：因?yàn)樵赾ase 4和case 5中都沒(méi)有break，那語(yǔ)句走到case 6的break才會(huì)停止。

舉例2：

//switch判斷語(yǔ)句

var number=5;

switch(number) {

default:

console.log("我是defaul語(yǔ)句");

// break;

case(2):

? console.log("第二個(gè)呵呵:"+number);

//break;

case(3):

? console.log("第三個(gè)呵呵:"+number);

break;

case(4):

? console.log("第四個(gè)呵呵:"+number);

break;

?? }

上方代碼的運(yùn)行結(jié)果，你也許會(huì)意外：

我是defaul語(yǔ)句

第二個(gè)呵呵:5

第三個(gè)呵呵:5

上方代碼的解釋：代碼走到 default 時(shí)，因?yàn)闆](méi)有遇到 break，所以會(huì)繼續(xù)往下走，直到遇見(jiàn) break 或者走到程序的末尾。 從這個(gè)例子可以看出：switch 語(yǔ)句的結(jié)束與 default 的順序無(wú)關(guān)。

循環(huán)語(yǔ)句：通過(guò)循環(huán)語(yǔ)句可以反復(fù)的執(zhí)行一段代碼多次。

for循環(huán)

語(yǔ)法：

? ? for(①初始化表達(dá)式; ②條件表達(dá)式; ④更新表達(dá)式){

? ? ? ? ③語(yǔ)句...

? ? }

執(zhí)行流程：

? ? ①執(zhí)行初始化表達(dá)式，初始化變量（初始化表達(dá)式只會(huì)執(zhí)行一次）

? ? ②執(zhí)行條件表達(dá)式，判斷是否執(zhí)行循環(huán)：

? ? ? ? 如果為true，則執(zhí)行循環(huán)③

? ? ? ? 如果為false，終止循環(huán)

? ? ④執(zhí)行更新表達(dá)式，更新表達(dá)式執(zhí)行完畢繼續(xù)重復(fù)②

for循環(huán)舉例：

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

? ? ? ? console.log(i);

? ? }

上方代碼的解釋：

例子

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

? ? ? ? console.log(i);

? ? }

上方代碼的遍歷步驟：

程序一運(yùn)行，將執(zhí)行var i = 1;這條語(yǔ)句， 所以i的值是1。

然后程序會(huì)驗(yàn)證一下i < 13是否滿足，1<13是真，所以執(zhí)行一次循環(huán)體（就是大括號(hào)里面的語(yǔ)句）。

執(zhí)行完循環(huán)體之后，會(huì)執(zhí)行i=i+4這條語(yǔ)句，所以i的值，是5。

程序會(huì)會(huì)驗(yàn)證一下i < 13是否滿足，5<13是真，所以執(zhí)行一次循環(huán)體（就是大括號(hào)里面的語(yǔ)句）。

執(zhí)行完循環(huán)體之后，會(huì)執(zhí)行i=i+4這條語(yǔ)句，所以i的值，是9。

程序會(huì)會(huì)驗(yàn)證一下i < 13是否滿足，9<13是真，所以執(zhí)行一次循環(huán)體（就是大括號(hào)里面的語(yǔ)句）。

執(zhí)行完循環(huán)體之后，會(huì)執(zhí)行i=i+4這條語(yǔ)句，所以i的值，是13。

程序會(huì)會(huì)驗(yàn)證一下i < 13是否滿足，13<13是假，所以不執(zhí)行循環(huán)體了，將退出循環(huán)。

最終輸出輸出結(jié)果為：1、5、9

接下來(lái)做幾個(gè)題目。

題目1：

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

? ? ? ? i=i+1;

? ? ? ? console.log(i);

? ? }

輸出結(jié)果：2、6、10

題目2：

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

? ? }

? ? console.log(i);

輸出結(jié)果：11

題目3：

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

? ? }

? ? console.log(i);

輸出結(jié)果：7

題目4：

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

? ? ? ? console.log(i);

? ? }

死循環(huán)。

while循環(huán)

語(yǔ)法：

while(條件表達(dá)式){

? ? 語(yǔ)句...

}

執(zhí)行流程：

while語(yǔ)句在執(zhí)行時(shí)，先對(duì)條件表達(dá)式進(jìn)行求值判斷：

? ? 如果值為true，則執(zhí)行循環(huán)體：

? ? ? ? 循環(huán)體執(zhí)行完畢以后，繼續(xù)對(duì)表達(dá)式進(jìn)行判斷

? ? ? ? 如果為true，則繼續(xù)執(zhí)行循環(huán)體，以此類推

? ? 如果值為false，則終止循環(huán)

如果有必要的話，我們可以使用 break 來(lái)終止循環(huán)。

do...while循環(huán)

語(yǔ)法：

? ? do{

? ? ? ? 語(yǔ)句...

? ? }while(條件表達(dá)式)

執(zhí)行流程：

? ? do...while語(yǔ)句在執(zhí)行時(shí)，會(huì)先執(zhí)行循環(huán)體：

? ? ? ? 循環(huán)體執(zhí)行完畢以后，在對(duì)while后的條件表達(dá)式進(jìn)行判斷：

? ? ? ? ? ? 如果結(jié)果為true，則繼續(xù)執(zhí)行循環(huán)體，執(zhí)行完畢繼續(xù)判斷以此類推

? ? ? ? ? ? 如果結(jié)果為false，則終止循環(huán)

while循環(huán)和 do...while循環(huán)的區(qū)別

這兩個(gè)語(yǔ)句的功能類似，不同的是：

while是先判斷后執(zhí)行，而do...while是先執(zhí)行后判斷。

也就是說(shuō)，do...while可以保證循環(huán)體至少執(zhí)行一次，而while不能。

while循環(huán)舉例

題目：假如投資的年利率為5%，試求從1000塊增長(zhǎng)到5000塊，需要花費(fèi)多少年？

代碼實(shí)現(xiàn)：

<!DOCTYPE html>

<htmllang="">

<head>

<meta>

<meta>

<meta>

<title>Document</title>

</head>

<body>

<script>

/*

? ? ? ? * 假如投資的年利率為5%，試求從1000塊增長(zhǎng)到5000塊，需要花費(fèi)多少年

? ? ? ? *

? ? ? ? * 1000 1000*1.05

? ? ? ? * 1050 1050*1.05

? ? ? ? */

//定義一個(gè)變量，表示當(dāng)前的錢數(shù)

var money=1000;

//定義一個(gè)計(jì)數(shù)器

var count=0;

//定義一個(gè)while循環(huán)來(lái)計(jì)算每年的錢數(shù)

while(money<5000) {

money*=1.05;

//使count自增

count++;

? ? ?? }

console.log(money);

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

</script>

</body>

</html>

打印結(jié)果：

? ? 5003.18854203379

? ? 一共需要33年

另外，你也可以自己算一下，假如投資的年利率為5%，從1000塊增長(zhǎng)到1萬(wàn)塊，需要花費(fèi)48年：

10401.269646942128

一共需要48年

break 和 continue

這個(gè)知識(shí)點(diǎn)非常重要。

break

break可以用來(lái)退出switch語(yǔ)句或整個(gè)循環(huán)語(yǔ)句（循環(huán)語(yǔ)句包括for、while。不包括if。if里不能用 break 和 continue，否則會(huì)報(bào)錯(cuò)）。

break會(huì)立即終止離它最近的那個(gè)循環(huán)語(yǔ)句。

可以為循環(huán)語(yǔ)句創(chuàng)建一個(gè)label，來(lái)標(biāo)識(shí)當(dāng)前的循環(huán)（格式：label:循環(huán)語(yǔ)句）。使用break語(yǔ)句時(shí)，可以在break后跟著一個(gè)label，這樣break將會(huì)結(jié)束指定的循環(huán)，而不是最近的。

舉例1：通過(guò) break 終止循環(huán)語(yǔ)句

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

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

if(i==2) {

break;// 注意，雖然在 if 里 使用了 break，但這里的 break 是服務(wù)于外面的 for 循環(huán)。

? ? ?? }

?? }

打印結(jié)果：

i的值:0

i的值:1

i的值:2

舉例2：label的使用

outer:

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

console.log("外層循環(huán) i 的值："+i)

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

breakouter;// 直接跳出outer所在的外層循環(huán)（這個(gè)outer是我自定義的label）

console.log("內(nèi)層循環(huán) j 的值:"+j);

? ? ?? }

?? }

打印結(jié)果：

外層循環(huán) i 的值：0

continue

continue可以用來(lái)跳過(guò)當(dāng)次循環(huán)。

同樣，continue默認(rèn)只會(huì)離他最近的循環(huán)起作用。

例子1:在頁(yè)面中接收一個(gè)用戶輸入的數(shù)字，并判斷該數(shù)是否是質(zhì)數(shù)。

代碼實(shí)現(xiàn)：

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<title></title>

<script type="text/javascript">

/*

? ? ? ? ?? 質(zhì)數(shù)：只能被1和它自身整除的數(shù)，1不是質(zhì)數(shù)也不是合數(shù)，質(zhì)數(shù)必須是大于1的自然數(shù)。

? ? ? ? */

va rnum=prompt("請(qǐng)輸入一個(gè)大于1的整數(shù):");

//判斷這個(gè)值是否合法

if(num<=1) {

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

}else{

//先用flag標(biāo)志位，來(lái)保存當(dāng)前的數(shù)的狀態(tài)

//默認(rèn)當(dāng)前num是質(zhì)數(shù)

var flag=true;

//判斷num是否是質(zhì)數(shù)

//獲取2-num之間的數(shù)

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

//console.log(i);

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

if(num%i==0) {

//如果num能被i整除，則說(shuō)明num一定不是質(zhì)數(shù)

//設(shè)置flag為false

flag=false;

? ? ? ? ? ? ?? }

? ? ? ? ?? }

//如果num是質(zhì)數(shù)則輸出

if(flag) {

alert(num+"是質(zhì)數(shù)！??！");

}else{

alert("這個(gè)不是質(zhì)數(shù)")

? ? ? ? ?? }

? ? ?? }

</script>

</head>

<body>

</body>

</html>

例子2:打印1~100之間的所有質(zhì)數(shù)

代碼實(shí)現(xiàn)：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript">

/*

? ? ? ? * 打印出1-100之間所有的質(zhì)數(shù)

? ? ? ? */

//打印2-100之間所有的數(shù)

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

//創(chuàng)建一個(gè)布爾值，用來(lái)保存結(jié)果，默認(rèn)i是質(zhì)數(shù)

var flag=true;

//判斷i是否是質(zhì)數(shù)

//獲取到2-i之間的所有的數(shù)

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

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

if(i%j==0) {

//如果進(jìn)入判斷則證明i不是質(zhì)數(shù),修改flag值為false

flag=false;

? ? ? ? ? ? ?? }

? ? ? ? ?? }

//如果是質(zhì)數(shù)，則打印i的值

if(flag) {

console.log(i);

? ? ? ? ?? }

? ? ?? }

</script>

</head>

<body>

</body>

</html>

打印結(jié)果：

例子3:打印99乘法表

代碼實(shí)現(xiàn)：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

body{

width:2000px;

? ? ?? }

span{

display:inline-block;

width:80px;

? ? ?? }

</style>

<script type="text/javascript">

/*

? ? ? ? * 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之間所有的質(zhì)數(shù)

? ? ? ? */

//創(chuàng)建外層循環(huán)，用來(lái)控制乘法表的高度

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

//創(chuàng)建一個(gè)內(nèi)層循環(huán)來(lái)控制圖形的寬度

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

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

? ? ? ? ?? }

//輸出一個(gè)換行

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

? ? ?? }

</script>

</head>

<body>

</body>

</html>

頁(yè)面效果：