當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

expect switch 多条件_JavaScript-流程控制语句：选择结构（if和switch）

發布時間：2023/12/15 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 expect switch 多条件_JavaScript-流程控制语句：选择结构（if和switch）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

代碼塊

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

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

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

{ var a = 2; alert("qianguyihao"); console.log("永不止步");}console.log("a = " + a);

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

永不止步a = 2

流程控制語句

在一個程序執行的過程中，各條語句的執行順序對程序的結果是有直接影響的。所以，我們必須清楚每條語句的執行流程。而且，很多時候我們要通過控制語句的執行順序來實現我們要完成的功能。

流程控制語句分類

順序結構
選擇結構：if語句、switch語句
循環結構：while語句、for語句

順序結構

按照代碼的先后順序，依次執行。結構圖如下：

if語句

if語句有以下三種。

1、條件判斷語句

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

格式：

if (條件表達式) { // 條件為真時，做的事情}

2、條件分支語句

格式1：

if (條件表達式) { // 條件為真時，做的事情} else { // 條件為假時，做的事情}

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

if (條件表達式1) { // 條件1為真時，做的事情} else if (條件表達式2) { // 條件1不滿足，條件2滿足時，做的事情} else if (條件表達式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("偏瘦");} else if (BMI < 25) { alert("正常");} else if (BMI < 28) { alert("過重");} else if (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) {var price = sheng * 5.9;} else {var price = sheng * 6;}} else if (bianhao == 97) {//編號是97的時候做的事情if (sheng >= 30) {var price = sheng * 6.95;} else {var price = sheng * 7;}} else {alert("不好意思，沒有這個編號的汽油！");}alert("價格是" + price);

switch語句(條件分支語句)

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

格式：

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

注意：

switch 可以理解為“開關、轉換” 。case 可以理解為“案例、選項”。
switch 后面的括號里可以是表達式或者值，通常是一個變量(通常做法是：先把表達式或者值存放到變量中)。
JS 是屬于弱類型語言，case 后面的值1、值2可以是 'a'、6、true 等任意數據類型的值，也可以是表達式。

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 的順序無關。

switch 語句的實戰舉例：替換 if 語句

我們實戰開發中，經常需要根據接口的返回碼 retCode ，來讓前端做不同的展示。

這種場景是業務開發中經常出現的，請一定要掌握。然而，很多人估計會這么寫：

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

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

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

上面的寫法2，是比較推薦的寫法：直接通過 return 的方式，讓 function 里的代碼不再繼續往下走，這就達到目的了。對了，因為要用到 return ，所以需要單獨封裝到一個 function 里面。

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

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

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

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

switch 語句的優雅寫法：適時地去掉 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;}

上面的代碼，咋一看，好像沒啥毛病。但你有沒有發現，重復代碼太多了？

實戰開發中，凡是有重復的地方，我們都必須要想辦法簡化。寫代碼就是在不斷重構的過程。

上面的代碼，可以改進如下：(推薦，非常優雅)

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

你沒看錯，就是上面的這種寫法，能達到同樣的效果，非常優雅。

小白可能認為這樣的寫法可讀性不強，所以說他是小白。我可以明確告訴你，改進后的這種寫法，才是最優雅的、最簡潔、可讀性最好的。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python的线性链表_Python线性
下一篇：英雄联盟s8淘汰赛规则