第三篇:JavaScript語句流程控制

2020-12-12 米粒教育

在一個程序執行的過程中,語句的執行順序對程序的結果是有直接影響的。也就是說程序的流程對運行結果有直接的影響。

語句流程控制是用來控制程序中各條語句的執行順序,它可以把語句組合成能完成一定功能的代碼段。流程控制方式主要有:順序結構、條件結構和循環結構。

順序結構

順序結構是流程控制中最簡單、也是最常用的結構,結構內的所有語句按順序執行,只有上一條語句執行完成後,才執行下一條語句。

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>

案例代碼執行界面如下圖所示:

相關焦點

  • 3.2.3 JavaScript中for循環語句的使用
    JavaScript中的for循環語句也稱為計次循環語句,一般用於循環次數已知的情況。其語法格式如下:for(初始化語句,條件表達式,迭代語句){語句組}參數說明:1)初始化語句:一般用來對循環變量進行初始化賦值。
  • 「Java」基礎10:什麼叫流程控制語句?
    這一段描述下來,找工作面試的過程就是流程。公司對面試人員的安排就叫做流程的控制。在程序中也是一樣的道理。一、順序結構打電話、筆試、一面、二面、錄取這就是順序結構。執行流程首先判斷布爾表達式看其結果是true還是false如果是true就執行語句體1如果是false就執行語句體2
  • 3.1.5 JavaScript中switch語句的使用
    而switch語句是典型的多路分支(多路選擇)語句,其作用與if-else-if語句基本相同,但switch語句比if-else-if語句更具有可讀性,它可以根據一個表達式的值在給定的多個選擇中選擇一個符合條件的分支來執行。而且switch語句允許在找不到一個匹配條件的情況下能執行默認的一個分支。
  • 3.2.2 JavaScript中do-while循環語句的使用
    JavaScript中的do-while循環語句也稱為後測試循環語句,它先執行一次,然後再測試循環條件是否成立,如果成立則循環,如果不成立則結束循環。其語法格式如下:do{語句組} while(表達式);參數說明:1)語句組:用來指定需要重複執行的語句,即循環體,可以是一條或多條語句。
  • Javascript 生成器
    在 javascript 中,如果想要使用生成器,則需要: 定義特殊的生成器函數 調用該函數創建一個生成器對象 在循環中使用該生成器對象,或直接調用其 方法 我們以下面這個簡單的程序做為起點,並執行以下每個步驟:
  • 《第4章 Python 流程控制語語句》4.2.2 if……else語句!
    《高中信息技術 Python編程》 教學案《第4章 Python 流程控制語語句》4.2.2 if...else語句!瀏覽器版本過低,暫不支持視頻播放(2)if....else...形式語句格式示例:if 要判斷的條件:滿足條件時執行的語句else:
  • javascript中那些奇怪的特性
    如果想深入了解 IIFE,請查看Chandra Gundamaraju 的這篇很酷的文章。With語句你知道JavaScript有with語句塊嗎?事實上with是JS中的一個關鍵詞。模板字符串帶標籤的模板字符串能讓你更好地控制從模板解析成字符串的過程,它比普通的模板字符串只是多了一個自定義的標籤。這個標籤代表著一個解析函數,它會得到從模板字符串解析出來的字符串和值列表,通過邏輯處理返回最終的生成的字符串。
  • 這一次,徹底弄懂 JavaScript 執行機制
    因為javascript是一門單線程語言,所以我們可以得出結論:javascript是按照語句出現的順序執行的看到這裡讀者要打人了:我難道不知道js是一行一行執行的?還用你說?我們真的要徹底弄明白javascript的執行機制了。1.關於javascriptjavascript是一門單線程語言,在最新的HTML5中提出了Web-Worker,但javascript是單線程這一核心仍未改變。
  • Javascript之循環語句
    四、for in循環for in循環語句是一種非常精準的循環語句,可以用來枚舉(可以理解為列舉)對象的屬性。五、label語句label語句可以在代碼中添加標籤,以便我們以後使用。寫法:label名:語句;js高級程序設計的解釋:「我們加了標籤的語句一般情況下要與for循環等循環語句一起使用。
  • javascript這些特點你知道其中幾個?建議前端小白好好看看!
    javascript示圖1、解釋性的腳本語言怎麼理解解釋性的腳本語言?解釋性腳本語言就是執行是不需要編譯,即每個javascript語句執行的時才翻譯,跟編譯型語言不一樣。 javascript語法特點跟c、c++等相似,但是這些語言需要先編譯。 javascript這個特點可以跟html很好結合,大大增加網站互動性。
  • Python零基礎入門教程,流程控制有哪些?
    大綱條件控制(if結構、if-else結構、if-elif-else結構)循環語句(while語句、for語句)跳轉關鍵字(continue、break)if結構if 條件: 語句for語句continue語句continue語句用於跳過當前循環體中語句,然後繼續進行下一輪循環。
  • java流程控制實例代碼演示for、while、break、return、switch等
    一、流程控制程序在運行過程中會遇到各種各樣的情況,例如在上一篇圖文中(Java數據轉換和越界實例展示-附帶整個Java知識圖譜-建議收藏)通過關係操作符和邏輯操作符得出的結果就差強人意,會走向不同的程序分支上去,如何實現分支的選擇就要看流程控制了
  • 20個常用的JavaScript簡寫技巧
    交換兩個變量 為了交換兩個變量,我們通常使用第三個變量。我們可以使用數組解構賦值來交換兩個變量。 7.箭頭函數 參考:JavaScript Arrow function https://jscurious.com/javascript-arrow-function/ 8. 模板字符串 我們一般使用 + 運算符來連接字符串變量。
  • Javascript之if條件語句和三目運算符
    假設一個場景,在我們的面前有左右兩條路,而我們只能選擇其中的一條,我們無非就兩種選擇,一種是走左邊的路,否則就是走右邊的路,不允許耍賴不走,只能在同一時間選擇一條路,將生活中的這一經驗轉換在js中就是我們今天要學的if條件語句。
  • 第九篇:使用jQuery操作DOM元素
    <title>JavaScript開發案例</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="script/jquery-3.5.1.min.js" type="text/javascript
  • 從頭再來:Java的流程控制(跳出多重循環)
    Java的流程控制先來一個題:怎麼退出多重循環?廢話不多說了,直接上代碼,其實用到的就是流程控制的break。退出多重循環Java的流程控制(if-else和switch)if-else是流程控制中的最基本的形式,else是可選的
  • 第五篇:JavaScript事件處理
    <head><title>JavaScript開發案例</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript
  • 《進化之地》第三章水晶洞窟篇流程攻略 水晶洞窟篇全怪物打法建議
    進化之地第三章水晶洞窟篇怎麼過?三章水晶洞窟篇篇可以獲得發現隱藏洞穴的能力,同時會需要和清道夫戰鬥,攻擊大概在史萊姆和伊穆克之間,下面小編就為玩家帶來進化之地第三章水晶洞窟篇流程攻略,一起來看看吧。三章水晶洞窟篇篇可以獲得發現隱藏洞穴的能力,同時會需要和清道夫戰鬥,攻擊大概在史萊姆和伊穆克之間,下面小編就為玩家帶來進化之地第三章水晶洞窟篇流程攻略,一起來看看吧。
  • 第三次機器人大戰Z:時獄篇流程難點圖文攻略
    第三次機器人大戰Z:時獄篇流程難點圖文攻略 《第三次機器人大戰Z:時獄篇》每一關中SR熟練度的拿法和BOSS難點或值得注意的地方詳解全部分支會在一周目通關後陸續補完
  • 在Python Selenium WebDriver中使用JavaScript執行操作
    讓我們看一下通過Python Selenium WebDriver執行JavaScript語句的幾種不同方法。在本教程中,讓我們分析Selenium WebDriver中使用最少但功能最強大的功能。是的,我將討論JavaScript執行器,並向您展示通過Python Selenium WebDriver執行JavaScript語句的幾種不同方法。