在一個程序執行的過程中,語句的執行順序對程序的結果是有直接影響的。也就是說程序的流程對運行結果有直接的影響。
語句流程控制是用來控制程序中各條語句的執行順序,它可以把語句組合成能完成一定功能的代碼段。流程控制方式主要有:順序結構、條件結構和循環結構。
順序結構
順序結構是流程控制中最簡單、也是最常用的結構,結構內的所有語句按順序執行,只有上一條語句執行完成後,才執行下一條語句。
function add(){num1 = parseInt(document.getElementById("op1").value); num2 = parseInt(document.getElementById("op2").value); alert(sum(num1,num2));}
add函數體內的語句就是順序結構,函數從第一條語句開始執行,按順序執行,直至最後一條語句。
在條件結構和循環結構中,也包含順序結構。
條件結構
在很多情況下,程序並不是按既定的順序執行,而是根據不同請況進行判斷,然後執行不同的操作,這種流程稱為條件結構,也稱為選擇結構。
依據條件選擇方式,條件結構又分為簡單條件結構、多重條件結構、嵌套條件結構、switch結構。
簡單條件結構
簡單條件結構也稱為if-else結構,語法如下:
if(條件表達式) {代碼段1}else { 代碼段2}
if和else是JS關鍵字,條件表達式必須括在一對圓括號之內,表達式返回布爾值。代碼段是一條或多條JS語句。如果條件表達式返回的值為真,則執行代碼段1。如果條件表達式返回的值為假,則執行代碼段2。
若代碼段僅包含一條語句時,語句可以不使用大括號「{}」括起來。
若程序不需要處理條件表達式返回假值的情況,else部分可以省略。
if(條件表達式) {代碼段1}
上面的條件結構只處理條件表達式返回真值的情況。
多重條件結構
在一些情況下,需要檢查多個條件,解決這種情況可用多重if、嵌套if或switch結構來解決。多重條件結構語法如下:
If(條件表達式1){代碼段1;} else if(條件表達式2){代碼段2;} else if(條件表達式3) {代碼段3;}……else {代碼段n;}
多重條件結構是從上到下逐個對條件進行判斷,一旦發現條件滿足就執行與該條件相關的語句,並跳過其他的條件判斷;若沒有一個條件滿足,則執行最後一個else後的語句塊;如果沒有最後的else語句,則不執行任何操作,執行該結構後面的語句。
若代碼段僅包含一條語句時,語句可以不使用大括號「{}」括起來。
嵌套條件結構
嵌套條件結構是在if-else結構內插入另一個條件結構,嵌套條件結構主要用於只有當前提條件滿足時,才判斷後續條件是否滿足。
嵌套條件結構語法如下:
if(條件表達式){if(條件表達式) {代碼段;}else {代碼段;}}else {代碼段;}
switch結構
switch結構也屬於條件結構,switch結構的語法同if-else結構的語法不太相同,所以單獨列出說明。
switch結構語法如下:
switch (表達式){case 常量表達式1: 代碼段1; break; case 常量表達式2: 代碼段2; break; case 常量表達式3: 代碼段3; break; ……… default: 代碼段n; }
其中,switch關鍵字後的表達式必須是一個整型表達式,即計算後其值為int類型,或可以轉換為int的類型,如char等。case關鍵字後面的常量表達式要求是整型常量組成的表達式,通常是字符、數字等。
循環結構
循環結構是程序中一種很重要的結構。其特點是,在給定條件成立時,重複執行某程序段,直到條件不成立為止。給定的條件成為循環條件,反覆執行的程序段稱為循環體。JavaScript語言提供了二種不同形式的循環結構,分別是for循環結構和while循環結構。
for循環結構
for循環不僅可以用於循環次數已經確定的情況,而且可以用於循環次數不確定而只給出循環條件的情況。
for循環結構語法如下:
for(表達式1; 表達式2; 表達式3;){代碼段;}
表達式1:通常用來給循環變量賦初值,一般是賦值表達式,也允許在for語句外給循環變量賦初值,此時可以省略該表達式;
表達式2:通常是循環條件,一般為關係表達式或邏輯表達式;
表達式3: 通常可用來修改循環變量的值,一般是賦值語句。
for循環中的這三部分必須用分號隔開,組成循環體的語句可以是單條語句或多條語句。
for循環結構的執行順序是:
(1)首先計算表達式1的值,通常為循環變量賦初值;
(2)再計算表達式2的值,即判斷循環條件是否為真,若值為真則執行循環體一次,否則跳出循環;
(3)再計算表達式3的值,這裡通常寫更新循環變量的賦值表達式,然後轉回第二步重複執行。
在整個for循環過程中,表達式1隻計算一次,表達式2和表達式3則可能計算多次。循環體可能執行多次,也可能一次都不執行。
另外,for循環結構的表達式1、表達式2、表達式3在一些情況可以省略,若表達式2省略,在循環體中需要有退出循環的語句,一般是break語句。
for/in循環
JavaScript還支持for/in循環結構,for/in循環結構是for循環結構的一個變種,語法如下:
for(variable in object) {代碼段;}
其中,variable是循環變量,in是JS關鍵字,object是對象,該結構用於遍歷對象的屬性。
while循環
while循環結構的語法是:
while( 條件表達式 ) {代碼段;}
其中,條件表達式是循環條件,代碼段為循環體。while循環結構的執行流程:計算條件判斷表達式的值,當值為真(非0)時,執行循環體語句,一旦條件為假,就停止執行循環體。如果條件在開始時就為假,則不執行循環體語句直接退出循環。
dowhile循環
do while循環結構的語法是:
do{代碼段;}while(條件);
do-while循環與while循環的不同在於:它先執行循環體中的語句,然後再判斷條件是否為真。如果為真則繼續循環,如果為假,則終止循環。因此,do-while循環至少要執行一次循環語句。
嵌套循環結構
for循環結構和while循環結構都支持嵌套循環,即在循環體內嵌入for或者while循環。
for(var i = 0; i<5;i++) {for(var j = 0;j<5;j++) { document.write(i*j);}}
上面的案例代碼就是嵌套循環,第一層for循環稱為外循環,第二層for循環稱為內循環。
首先外循環的第一輪觸發內循環,內循環將一直執行到完成為止,然後,外循環的第二輪再次觸發內循環,此過程不斷重複直到外循環結束,使用嵌套循環時,只有在內循環完全結束後,外循環才會執行下一趟循環。
break和continue語句
有時可能不知道循環將要執行的次數,終止循環的條件可在以後確定。所以需要提供一種機制在條件滿足的時候跳出循環。有時候,我們需要根據條件跳過循環中的一些語句。JavaScript語言提供了break和continue兩個關鍵字(也稱為break語句和continue語句),用於改變程序的控制流。
break語句
break語句通常用在前面介紹過的switch結構和循環結構內。當break語句用於switch結構時,可使程序跳出switch結構而執行switch結構之後的語句;當break語句用於while、do-while、for循環結構時,可使程序終止循環而執行循環後面的語句。
function test() {var i = 0;while (i < 7) {i++;if (i == 5) {break;}document.write(i);}}
test()函數用於輸出0至4的數。i為循環變量,初始值為0,while循環條件為i<7,在循環體內判斷i是否等於5,若等於5就退出while循環。因此test()函數隻輸出0至4的數。
continue語句
continue語句只能用在循環裡。continue語句的作用是跳過循環體中剩餘的語句而準備執行下一次循環。對於while和do-while循環,continue執行之後的動作是條件判斷;對於for循環,隨後的動作是變量更新。
注意break語句和continue語句的差別。break語句導致循環終止,使程序控制流轉向這個循環語句之後;而continue引起的則是循環內部的一次控制轉移,使執行控制跳到循環體的最後,相當於跳過循環體裡continue語句後面的那些語句,繼續下一次循環。
function test() {var i;var sum = 0;for (i = 1; i <= 100; i++) {// 判斷i的餘數是否是3if (i % 10 == 3) {// 執行下一輪循環continue;}sum += i;}document.write(sum)}
test()函數求整數1至100的累加值,但要求跳過所有個位為3的數。
函數使用for循環來求整數1至100的累加值,在for循環體內判斷i除以10的餘數是否等於3,如果是,則意味該數的個位數是3,這種情況下,將使用continue語句跳過後續語句,然後轉向for循環的表達式3更新循環變量,繼續下一次循環。
案例代碼
<html><head><title>JavaScript開發案例</title><meta http-equiv="Content-Type" ontent="text/html; charset=utf-8" /><script type="text/javascript"> // 簡單條件案例 function condition_01(num){ if( num > 100 ){ document.getElementById("id_result").value = "condition_01函數:參數num大於100" }else{ document.getElementById("id_result").value = "condition_01函數:參數num小於100" } } //多重條件案例 function condition_02(num){ if (num >= 90) document.getElementById("id_result").value = "condition_02函數:優" else if ((num >= 80) && (num < 90)) document.getElementById("id_result").value = "condition_02函數:良" else if ((num >= 60) && (num < 80)) document.getElementById("id_result").value = "condition_02函數:中" else document.getElementById("id_result").value = "condition_02函數:差" } //switch結構案例 function condition_03(score){ var grade; switch (parseInt(score / 10)) { case 10: grade = "A"; break; case 9: grade = "B"; break; case 8: grade = "C"; break; case 7: grade = "D"; break; case 6: grade = "E"; break; default: grade = "F"; } document.getElementById("id_result").value = "condition_03函數:" + grade; } //for循環結構案例,輸出自然數的階乘 function loop_for(num){ factorial = 1; for (var count = 1; count <= num; count++) { factorial = factorial * count; } document.getElementById("id_result").value = "loop_for函數:" + factorial; } //while循環結構案例,輸出攝氏溫度與華氏溫度的對照表 function loop_while(num){ var count = 0; var c = 0; var f; var content = ""; // 輸出控制在10條以內 while (c <= 250 && count < 10) { count++; content += "攝氏溫度:" + count + " " //計算華氏溫度 f = c * 9 / 5.0 + 32.0; content += "華氏溫度:" + f + " " c = c + 20; } document.getElementById("id_result").value = "loop_while函數:" + content; }</script></head><body><h3>JavaScript開發案例</h3><hr><form action="/login.jsp"> <p>執行結果:<input type="text" id="id_result" size="60" value=""/></p><p><input type="button" value="簡單條件結構" onclick="condition_01(80)"/></p> <p><input type="button" value="多重條件結構" onclick="condition_02(96)"/></p> <p><input type="button" value="switch結構" onclick="condition_03(86)"/></p> <p><input type="button" value="for循環結構" onclick="loop_for(6)"/></p> <p><input type="button" value="while循環結構" onclick="loop_while()"/></p></form></boyd><html>
案例代碼執行界面如下圖所示: