代碼塊

用{}包圍起來的代碼，就是代碼塊。

JS中的代碼塊，只具有分組的作用，沒有其他的用途。

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

{ var a = 2; alert("qianguyihao"); 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í)，做的事情}

格式2：(多分支的if語句)

if (條件表達(dá)式1) { // 條件1為真時(shí)，做的事情} else if (條件表達(dá)式2) { // 條件1不滿足，條件2滿足時(shí)，做的事情} else if (條件表達(dá)式3) { // 條件1、2不滿足，條件3滿足時(shí)，做的事情} else { // 條件1、2、3都不滿足時(shí)，做的事情}

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

做個(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("請(qǐng)輸入身高，單位是米"));var weight = parseFloat(prompt("請(qǐng)輸入體重，單位是公斤"));//第二步，計(jì)算BMI指數(shù)var BMI = weight / Math.pow(height, 2);//第三步，if語句來判斷。注意跳樓現(xiàn)象if (BMI < 18.5) { alert("偏瘦");} else if (BMI < 25) { alert("正常");} else if (BMI < 28) { alert("過重");} else if (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語句來判斷。注意跳樓現(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號(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) {var price = sheng * 5.9;} else {var price = sheng * 6;}} else if (bianhao == 97) {//編號(hào)是97的時(shí)候做的事情if (sheng >= 30) {var price = sheng * 6.95;} else {var price = sheng * 7;}} else {alert("不好意思，沒有這個(gè)編號(hào)的汽油！");}alert("價(jià)格是" + price);

switch語句(條件分支語句)

switch語句也叫條件分支語句。

格式：

switch(表達(dá)式) {case 值1：語句體1;break;case 值2：語句體2;break;......default：語句體 n+1;break;}

注意：

• switch 可以理解為“開關(guān)、轉(zhuǎn)換” 。case 可以理解為“案例、選項(xiàng)”。
• switch 后面的括號(hào)里可以是表達(dá)式或者值， 通常是一個(gè)變量(通常做法是：先把表達(dá)式或者值存放到變量中)。
• JS 是屬于弱類型語言，case 后面的值1、值2可以是 'a'、6、true 等任意數(shù)據(jù)類型的值，也可以是表達(dá)式。

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

流程圖如下：

執(zhí)行流程如下：

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

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

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

• 情況a：遇到break就結(jié)束，而不是遇到default就結(jié)束。(因?yàn)閎reak在此處的作用就是退出switch語句)
• 情況b：執(zhí)行到程序的末尾就結(jié)束。

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

case穿透的問題

switch 語句中的break可以省略，但一般不建議(對(duì)于新手而言)。否則結(jié)果可能不是你想要的，會(huì)出現(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é)果，可能會(huì)令你感到意外：

星期四星期五星期六

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

舉例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é)果，你也許會(huì)意外：

我是defaul語句第二個(gè)呵呵:5第三個(gè)呵呵:5

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

switch 語句的實(shí)戰(zhàn)舉例：替換 if 語句

我們實(shí)戰(zhàn)開發(fā)中，經(jīng)常需要根據(jù)接口的返回碼 retCode ，來讓前端做不同的展示。

這種場景是業(yè)務(wù)開發(fā)中經(jīng)常出現(xiàn)的，請(qǐng)一定要掌握。然而，很多人估計(jì)會(huì)這么寫：

寫法1：(不推薦。這種寫法太挫了)

let retCode = 1003; // 返回碼 retCode 的值可能有很多種情況if (retCode == 0) { alert('接口聯(lián)調(diào)成功');} else if (retCode == 101) { alert('活動(dòng)不存在');} else if (retCode == 103) { alert('活動(dòng)未開始');} else if (retCode == 104) { alert('活動(dòng)已結(jié)束');} else if (retCode == 1001) { alert('參數(shù)錯(cuò)誤');} else if (retCode == 1002) { alert('接口頻率限制');} else if (retCode == 1003) { alert('未登錄');} else if (retCode == 1004) { alert('(風(fēng)控用戶)提示 活動(dòng)太火爆啦~軍萬馬都在擠，請(qǐng)稍后再試');} else {// 其他異常返回碼 alert('系統(tǒng)君失聯(lián)了，請(qǐng)稍候再試');}

如果你是按照上面的 if else的方式來寫各種條件判斷，說明你的代碼水平太初級(jí)了，會(huì)被人噴的，千萬不要這么寫。那要怎么改進(jìn)呢？繼續(xù)往下看。

寫法2：(推薦。通過 return 的方式，將上面的寫法進(jìn)行改進(jìn))

let retCode = 1003; // 返回碼 retCode 的值可能有很多種情況handleRetCode(retCode);// 方法：根據(jù)接口不同的返回碼，處理前端不同的顯示狀態(tài)function handleRetCode(retCode) { if (retCode == 0) { alert('接口聯(lián)調(diào)成功'); return; } if (retCode == 101) { alert('活動(dòng)不存在'); return; } if (retCode == 103) { alert('活動(dòng)未開始'); return; } if (retCode == 104) { alert('活動(dòng)已結(jié)束'); return; } if (retCode == 1001) { alert('參數(shù)錯(cuò)誤'); return; } if (retCode == 1002) { alert('接口頻率限制'); return; } if (retCode == 1003) { alert('未登錄'); return; } if (retCode == 1004) { alert('(風(fēng)控用戶)提示 活動(dòng)太火爆啦~軍萬馬都在擠，請(qǐng)稍后再試'); return; } // 其他異常返回碼 alert('系統(tǒng)君失聯(lián)了，請(qǐng)稍候再試'); return;}

上面的寫法2，是比較推薦的寫法：直接通過 return 的方式，讓 function 里的代碼不再繼續(xù)往下走，這就達(dá)到目的了。對(duì)了，因?yàn)橐玫?return ，所以需要單獨(dú)封裝到一個(gè) function 里面。

如果你以后看到有前端小白采用的是寫法1，請(qǐng)一定要把寫法2傳授給他：不需要那么多的 if else，直接用 return 返回就行了。

寫法3：(推薦。將 if else 改為 switch)

let retCode = 1003; // 返回碼 retCode 的值可能有很多種情況switch (retCode) { case 0: alert('接口聯(lián)調(diào)成功'); break; case 101: alert('活動(dòng)不存在'); break; case 103: alert('活動(dòng)未開始'); break; case 104: alert('活動(dòng)已結(jié)束'); break; case 1001: alert('參數(shù)錯(cuò)誤'); break; case 1002: alert('接口頻率限制'); break; case 1003: alert('未登錄'); break; case 1004: alert('(風(fēng)控用戶)提示 活動(dòng)太火爆啦~軍萬馬都在擠，請(qǐng)稍后再試'); break;// 其他異常返回碼 default: alert('系統(tǒng)君失聯(lián)了，請(qǐng)稍候再試'); break;}

在實(shí)戰(zhàn)開發(fā)中，方式3是非常推薦的寫法，甚至比方式2還要好。我們盡量不要寫太多的 if 語句，避免代碼嵌套過深。

switch 語句的優(yōu)雅寫法：適時(shí)地去掉 break

我們先來看看下面這段代碼：(不推薦)

let day = 2;switch (day) { case 1: console.log('work'); break; case 2: console.log('work'); break; case 3: console.log('work'); break; case 4: console.log('work'); break; case 5: console.log('work'); break; case 6: console.log('relax'); break; case 7: console.log('relax'); break; default: break;}

上面的代碼，咋一看，好像沒啥毛病。但你有沒有發(fā)現(xiàn)，重復(fù)代碼太多了？

實(shí)戰(zhàn)開發(fā)中，凡是有重復(fù)的地方，我們都必須要想辦法簡化。寫代碼就是在不斷重構(gòu)的過程。

上面的代碼，可以改進(jìn)如下：(推薦，非常優(yōu)雅)

let day = 2;switch (day) { case 1: case 2: case 3: case 4: case 5: console.log('work'); break; // 在這里放一個(gè) break case 6: case 7: console.log('relax'); break; // 在這里放一個(gè) break default: break;}}

你沒看錯(cuò)，就是上面的這種寫法，能達(dá)到同樣的效果，非常優(yōu)雅。

小白可能認(rèn)為這樣的寫法可讀性不強(qiáng)，所以說他是小白。我可以明確告訴你，改進(jìn)后的這種寫法，才是最優(yōu)雅的、最簡潔、可讀性最好的。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的expect switch 多条件_JavaScript-流程控制语句：选择结构（if和switch）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。