站長資訊網(wǎng)本篇文章帶大家吃透JavaScript中的程序控制流與函數(shù)，希望對大家有所幫助！
前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用
思維導(dǎo)圖
?程序控制流
程序的運(yùn)行可以被稱為“指令流”的運(yùn)行，也就是程序的指令就好像水一樣在流動。
程序流有3種結(jié)構(gòu)：
- 順序結(jié)構(gòu)
- 分支結(jié)構(gòu)
- 循環(huán)結(jié)構(gòu)
⛳️順序結(jié)構(gòu)
顧名思義，順序結(jié)構(gòu)就是語句一條一條地按照順序編寫好，執(zhí)行的時候按照順序依次執(zhí)行。最常用的就是賦值語句，例如a=3;就是一個賦值語句——將3賦值給變量a。
與賦值語句相關(guān)的一個重要的概念是表達(dá)式。每種程序設(shè)計(jì)語言都會設(shè)計(jì)好若干種數(shù)據(jù)類型一級響應(yīng)的一整套運(yùn)算符。各種類型的字面量、常量以及變量通過運(yùn)算符組織在一起，最終可以計(jì)算出某個特定的唯一的結(jié)果。
案例：
let a; a=(4+5)*4; const b=3*3;
以上的代碼首先聲明了一個變量a，此時還沒有給它賦值，因此它的值是undefined。然后通過一個表達(dá)式給它賦值，它的值就變成了36。
接下來又通過const關(guān)鍵字聲明了一個常量b。const和let很相似，區(qū)別在于const聲明的是常量，也就是不再能修改值的量，而let聲明的是變量。因此聲明常量的時候必須要給它賦值，否則后面就不能給它賦值了。
⛳️分支結(jié)構(gòu)
對于要先做判斷再選擇的問題就要使用分支結(jié)構(gòu)。分支結(jié)構(gòu)的執(zhí)行是依據(jù)一定的條件選擇執(zhí)行路徑，而不是嚴(yán)格按照語句出現(xiàn)的物理順序。分支結(jié)構(gòu)的程序設(shè)計(jì)方法的關(guān)鍵在于構(gòu)造合適的分支條件和分析程序流程，根據(jù)不同的程序流程選擇適當(dāng)?shù)姆种дZ句。分支結(jié)構(gòu)適合于帶有邏輯或關(guān)系比較等條件判斷的計(jì)算，設(shè)計(jì)這類程序時往往都要先繪制其程序流程圖，然后根據(jù)程序流程寫出源程序，這樣做把程序設(shè)計(jì)分析與語言分開，使得問題簡單化，易于理解。
?比較運(yùn)算符
JavaScript中的比較運(yùn)算符主要包括：
等于 ==
嚴(yán)格等于 ===
不等于 !=
不嚴(yán)格等于 !==
大于 >
大于等于 >=
小于 <
小于等于 <=
從字面上就能理解他們的含義。簡單示例如下：
<script> console.log("Pear"=="Pear"); console.log(5<4); console.log(8>=6); </script>
以上代碼的輸出結(jié)果如下：
true
false
true
特別說明：在JavaScript中要區(qū)分==和===。
- 使用==的時候，如果兩個比較對象的類型不相同，則會先進(jìn)性類型轉(zhuǎn)換，然后作比較；如果轉(zhuǎn)換后二者相等，則返回true。
- 使用===的時候，如果兩個比較對象的類型不相同，則不會進(jìn)行類型轉(zhuǎn)換，而會直接返回false。
只有類型相同才會進(jìn)行比較，并根據(jù)比較結(jié)果返回true和false。
注意：當(dāng)前很多軟件開發(fā)團(tuán)隊(duì)的最簡時間規(guī)定，在實(shí)際開發(fā)過程中，一律使用===。
?邏輯運(yùn)算符
javascript的邏輯運(yùn)算符有：
-
邏輯與“&&”，只有兩個操作數(shù)都為true時，才返回true；
-
邏輯或“||”，如果兩個操作數(shù)都為true，或其中一個為true，就返回true；
-
邏輯非“!”，把操作數(shù)的值轉(zhuǎn)換為布爾值，并取反。
示例
<script> console.log(3>2 && 4>3); console.log(3>2 && 4<3); console.log(3>2 || 4<3); console.log(!(3>2)); </script>
輸出結(jié)果如下：
true
false
true
false
?if語句
- if 語句 – 只有當(dāng)指定條件為 true 時，使用該語句來執(zhí)行代碼
語法:
if (condition) { 當(dāng)條件為 true 時執(zhí)行的代碼 }
案例：如果時間早于 20:00，會獲得問候 “Good day”。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>if 語句</title> </head> <body> <p>如果時間早于 20:00，會獲得問候 "Good day"。</p> <button onclick="myFunction()">點(diǎn)擊這里</button> <p id="demo"></p> <script> function myFunction(){ var x=""; var time=new Date().getHours(); if (time<20){ x="Good day"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
運(yùn)行結(jié)果：
- if…else 語句 – 當(dāng)條件為 true 時執(zhí)行代碼，當(dāng)條件為 false 時執(zhí)行其他代碼
語法:
if (condition) { 當(dāng)條件為 true 時執(zhí)行的代碼 } else { 當(dāng)條件不為 true 時執(zhí)行的代碼 }
案例：當(dāng)時間小于 20:00 時，生成問候 “Good day”：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>if...else 語句</title> </head> <body> <p>點(diǎn)擊這個按鈕，獲得基于時間的問候。</p> <button onclick="myFunction()">點(diǎn)擊這里</button> <p id="demo"></p> <script> function myFunction(){ var x=""; var time=new Date().getHours(); if (time<20){ x="Good day"; } else{ x="Good evening"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
運(yùn)行結(jié)果：
- if…else if…else 語句- 使用該語句來選擇多個代碼塊之一來執(zhí)行
語法：
if (condition1) { 當(dāng)條件 1 為 true 時執(zhí)行的代碼 } else if (condition2) { 當(dāng)條件 2 為 true 時執(zhí)行的代碼 } else { 當(dāng)條件 1 和 條件 2 都不為 true 時執(zhí)行的代碼 }
案例：如果時間小于 10:00，則生成問候 “Good morning”，如果時間大于 10:00 小于 20:00，則生成問候 “Good day”，否則生成問候 “Good evening”。
<html> <head> <meta charset="utf-8"> <title>if...else if....else 語句</title> </head> <body> <script type="text/javascript"> var d = new Date(); var time = d.getHours(); if (time<10) { document.write("<b>早上好</b>"); } else if (time>=10 && time<20) { document.write("<b>今天好</b>"); } else { document.write("<b>晚上好!</b>"); } </script> <p> 這個例子演示了 if..else if...else 語句。 </p> </body> </html>
運(yùn)行結(jié)果：
?switch語句
當(dāng)需要判斷的情況比較多的時候，通常采用switch語句來實(shí)現(xiàn)
語法：
switch(n) { case 1: 執(zhí)行代碼塊 1 break; case 2: 執(zhí)行代碼塊 2 break; default: 與 case 1 和 case 2 不同時執(zhí)行的代碼 }
工作原理：首先設(shè)置表達(dá)式 n（通常是一個變量）。隨后表達(dá)式的值會與結(jié)構(gòu)中的每個 case 的值做比較。如果存在匹配，則與該 case 關(guān)聯(lián)的代碼塊會被執(zhí)行。請使用 break 來阻止代碼自動地向下一個 case 運(yùn)行。
案例：顯示今天的星期名稱。請注意 Sunday=0, Monday=1, Tuesday=2, 等等：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>switch語句</title> </head> <body> <p>點(diǎn)擊下面的按鈕來顯示今天是周幾：</p> <button onclick="myFunction()">點(diǎn)擊這里</button> <p id="demo"></p> <script> function myFunction(){ var x; var d=new Date().getDay(); switch (d){ case 0:x="今天是星期日"; break; case 1:x="今天是星期一"; break; case 2:x="今天是星期二"; break; case 3:x="今天是星期三"; break; case 4:x="今天是星期四"; break; case 5:x="今天是星期五"; break; case 6:x="今天是星期六"; break; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
運(yùn)行效果：
⛳️循環(huán)結(jié)構(gòu)
循環(huán)結(jié)構(gòu)的作用是反復(fù)執(zhí)行同一段代碼。盡管循環(huán)結(jié)構(gòu)可分為幾種不同的類型，但是他們的基本原理都是一樣的。只要給定的條件仍能得到滿足，包含在循環(huán)體里的代碼就會重復(fù)執(zhí)行下去，一旦條件不再滿足則終止。在JavaScript中有三種循環(huán)結(jié)構(gòu)，while、do…while、for循環(huán)。它們都含有初始值，循環(huán)條件，循環(huán)操作和迭代部分。
?while語句
while 循環(huán)會在指定條件為真時循環(huán)執(zhí)行代碼塊。
語法:
while (條件) { 需要執(zhí)行的代碼 }
案例：本例中的循環(huán)將繼續(xù)運(yùn)行，只要變量 i 小于 5；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>while語句</title> </head> <body> <p>點(diǎn)擊下面的按鈕，只要 i 小于 5 就一直循環(huán)代碼塊。</p> <button onclick="myFunction()">點(diǎn)擊這里</button> <p id="demo"></p> <script> function myFunction(){ var x="",i=0; while (i<5){ x=x + "該數(shù)字為 " + i + "<br>"; i++; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
運(yùn)行結(jié)果：
?do…while語句
do/while 循環(huán)是 while 循環(huán)的變體。該循環(huán)會在檢查條件是否為真之前執(zhí)行一次代碼塊，然后如果條件為真的話，就會重復(fù)這個循環(huán)。
語法
do { 需要執(zhí)行的代碼 } while (條件);
案例：如上
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>do...while語句</title> </head> <body> <p>點(diǎn)擊下面的按鈕，只要 i 小于 5 就一直循環(huán)代碼塊。</p> <button onclick="myFunction()">點(diǎn)擊這里</button> <p id="demo"></p> <script> function myFunction(){ var x="",i=0; do{ x=x + "該數(shù)字為 " + i + "<br>"; i++; } while (i<5) document.getElementById("demo").innerHTML=x; } </script> </body> </html>
運(yùn)行結(jié)果
?for語句
for語句是前測試循環(huán)語句，也稱for循環(huán)，進(jìn)入循環(huán)之前能夠初始化變量，并且能夠定義循環(huán)后要執(zhí)行的代碼。
語法：
for (語句 1; 語句 2; 語句 3) { 被執(zhí)行的代碼塊 }
語句 1 （代碼塊）開始前執(zhí)行
語句 2 定義運(yùn)行循環(huán)（代碼塊）的條件
語句 3 在循環(huán)（代碼塊）已被執(zhí)行之后執(zhí)行
案例：點(diǎn)擊按鈕循環(huán)代碼5次。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>for語句</title> </head> <body> <p>點(diǎn)擊按鈕循環(huán)代碼5次。</p> <button onclick="myFunction()">點(diǎn)擊這里</button> <p id="demo"></p> <script> function myFunction(){ var x=""; for (var i=0;i<5;i++){ x=x + "該數(shù)字為 " + i + "<br>"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
運(yùn)行結(jié)果：
?break和continue語句
break 語句用于跳出循環(huán)，阻止程序再次運(yùn)行循環(huán)體中的任何代碼。
continue 用于跳過循環(huán)中的一個迭代，即當(dāng)前循環(huán)，根據(jù)控制表達(dá)式還允許進(jìn)行下一次循環(huán)。
break 語句示例：點(diǎn)擊按鈕，測試帶有 break 語句的循環(huán)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>break 語句</title> </head> <body> <p>點(diǎn)擊按鈕，測試帶有 break 語句的循環(huán)。</p> <button onclick="myFunction()">點(diǎn)擊這里</button> <p id="demo"></p> <script> function myFunction(){ var x="",i=0; for (i=0;i<10;i++){ if (i==3){ break; } x=x + "該數(shù)字為 " + i + "<br>"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
運(yùn)行結(jié)果：
continue 語句示例：循環(huán)跳過 i=3 的數(shù)字。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>continue 語句</title> </head> <body> <p>點(diǎn)擊下面的按鈕來執(zhí)行循環(huán)，該循環(huán)會跳過 i=3 的數(shù)字。</p> <button onclick="myFunction()">點(diǎn)擊這里</button> <p id="demo"></p> <script> function myFunction(){ var x="",i=0; for (i=0;i<10;i++){ if (i==3){ continue; } x=x + "該數(shù)字為 " + i + "<br>"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
運(yùn)行效果：
?for…of語句
在ES6中引入了一個心的概念——“迭代器”。數(shù)組或其他集合類的對象內(nèi)部都實(shí)現(xiàn)了迭代器，從而可以更方便地遍歷其中的元素。在實(shí)際開發(fā)中，大多數(shù)需要對數(shù)組元素進(jìn)行循環(huán)處理的場景，采用for…of語句都會比使用傳統(tǒng)的for語句更方便。
案例：假設(shè)在一個數(shù)組中記錄了所有團(tuán)隊(duì)成員的名字：
let team=[“Tom”,“Mike”,“Jane”];
現(xiàn)在需要將所有成員兩兩配對，組成二人小組，每組由一個組長及一個組員組成。那么如何求出所有可能的二人小組呢？
方法一：傳統(tǒng)for循環(huán)實(shí)現(xiàn)（二重for循環(huán)）
let pairs=[]; //用于保存最終的結(jié)果 for(let i=0;i<team.length;i++){ for(let j=0;j<team.length;j++){ if(team[i]!=team[j]) pairs.push([team[i],team[j]]); } }
方法二：使用for…of迭代器
let pairs=[]; //用于保存最終的結(jié)果 for(let a of team){ for(let b of team){ if(a!=b) pairs.push([a,b]); } }
?for…in語句
通常用來枚舉對象的屬性，但是到目前為止我們還沒有真正講解對象和屬性的支持，所以只能做一點(diǎn)簡單的介紹。for…in語句的作用是遍歷一個對象的所有屬性。
語法：
for(property in expression) statement
它將遍歷expression對象中的所有屬性，并且每一個屬性都執(zhí)行一次statement循環(huán)體。
案例：遍歷顯示window對象的所有屬性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="button" value="顯示window對象" onclick="show();"></input> <script> function show() { for (let i in window) { document.write(i+"="+window[i]+"<br>"); } } </script> </body> </html>
運(yùn)行效果：
?函數(shù)
函數(shù)是一組可以隨時隨地運(yùn)行的語句。簡單來說，函數(shù)是完成某個功能的一組語句，或者說是一組語句的封裝。它可以接收0個或多個參數(shù)，然后執(zhí)行函數(shù)體來完成某些功能，最優(yōu)根據(jù)需要返回或者不返回處理結(jié)果。
JavaScript 函數(shù)語法
函數(shù)就是包裹在花括號中的代碼塊，前面使用了關(guān)鍵詞 function：
function functionname() { // 執(zhí)行代碼 }
當(dāng)調(diào)用該函數(shù)時，會執(zhí)行函數(shù)內(nèi)的代碼。
可以在某事件發(fā)生時直接調(diào)用函數(shù)（比如當(dāng)用戶點(diǎn)擊按鈕時），并且可由 JavaScript 在任何位置進(jìn)行調(diào)用。
注意：JavaScript 對大小寫敏感。關(guān)鍵詞 function 必須是小寫的，并且必須以與函數(shù)名稱相同的大小寫來調(diào)用函數(shù)。
調(diào)用帶參數(shù)的函數(shù)
在調(diào)用函數(shù)時，您可以向其傳遞值，這些值被稱為參數(shù)。
這些參數(shù)可以在函數(shù)中使用。
您可以發(fā)送任意多的參數(shù)，由逗號 (,) 分隔：
myFunction(argument1,argument2)
當(dāng)您聲明函數(shù)時，請把參數(shù)作為變量來聲明：
function myFunction(var1,var2) { 代碼 }
案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>帶參數(shù)的函數(shù)</title> </head> <body> <p>點(diǎn)擊這個按鈕，來調(diào)用帶參數(shù)的函數(shù)。</p> <button onclick="myFunction('Harry Potter','Wizard')">點(diǎn)擊這里</button> <script> function myFunction(name,job){ alert("Welcome " + name + ", the " + job); } </script> </body> </html>
運(yùn)行效果：
帶有返回值的函數(shù)
有時，我們會希望函數(shù)將值返回調(diào)用它的地方。
通過使用 return 語句就可以實(shí)現(xiàn)。
在使用 return 語句時，函數(shù)會停止執(zhí)行，并返回指定的值。
語法
function myFunction() { var x=5; return x; }
上面的函數(shù)會返回值 5。
注意： 整個 JavaScript 并不會停止執(zhí)行，僅僅是函數(shù)。JavaScript 將繼續(xù)執(zhí)行代碼，從調(diào)用函數(shù)的地方。
函數(shù)調(diào)用將被返回值取代：
var myVar=myFunction();
myVar 變量的值是 5，也就是函數(shù) “myFunction()” 所返回的值。
即使不把它保存為變量，您也可以使用返回值：
document.getElementById(“demo”).innerHTML=myFunction();
“demo” 元素的 innerHTML 將成為 5，也就是函數(shù) “myFunction()” 所返回的值。
您可以使返回值基于傳遞到函數(shù)中的參數(shù)：
案例：計(jì)算兩個數(shù)字的乘積，并返回結(jié)果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>樂趣國學(xué)</title> </head> <body> <p>本例調(diào)用的函數(shù)會執(zhí)行一個計(jì)算，然后返回結(jié)果：</p> <p id="demo"></p> <script> function myFunction(a,b){ return a*b; } document.getElementById("demo").innerHTML=myFunction(4,3); </script> </body> </html>
運(yùn)行結(jié)果：
局部 JavaScript 變量
在 JavaScript 函數(shù)內(nèi)部聲明的變量（使用 var）是局部變量，所以只能在函數(shù)內(nèi)部訪問它。（該變量的作用域是局部的）。
您可以在不同的函數(shù)中使用名稱相同的局部變量，因?yàn)橹挥新暶鬟^該變量的函數(shù)才能識別出該變量。
只要函數(shù)運(yùn)行完畢，本地變量就會被刪除。
全局 JavaScript 變量
在函數(shù)外聲明的變量是全局變量，網(wǎng)頁上的所有腳本和函數(shù)都能訪問它。
JavaScript 變量的生存期
JavaScript 變量的生命期從它們被聲明的時間開始。
局部變量會在函數(shù)運(yùn)行以后被刪除。
全局變量會在頁面關(guān)閉后被刪除。
?異常處理
try 語句測試代碼塊的錯誤。
catch 語句處理錯誤。
throw 語句創(chuàng)建自定義錯誤。
finally 語句在 try 和 catch 語句之后，無論是否有觸發(fā)異常，該語句都會執(zhí)行。
JavaScript 拋出（throw）錯誤
當(dāng)錯誤發(fā)生時，當(dāng)事情出問題時，JavaScript 引擎通常會停止，并生成一個錯誤消息。
描述這種情況的技術(shù)術(shù)語是：JavaScript 將拋出一個錯誤。
try 和 catch
try 語句允許我們定義在執(zhí)行時進(jìn)行錯誤測試的代碼塊。
catch 語句允許我們定義當(dāng) try 代碼塊發(fā)生錯誤時，所執(zhí)行的代碼塊。
JavaScript 語句 try 和 catch 是成對出現(xiàn)的。
語法
try { ... //異常的拋出 } catch(e) { ... //異常的捕獲與處理 } finally { ... //結(jié)束處理 }
案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>樂趣國學(xué)</title> <script> var txt=""; function message(){ try { adddlert("Welcome guest!"); } catch(err) { txt="本頁有一個錯誤。nn"; txt+="錯誤描述：" + err.message + "nn"; txt+="點(diǎn)擊確定繼續(xù)。nn"; alert(txt); } } </script> </head> <body> <input type="button" value="查看消息" onclick="message()" /> </body> </html>
運(yùn)行結(jié)果：
finally 語句
finally 語句不論之前的 try 和 catch 中是否產(chǎn)生異常都會執(zhí)行該代碼塊。
案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>樂趣國學(xué)</title> </head> <body> <p>不管輸入是否正確，輸入框都會再輸入后清空。</p> <p>請輸入 5 ~ 10 之間的數(shù)字：</p> <input id="demo" type="text"> <button type="button" onclick="myFunction()">點(diǎn)我</button> <p id="p01"></p> <script> function myFunction() { var message, x; message = document.getElementById("p01"); message.innerHTML = ""; x = document.getElementById("demo").value; try { if(x == "") throw "值是空的"; if(isNaN(x)) throw "值不是一個數(shù)字"; x = Number(x); if(x > 10) throw "太大"; if(x < 5) throw "太小"; } catch(err) { message.innerHTML = "錯誤: " + err + "."; } finally { document.getElementById("demo").value = ""; } } </script> </body> </html>
運(yùn)行結(jié)果：
Throw 語句
throw 語句允許我們創(chuàng)建自定義錯誤。
正確的技術(shù)術(shù)語是：創(chuàng)建或拋出異常（exception）。
如果把 throw 與 try 和 catch 一起使用，那么您能夠控制程序流，并生成自定義的錯誤消息。
語法
throw exception
異常可以是 JavaScript 字符串、數(shù)字、邏輯值或?qū)ο蟆?/span>
案例：本例檢測輸入變量的值。如果值是錯誤的，會拋出一個異常（錯誤）。catch 會捕捉到這個錯誤，并顯示一段自定義的錯誤消息：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>樂趣國學(xué)</title> </head> <body> <p>請輸出一個 5 到 10 之間的數(shù)字:</p> <input id="demo" type="text"> <button type="button" onclick="myFunction()">測試輸入</button> <p id="message"></p> <script> function myFunction() { var message, x; message = document.getElementById("message"); message.innerHTML = ""; x = document.getElementById("demo").value; try { if(x == "") throw "值為空"; if(isNaN(x)) throw "不是數(shù)字"; x = Number(x); if(x < 5) throw "太小"; if(x > 10) throw "太大"; } catch(err) { message.innerHTML = "錯誤: " + err; } } </script> </body> </html>
運(yùn)行結(jié)果：
【推薦學(xué)習(xí)：javascript高級教程】
