JavaScript流程控制(分支)
一、流程控制
流程控制主要有三種結(jié)構(gòu):
- 分別是順序結(jié)構(gòu)
- 分支結(jié)構(gòu)
- 循環(huán)結(jié)構(gòu)
這三種結(jié)構(gòu)代表三種代碼執(zhí)行的順序。
二、順序流程控制
順序結(jié)構(gòu)是程序中最簡單、最基本的流程控制,它沒有特定的語法結(jié)構(gòu),程序會按照代碼的先后順序,依次執(zhí)行,程序中大多數(shù)的代碼都是這樣執(zhí)行的。
三、分支流程控制 if 語句
1、分支結(jié)構(gòu)
由上到下執(zhí)行代碼的過程中,根據(jù)不同的條件,執(zhí)行不同的路徑代碼(執(zhí)行代碼多選一的過程),從而得到不同的結(jié)果。
2、 if 語句
// 條件成立執(zhí)行代碼,否則什么也不做 if (條件表達(dá)式) { // 條件成立執(zhí)行的代碼語句 }
執(zhí)行流程為:
例如:彈出一個輸入框,要求用戶輸入年齡,如果年齡大于等于 18 歲,允許進網(wǎng)吧。
var age = prompt('請輸入您的年齡:'); if(age > 18) { alert('您的年齡合法,請進入!'); }
當(dāng)輸入的數(shù)值大于等于18時,彈出:
3、 if else語句(雙分支語句)
語法結(jié)構(gòu):
// 條件成立 執(zhí)行 if 里面代碼,否則執(zhí)行else 里面的代碼 if (條件表達(dá)式) { // [如果] 條件成立執(zhí)行的代碼 } else { // [否則] 執(zhí)行的代碼 }
執(zhí)行流程:
例如:寫一個是否為閏年的案例,接收用戶輸入的年份,如果是閏年就彈出閏年,否則彈出是平年。
算法分析:
算法:能被4整除且不能整除100的為閏年(如2004年就是閏年,2005年不是閏年)或者能夠被 400 整除的就是閏年
彈出prompt
輸入框,讓用戶輸入年份,把這個值取過來保存到變量中
使用 if 語句來判斷是否是閏年,如果是閏年,就執(zhí)行 if 大括號里面的輸出語句,否則就執(zhí)行 else里面的輸出語句
一定要注意里面的且 && 還有或者 || 的寫法,同時注意判斷整除的方法是取余為 0
var year = prompt('請輸入要判斷的年份:'); if(year%400 == 0 || year % 4 == 0 && year / 100 != 0) { alert('該年是閏年!'); }else{ alert('該年是平年!'); }
當(dāng)輸入2004年的時候:
當(dāng)輸入2005年時,彈出:
4、if else if 語句(多分支語句)
語法結(jié)構(gòu):
// 適合于檢查多重條件。 if (條件表達(dá)式1) { 語句1; } else if (條件表達(dá)式2) { 語句2; } else if (條件表達(dá)式3) { 語句3; .... } else { // 上述條件都不成立執(zhí)行此處代碼 }
執(zhí)行流程:
例如:輸出一個判斷成績的案例,接收用戶輸入的分?jǐn)?shù),根據(jù)分?jǐn)?shù)輸出對應(yīng)的等級字母 A、B、C、D、E。其中:
- 90分(含)以上 ,輸出:A
- 80分(含)~ 90 分(不含),輸出:B
- 70分(含)~ 80 分(不含),輸出:C
- 60分(含)~ 70 分(不含),輸出:D
- 60分(不含) 以下,輸出: E
案例分析:
按照從大到小判斷的思路
彈出prompt
輸入框,讓用戶輸入分?jǐn)?shù),把這個值取過來保存到變量中
使用多分支 if else if
語句來分別判斷輸出不同的值
var score = prompt('請您輸入分?jǐn)?shù):'); if (score >= 90) { alert('A'); } else if (score >= 80) { alert('B'); } else if (score >= 70) { alert('C'); } else if (score >= 60) { alert('D'); } else { alert('E'); }
當(dāng)輸入對應(yīng)的分?jǐn)?shù)時,就會彈出對應(yīng)的等級。
四、三元表達(dá)式
三元表達(dá)式也能做一些簡單的條件選擇。 有三元運算符組成的式子稱為三元表達(dá)式。
表達(dá)式1 ? 表達(dá)式2 : 表達(dá)式3;
執(zhí)行思路:
如果表達(dá)式1為 true ,則返回表達(dá)式2的值,如果表達(dá)式1為 false,則返回表達(dá)式3的值
簡單理解: 就類似于 if else (雙分支) 的簡寫
例如:輸入一個補0的案例,用戶輸入數(shù)字,如果數(shù)字小于10,則在前面補 0 ,比如01,09 ,如果數(shù)字大于10,則不需要補,比如 20。
案例分析:
用戶輸入0~59之間的一個數(shù)字,如果數(shù)字小于10,則在這個數(shù)字前面補0,(加0) 否則 不做操作,用一個變量接受這個返回值,輸出
var num = prompt('請輸入一個 0 ~ 59 之間的數(shù)'); var result = num < 10 ? '0'+ num : num; alert(result);
當(dāng)輸入2時,進行補0操作:
當(dāng)輸入10時,直接打印結(jié)果:
五、分支流程控制 switch 語句
1、語法結(jié)構(gòu)
switch
語句也是多分支語句,它用于基于不同的條件來執(zhí)行不同的代碼。當(dāng)要針對變量設(shè)置一系列的特定值的選項時,就可以使用 switch
。
語法結(jié)構(gòu):
switch( 表達(dá)式 ){ case value1: // 表達(dá)式 等于 value1 時要執(zhí)行的代碼 break; case value2: // 表達(dá)式 等于 value2 時要執(zhí)行的代碼 break; default: // 表達(dá)式 不等于任何一個 value 時要執(zhí)行的代碼 }
switch
:開關(guān) 轉(zhuǎn)換 , case
:小例子 選項
- 關(guān)鍵字
switch
后面括號內(nèi)可以是表達(dá)式或值, 通常是一個變量 - 關(guān)鍵字
case
, 后跟一個選項的表達(dá)式或值,后面跟一個冒號不能跟判斷條件。 switch
表達(dá)式的值會與結(jié)構(gòu)中的 case 的值做比較 ,如果存在匹配全等(===) ,則與該 case 關(guān)聯(lián)的代碼塊會被執(zhí)行,并在遇到break
時停止,整個switch
語句代碼執(zhí)行結(jié)束- 如果所有的
case
的值都和表達(dá)式的值不匹配,則執(zhí)行default
里的代碼
注意: 執(zhí)行case 里面的語句時,如果沒有break,則繼續(xù)執(zhí)行下一個case里面的語句。
例如輸入一個查詢成績的案例,要求同上面的if-else-if語句。
var s = prompt('請輸入成績:'); var n = parseInt(s/10); var k = null; switch(n){ case 10: { k = 'A'; break; } case 9:{ k = 'B'; break; } case 8:{ k = 'C'; break; } case 7:{ k = 'D'; break; } default: k = 'E'; } console.log('您的成績等級為:'+k);
當(dāng)輸入100分時,輸出:
當(dāng)輸入73分時,輸出:
2、switch 語句和 if else if 語句的區(qū)別
- 一般情況下,它們兩個語句可以相互替換
switch…case
語句通常處理 case為比較確定值的情況, 而if…else…
語句更加靈活,常用于范圍判斷(大于、等于某個范圍) - switch 語句進行條件判斷后直接執(zhí)行到程序的條件語句,效率更高。而
if…else
語句有幾種條件,就得判斷多少次。 - 當(dāng)分支比較少時,
if… else
語句的執(zhí)行效率比switch
語句高。 - 當(dāng)分支比較多時,switch語句的執(zhí)行效率比較高,而且結(jié)構(gòu)更清晰。
到此這篇關(guān)于JavaScript流程控制(分支)的文章就介紹到這了,更多相關(guān)JavaScript流程控制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽的實例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽的實例的相關(guān)資料,這里提供image觸摸并監(jiān)聽的簡單實例,需要的朋友可以參考下2017-08-08微信小程序 wxapp導(dǎo)航 navigator詳解
這篇文章主要介紹了微信小程序 wxapp導(dǎo)航 navigator詳解的相關(guān)資料,并附簡單實例代碼,需要的朋友可以參考下2016-10-10Lodash加減乘除add?subtract?multiply?divide方法源碼解讀
這篇文章主要介紹了Lodash加減乘除add?subtract?multiply?divide方法源碼解讀,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05JavaScript設(shè)計模式之命令模式和狀態(tài)模式詳解
這篇文章主要為大家介紹了JavaScript設(shè)計模式之命令模式和狀態(tài)模式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08JavaScript?Broadcast?Channel?API使用學(xué)習(xí)
這篇文章主要為大家介紹了JavaScript的api學(xué)習(xí)之Broadcast?Channel?API使用方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05