溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“JavaScript中的程序控制流和函數(shù)方法是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“JavaScript中的程序控制流和函數(shù)方法是什么”吧!
程序的運行可以被稱為“指令流”的運行，也就是程序的指令就好像水一樣在流動。
程序流有3種結(jié)構(gòu)：
順序結(jié)構(gòu)
分支結(jié)構(gòu)
循環(huán)結(jié)構(gòu)
顧名思義，順序結(jié)構(gòu)就是語句一條一條地按照順序編寫好，執(zhí)行的時候按照順序依次執(zhí)行。最常用的就是賦值語句，例如a=3;就是一個賦值語句——將3賦值給變量a。
與賦值語句相關(guān)的一個重要的概念是表達式。每種程序設(shè)計語言都會設(shè)計好若干種數(shù)據(jù)類型一級響應(yīng)的一整套運算符。各種類型的字面量、常量以及變量通過運算符組織在一起，最終可以計算出某個特定的唯一的結(jié)果。
案例：
let a;
a=(4+5)*4;
const b=3*3;
以上的代碼首先聲明了一個變量a，此時還沒有給它賦值，因此它的值是undefined。然后通過一個表達式給它賦值，它的值就變成了36。
接下來又通過const關(guān)鍵字聲明了一個常量b。const和let很相似，區(qū)別在于const聲明的是常量，也就是不再能修改值的量，而let聲明的是變量。因此聲明常量的時候必須要給它賦值，否則后面就不能給它賦值了。
對于要先做判斷再選擇的問題就要使用分支結(jié)構(gòu)。分支結(jié)構(gòu)的執(zhí)行是依據(jù)一定的條件選擇執(zhí)行路徑，而不是嚴(yán)格按照語句出現(xiàn)的物理順序。分支結(jié)構(gòu)的程序設(shè)計方法的關(guān)鍵在于構(gòu)造合適的分支條件和分析程序流程，根據(jù)不同的程序流程選擇適當(dāng)?shù)姆种дZ句。分支結(jié)構(gòu)適合于帶有邏輯或關(guān)系比較等條件判斷的計算，設(shè)計這類程序時往往都要先繪制其程序流程圖，然后根據(jù)程序流程寫出源程序，這樣做把程序設(shè)計分析與語言分開，使得問題簡單化，易于理解。
JavaScript中的比較運算符主要包括：
等于 ==
嚴(yán)格等于 ===
不等于 !=
不嚴(yán)格等于 !==
大于 >
大于等于 >=
小于 <
小于等于 <=
從字面上就能理解他們的含義。簡單示例如下：
以上代碼的輸出結(jié)果如下：<script>
console.log("Pear"=="Pear");
console.log(5<4);
console.log(8>=6);
</script>
true
false
true
特別說明：在JavaScript中要區(qū)分==和===。
使用==的時候，如果兩個比較對象的類型不相同，則會先進性類型轉(zhuǎn)換，然后作比較；如果轉(zhuǎn)換后二者相等，則返回true。
使用===的時候，如果兩個比較對象的類型不相同，則不會進行類型轉(zhuǎn)換，而會直接返回false。
只有類型相同才會進行比較，并根據(jù)比較結(jié)果返回true和false。
注意：當(dāng)前很多軟件開發(fā)團隊的最簡時間規(guī)定，在實際開發(fā)過程中，一律使用===。
javascript的邏輯運算符有：
邏輯與“&&”，只有兩個操作數(shù)都為true時，才返回true；
邏輯或“||”，如果兩個操作數(shù)都為true，或其中一個為true，就返回true；
邏輯非“!”，把操作數(shù)的值轉(zhuǎn)換為布爾值，并取反。
示例
輸出結(jié)果如下：<script>
console.log(3>2 && 4>3);
console.log(3>2 && 4<3);
console.log(3>2 || 4<3);
console.log(!(3>2));
</script>
true
false
true
false
if 語句 - 只有當(dāng)指定條件為 true 時，使用該語句來執(zhí)行代碼
語法:
案例：如果時間早于 20:00，會獲得問候 “Good day”。 運行結(jié)果：if (condition)
{
當(dāng)條件為 true 時執(zhí)行的代碼
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>if 語句</title>
</head>
<body>
<p>如果時間早于 20:00，會獲得問候 "Good day"。</p>
<button onclick="myFunction()">點擊這里</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>
if…else 語句 - 當(dāng)條件為 true 時執(zhí)行代碼，當(dāng)條件為 false 時執(zhí)行其他代碼
語法:
案例：當(dāng)時間小于 20:00 時，生成問候 “Good day”： 運行結(jié)果：if (condition)
{
當(dāng)條件為 true 時執(zhí)行的代碼
}
else
{
當(dāng)條件不為 true 時執(zhí)行的代碼
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>if...else 語句</title>
</head>
<body>
<p>點擊這個按鈕，獲得基于時間的問候。</p>
<button onclick="myFunction()">點擊這里</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>
if…else if…else 語句- 使用該語句來選擇多個代碼塊之一來執(zhí)行
語法：
案例：如果時間小于 10:00，則生成問候 “Good morning”，如果時間大于 10:00 小于 20:00，則生成問候 “Good day”，否則生成問候 “Good evening”。 運行結(jié)果：if (condition1)
{
當(dāng)條件 1 為 true 時執(zhí)行的代碼
}
else if (condition2)
{
當(dāng)條件 2 為 true 時執(zhí)行的代碼
}
else
{
當(dāng)條件 1 和 條件 2 都不為 true 時執(zhí)行的代碼
}<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>
當(dāng)需要判斷的情況比較多的時候，通常采用switch語句來實現(xiàn)
語法：
工作原理：首先設(shè)置表達式 n（通常是一個變量）。隨后表達式的值會與結(jié)構(gòu)中的每個 case 的值做比較。如果存在匹配，則與該 case 關(guān)聯(lián)的代碼塊會被執(zhí)行。請使用 break 來阻止代碼自動地向下一個 case 運行。switch(n)
{
case 1:
執(zhí)行代碼塊 1
break;
case 2:
執(zhí)行代碼塊 2
break;
default:
與 case 1 和 case 2 不同時執(zhí)行的代碼
}
案例：顯示今天的星期名稱。請注意 Sunday=0, Monday=1, Tuesday=2, 等等：
運行效果：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>switch語句</title>
</head>
<body>
<p>點擊下面的按鈕來顯示今天是周幾：</p>
<button onclick="myFunction()">點擊這里</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>
循環(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 循環(huán)會在指定條件為真時循環(huán)執(zhí)行代碼塊。
語法:
案例：本例中的循環(huán)將繼續(xù)運行，只要變量 i 小于 5； 運行結(jié)果：while (條件)
{
需要執(zhí)行的代碼
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>while語句</title>
</head>
<body>
<p>點擊下面的按鈕，只要 i 小于 5 就一直循環(huán)代碼塊。</p>
<button onclick="myFunction()">點擊這里</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>
do/while 循環(huán)是 while 循環(huán)的變體。該循環(huán)會在檢查條件是否為真之前執(zhí)行一次代碼塊，然后如果條件為真的話，就會重復(fù)這個循環(huán)。
語法
案例：如上 運行結(jié)果do
{
需要執(zhí)行的代碼
}
while (條件);<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>do...while語句</title>
</head>
<body>
<p>點擊下面的按鈕，只要 i 小于 5 就一直循環(huán)代碼塊。</p>
<button onclick="myFunction()">點擊這里</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>
for語句是前測試循環(huán)語句，也稱for循環(huán)，進入循環(huán)之前能夠初始化變量，并且能夠定義循環(huán)后要執(zhí)行的代碼。
語法：
語句 1 （代碼塊）開始前執(zhí)行for (語句 1; 語句 2; 語句 3)
{
被執(zhí)行的代碼塊
}
語句 2 定義運行循環(huán)（代碼塊）的條件
語句 3 在循環(huán)（代碼塊）已被執(zhí)行之后執(zhí)行
案例：點擊按鈕循環(huán)代碼5次。
運行結(jié)果：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>for語句</title>
</head>
<body>
<p>點擊按鈕循環(huán)代碼5次。</p>
<button onclick="myFunction()">點擊這里</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>
break 語句用于跳出循環(huán)，阻止程序再次運行循環(huán)體中的任何代碼。
continue 用于跳過循環(huán)中的一個迭代，即當(dāng)前循環(huán)，根據(jù)控制表達式還允許進行下一次循環(huán)。
break 語句示例：點擊按鈕，測試帶有 break 語句的循環(huán)。
運行結(jié)果：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>break 語句</title>
</head>
<body>
<p>點擊按鈕，測試帶有 break 語句的循環(huán)。</p>
<button onclick="myFunction()">點擊這里</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>
continue 語句示例：循環(huán)跳過 i=3 的數(shù)字。
運行效果：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>continue 語句</title>
</head>
<body>
<p>點擊下面的按鈕來執(zhí)行循環(huán)，該循環(huán)會跳過 i=3 的數(shù)字。</p>
<button onclick="myFunction()">點擊這里</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>
在ES6中引入了一個心的概念——“迭代器”。數(shù)組或其他集合類的對象內(nèi)部都實現(xiàn)了迭代器，從而可以更方便地遍歷其中的元素。在實際開發(fā)中，大多數(shù)需要對數(shù)組元素進行循環(huán)處理的場景，采用for…of語句都會比使用傳統(tǒng)的for語句更方便。
案例：假設(shè)在一個數(shù)組中記錄了所有團隊成員的名字：
let team=[“Tom”,“Mike”,“Jane”];
現(xiàn)在需要將所有成員兩兩配對，組成二人小組，每組由一個組長及一個組員組成。那么如何求出所有可能的二人小組呢？
方法一：傳統(tǒng)for循環(huán)實現(xiàn)（二重for循環(huán)）
方法二：使用for…of迭代器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]]);
}
}let pairs=[]; //用于保存最終的結(jié)果
for(let a of team){
for(let b of team){
if(a!=b)
pairs.push([a,b]);
}
}
通常用來枚舉對象的屬性，但是到目前為止我們還沒有真正講解對象和屬性的支持，所以只能做一點簡單的介紹。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>
運行效果：
函數(shù)是一組可以隨時隨地運行的語句。簡單來說，函數(shù)是完成某個功能的一組語句，或者說是一組語句的封裝。它可以接收0個或多個參數(shù)，然后執(zhí)行函數(shù)體來完成某些功能，最優(yōu)根據(jù)需要返回或者不返回處理結(jié)果。
JavaScript 函數(shù)語法
函數(shù)就是包裹在花括號中的代碼塊，前面使用了關(guān)鍵詞 function：
當(dāng)調(diào)用該函數(shù)時，會執(zhí)行函數(shù)內(nèi)的代碼。function functionname()
{
// 執(zhí)行代碼
}
可以在某事件發(fā)生時直接調(diào)用函數(shù)（比如當(dāng)用戶點擊按鈕時），并且可由 JavaScript 在任何位置進行調(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ào)用帶參數(shù)的函數(shù)。</p>
<button onclick="myFunction('Harry Potter','Wizard')">點擊這里</button>
<script>
function myFunction(name,job){
alert("Welcome " + name + ", the " + job);
}
</script>
</body>
</html>
帶有返回值的函數(shù)
有時，我們會希望函數(shù)將值返回調(diào)用它的地方。
通過使用 return 語句就可以實現(xiàn)。
在使用 return 語句時，函數(shù)會停止執(zhí)行，并返回指定的值。
語法
上面的函數(shù)會返回值 5。function myFunction()
{
var x=5;
return x;
}
注意： 整個 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ù)：
案例：計算兩個數(shù)字的乘積，并返回結(jié)果
運行結(jié)果：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>樂趣國學(xué)</title>
</head>
<body>
<p>本例調(diào)用的函數(shù)會執(zhí)行一個計算，然后返回結(jié)果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
</body>
</html>
局部 JavaScript 變量
在 JavaScript 函數(shù)內(nèi)部聲明的變量（使用 var）是局部變量，所以只能在函數(shù)內(nèi)部訪問它。（該變量的作用域是局部的）。
您可以在不同的函數(shù)中使用名稱相同的局部變量，因為只有聲明過該變量的函數(shù)才能識別出該變量。
只要函數(shù)運行完畢，本地變量就會被刪除。
全局 JavaScript 變量
在函數(shù)外聲明的變量是全局變量，網(wǎng)頁上的所有腳本和函數(shù)都能訪問它。
JavaScript 變量的生存期
JavaScript 變量的生命期從它們被聲明的時間開始。
局部變量會在函數(shù)運行以后被刪除。
全局變量會在頁面關(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í)行時進行錯誤測試的代碼塊。
catch 語句允許我們定義當(dāng) try 代碼塊發(fā)生錯誤時，所執(zhí)行的代碼塊。
JavaScript 語句 try 和 catch 是成對出現(xiàn)的。
語法
案例： 運行結(jié)果：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="本頁有一個錯誤。\n\n";
txt+="錯誤描述：" + err.message + "\n\n";
txt+="點擊確定繼續(xù)。\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body>
</html>
finally 語句
finally 語句不論之前的 try 和 catch 中是否產(chǎn)生異常都會執(zhí)行該代碼塊。
案例
運行結(jié)果：<!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()">點我</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>
Throw 語句
throw 語句允許我們創(chuàng)建自定義錯誤。
正確的技術(shù)術(shù)語是：創(chuàng)建或拋出異常（exception）。
如果把 throw 與 try 和 catch 一起使用，那么您能夠控制程序流，并生成自定義的錯誤消息。
語法
throw exception
異常可以是 JavaScript 字符串、數(shù)字、邏輯值或?qū)ο蟆?/p>
案例：本例檢測輸入變量的值。如果值是錯誤的，會拋出一個異常（錯誤）。catch 會捕捉到這個錯誤，并顯示一段自定義的錯誤消息：
運行結(jié)果：<!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>
到此，相信大家對“JavaScript中的程序控制流和函數(shù)方法是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
