在流程控制之前,首先要明白什么是代碼塊
代碼塊
用{}包圍起來的代碼，就是代碼塊浙炼。
JS中的代碼塊阶牍，只具有分組的作用析苫，沒有其他的用途翔烁。
代碼塊中的內(nèi)容伦腐，在外部是完全可見的灾搏。舉例：
?? {
var a=2;
alert("smyhvae");
console.log("永不止步");
?? }
console.log("a = "+a);
打印結(jié)果：（可以看出泄伪，雖然變量 a 是定義在代碼塊中的殴蓬，但是在外部依然可以訪問）
永不止步
a = 2
流程控制語句
在一個(gè)程序執(zhí)行的過程中，各條語句的執(zhí)行順序?qū)Τ绦虻慕Y(jié)果是有直接影響的蟋滴。所以染厅，我們必須清楚每條語句的執(zhí)行流程。而且津函，很多時(shí)候我們要通過控制語句的執(zhí)行順序來實(shí)現(xiàn)我們要完成的功能肖粮。
流程控制語句分類
順序結(jié)構(gòu)
選擇結(jié)構(gòu)：if語句、switch語句
循環(huán)結(jié)構(gòu)：while語句尔苦、for語句
順序結(jié)構(gòu)
按照代碼的先后順序涩馆，依次執(zhí)行。結(jié)構(gòu)圖如下：
if語句
if語句有以下三種允坚。
1魂那、條件判斷語句
條件成立才執(zhí)行。如果條件不成立稠项，那就什么都不做涯雅。
格式：
? ? if(條件表達(dá)式) {
? ? ? ? // 條件為真時(shí)，做的事情
? ? }
2展运、條件分支語句
格式1：
? ? if(條件表達(dá)式) {
? ? ? ? // 條件為真時(shí)活逆，做的事情
? ? }else{
? ? ? ? // 條件為假時(shí)，做的事情
? ? }
格式：（多分支的if語句）
? ? if(條件表達(dá)式1) {
? ? ? ? // 條件1為真時(shí)拗胜，做的事情
? ? }elseif(條件表達(dá)式2) {
? ? ? ? // 條件1不滿足蔗候，條件2滿足時(shí)，做的事情
? ? }elseif(條件表達(dá)式3) {
? ? ? ? // 條件1挤土、2不滿足琴庵，條件3滿足時(shí)，做的事情
? ? }else{
? ? ? ? // 條件1仰美、2迷殿、3都不滿足時(shí)，做的事情
? ? }
以上所有的語句體中咖杂，只執(zhí)行其中一個(gè)庆寺。
例如:
? ? 根據(jù)BMI（身體質(zhì)量指數(shù)）顯示一個(gè)人的體型。
? ? BMI指數(shù)诉字，就是體重懦尝、身高的一個(gè)計(jì)算公式知纷。公式是：
? ? 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開發(fā)一個(gè)程序，讓用戶先輸入自己的體重踊挠，然后輸入自己的身高（彈出兩次prompt框）乍桂。
? ? 計(jì)算它的BMI，根據(jù)上表效床，彈出用戶的身體情況睹酌。比如“過輕” 、 “正呈Ｌ矗” 憋沿、“過重” 、 “肥胖” 沪猴、“非常肥胖”辐啄。
答案：
寫法1：
? ? //第一步，輸入身高和體重
? ? var height=parseFloat(prompt("請輸入身高字币，單位是米"));
? ? var weight=parseFloat(prompt("請輸入體重则披，單位是公斤"));
? ? //第二步共缕，計(jì)算BMI指數(shù)
? ? var BMI=weight/Math.pow(height,2);
? ? //第三步洗出，if語句來判斷。注意跳樓現(xiàn)象
? ? 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("請輸入體重，單位是公斤"));
? ? //第二步便贵，計(jì)算BMI指數(shù)
? ? var BMI=weight/Math.pow(height,2);
? ? //第三步菠镇，if語句來判斷。注意跳樓現(xiàn)象
? ? if(BMI>32) {
? ? ? ? alert("非常肥胖");
? ? }else if(BMI>=28) {
? ? ? ? alert("肥胖");
? ? }else if(BMI>=25) {
? ? ? ? alert("過重");
? ? }else ?if(BMI>=18.5) {
? ? ? ? alert("正常")
? ? }else{
? ? ? ? alert("偏瘦");
? ? }
if語句的嵌套
我們通過下面這個(gè)例子來引出if語句的嵌套承璃。
? ? 一個(gè)加油站為了鼓勵(lì)車主多加油利耍，所以加的多有優(yōu)惠。
? ? 92號汽油盔粹，每升6元隘梨；如果大于等于20升，那么每升5.9舷嗡；
? ? 97號汽油轴猎，每升7元；如果大于等于30升进萄，那么每升6.95
? ? 編寫JS程序捻脖，用戶輸入自己的汽油編號锐峭，然后輸入自己加多少升，彈出價(jià)格可婶。
代碼實(shí)現(xiàn)如下：
? ? //第一步沿癞，輸入
? ? var bianhao=parseInt(prompt("您想加什么油？填寫92或者97"));
? ? var sheng=parseFloat(prompt("您想加多少升矛渴？"));
? ? //第二步抛寝，判斷
? ? if(bianhao==92) {
? ? ? ? //編號是92的時(shí)候做的事情
? ? ? ? if(sheng>=20) {
? ? ? ? ? ? varprice=sheng*5.9;
? ? ? ? }else{
? ? ? ? ? ? varprice=sheng*6;
? ? ? ? }
? ? }else if(bianhao==97) {
? ? ? ? //編號是97的時(shí)候做的事情
? ? ? ? if(sheng>=30) {
? ? ? ? ? ? varprice=sheng*6.95;
? ? ? ? }else{
? ? ? ? ? ? varprice=sheng*7;
? ? ? ? }
? ? }else{
? ? ? ? alert("對不起，沒有這個(gè)編號的汽油曙旭！");
? ? }
? ? alert("價(jià)格是"+price);
switch語句（條件分支語句）
switch語句也叫條件分支語句盗舰。
格式：
switch(表達(dá)式) {
? ? case 值1：
? ? ? ? 語句體1;
? ? ? ? break;
? ? case 值2：
? ? ? ? 語句體2;
? ? ? ? break;
? ? ...
? ? ...
? ? default：
? ? ? ? 語句體 n+1;
? ? ? ? break;
}
switch語句的執(zhí)行流程
流程圖如下：
執(zhí)行流程如下：
（1）首先，計(jì)算出表達(dá)式的值桂躏，和case依次比較钻趋，一旦有對應(yīng)的值，就會執(zhí)行相應(yīng)的語句剂习，在執(zhí)行的過程中蛮位，遇到break就會結(jié)束。
（2）然后鳞绕，如果所有的case都和表達(dá)式的值不匹配失仁，就會執(zhí)行default語句體部分。
switch 語句的結(jié)束條件【非常重要】
情況a：遇到break就結(jié)束们何，而不是遇到default就結(jié)束萄焦。（因?yàn)閎reak在此處的作用就是退出switch語句）
情況b：執(zhí)行到程序的末尾就結(jié)束。
我們來看下面的兩個(gè)例子就明白了冤竹。
case穿透的問題
switch 語句中的break可以省略拂封，但一般不建議。否則結(jié)果可能不是你想要的鹦蠕，會出現(xiàn)一個(gè)現(xiàn)象：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("你輸入的數(shù)據(jù)有誤");
break;
?? }
上方代碼的運(yùn)行結(jié)果，可能會令你感到意外：
星期四
星期五
星期六
上方代碼的解釋：因?yàn)樵赾ase 4和case 5中都沒有break钟病，那語句走到case 6的break才會停止萧恕。
舉例2：
//switch判斷語句
var number=5;
switch(number) {
default:
console.log("我是defaul語句");
// 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é)果，你也許會意外：
我是defaul語句
第二個(gè)呵呵:5
第三個(gè)呵呵:5
上方代碼的解釋：代碼走到 default 時(shí)肠阱，因?yàn)闆]有遇到 break票唆，所以會繼續(xù)往下走，直到遇見 break 或者走到程序的末尾辖所。 從這個(gè)例子可以看出：switch 語句的結(jié)束與 default 的順序無關(guān)惰说。
循環(huán)語句：通過循環(huán)語句可以反復(fù)的執(zhí)行一段代碼多次。
for循環(huán)
語法：
? ? for(①初始化表達(dá)式; ②條件表達(dá)式; ④更新表達(dá)式){
? ? ? ? ③語句...
? ? }
執(zhí)行流程：
? ? ①執(zhí)行初始化表達(dá)式缘回，初始化變量（初始化表達(dá)式只會執(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;這條語句， 所以i的值是1授滓。
然后程序會驗(yàn)證一下i < 13是否滿足琳水，1<13是真，所以執(zhí)行一次循環(huán)體（就是大括號里面的語句）般堆。
執(zhí)行完循環(huán)體之后在孝，會執(zhí)行i=i+4這條語句，所以i的值淮摔，是5私沮。
程序會會驗(yàn)證一下i < 13是否滿足，5<13是真和橙，所以執(zhí)行一次循環(huán)體（就是大括號里面的語句）仔燕。
執(zhí)行完循環(huán)體之后，會執(zhí)行i=i+4這條語句魔招，所以i的值晰搀，是9。
程序會會驗(yàn)證一下i < 13是否滿足办斑，9<13是真外恕，所以執(zhí)行一次循環(huán)體（就是大括號里面的語句）。
執(zhí)行完循環(huán)體之后俄周，會執(zhí)行i=i+4這條語句吁讨，所以i的值，是13峦朗。
程序會會驗(yàn)證一下i < 13是否滿足，13<13是假排龄，所以不執(zhí)行循環(huán)體了波势，將退出循環(huán)。
最終輸出輸出結(jié)果為：1橄维、5尺铣、9
接下來做幾個(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)
語法：
while(條件表達(dá)式){
? ? 語句...
}
執(zhí)行流程：
while語句在執(zhí)行時(shí)竞川，先對條件表達(dá)式進(jìn)行求值判斷：
? ? 如果值為true店溢，則執(zhí)行循環(huán)體：
? ? ? ? 循環(huán)體執(zhí)行完畢以后叁熔，繼續(xù)對表達(dá)式進(jìn)行判斷
? ? ? ? 如果為true，則繼續(xù)執(zhí)行循環(huán)體床牧，以此類推
? ? 如果值為false荣回，則終止循環(huán)
如果有必要的話，我們可以使用 break 來終止循環(huán)戈咳。
do...while循環(huán)
語法：
? ? do{
? ? ? ? 語句...
? ? }while(條件表達(dá)式)
執(zhí)行流程：
? ? do...while語句在執(zhí)行時(shí)心软，會先執(zhí)行循環(huán)體：
? ? ? ? 循環(huán)體執(zhí)行完畢以后，在對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è)語句的功能類似踏堡，不同的是：
while是先判斷后執(zhí)行泳姐，而do...while是先執(zhí)行后判斷。
也就是說暂吉，do...while可以保證循環(huán)體至少執(zhí)行一次胖秒，而while不能。
while循環(huán)舉例
題目：假如投資的年利率為5%慕的，試求從1000塊增長到5000塊阎肝，需要花費(fèi)多少年？
代碼實(shí)現(xiàn)：
<!DOCTYPE html>
<htmllang="">
<head>
<meta>
<meta>
<meta>
<title>Document</title>
</head>
<body>
<script>
/*
? ? ? ? * 假如投資的年利率為5%肮街，試求從1000塊增長到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)來計(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塊增長到1萬塊绕辖，需要花費(fèi)48年：
10401.269646942128
一共需要48年
break 和 continue
這個(gè)知識點(diǎn)非常重要摇肌。
break
break可以用來退出switch語句或整個(gè)循環(huán)語句（循環(huán)語句包括for、while仪际。不包括if围小。if里不能用 break 和 continue，否則會報(bào)錯(cuò)）树碱。
break會立即終止離它最近的那個(gè)循環(huán)語句肯适。
可以為循環(huán)語句創(chuàng)建一個(gè)label，來標(biāo)識當(dāng)前的循環(huán)（格式：label:循環(huán)語句）成榜。使用break語句時(shí)框舔，可以在break后跟著一個(gè)label，這樣break將會結(jié)束指定的循環(huán)，而不是最近的刘绣。
舉例1：通過 break 終止循環(huán)語句
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可以用來跳過當(dāng)次循環(huán)饺窿。
同樣，continue默認(rèn)只會離他最近的循環(huán)起作用移斩。
例子1:在頁面中接收一個(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("請輸入一個(gè)大于1的整數(shù):");
//判斷這個(gè)值是否合法
if(num<=1) {
alert("該值不合法猖任！");
}else{
//先用flag標(biāo)志位你稚，來保存當(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整除，則說明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è)布爾值长搀，用來保存結(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)源请，用來控制乘法表的高度
for(var i=1;i<=9;i++) {
//創(chuàng)建一個(gè)內(nèi)層循環(huán)來控制圖形的寬度
for(va rj=1;j<=i;j++) {
document.write("<span>"+j+"*"+i+"="+i*j+"</span>");
? ? ? ? ?? }
//輸出一個(gè)換行
document.write("<br />");
? ? ?? }
</script>
</head>
<body>
</body>
</html>
頁面效果：
