[TOC]
流程控制語句一般用來判斷分支或者重復(fù)執(zhí)行某段代碼時使用。
## if條件分支語句
if語句是流程控制語句中最常用的一種分支語句，可以根據(jù)不同的條件，執(zhí)行不同分支的代碼，其格式為：
~~~
if (condition) {statement1} else {statement2}
~~~
其中 `condition` 可以是任意表達(dá)式，也可以是其它類型數(shù)據(jù)，執(zhí)行時會自動調(diào)用`Boolean()`函數(shù)將其轉(zhuǎn)換為布爾值，如果為 `true`，則執(zhí)行接下來的`statement1`代碼塊，如果為 `false`，則執(zhí)行 `else`中的`statement2`代碼塊，如果代碼塊中，只有一句代碼，可以省略花括號`{}`，但在實際應(yīng)用中，不推薦省略。
~~~
var i = 20;
// 推薦寫法
if( i < 30 ) {
alert("20 小于 30");
} else {
alert("20 大于 30");
}
// 不推薦寫法
if ( i < 30 ) alert("20 小于 30");
else alert("20 大于 30");
~~~
如果，我們需要進(jìn)行多種值的判斷，讓執(zhí)行不同的代碼，那么，可以使用以下語法
~~~
if (i > 25) {
alert("Greater than 25.");
} else if (i < 0) {
alert("Less than 0.");
} else {
alert("Between 0 and 25, inclusive.");
}
~~~
以上表示，如果 `i` 大于`25`,則弱出`Greater than 25.`,否則，會執(zhí)繼續(xù)判斷`i`是否小于`0`，如果成立，則彈出`Less than 0.`，如果以上都不成立，則會執(zhí)行`else`中的代碼塊。需要注意的是，其中的 `else if` 可以使用多次。
## do-while循環(huán)語句
語法：
~~~
do {
statement
} while (expression);
~~~
do-while 語句，先會執(zhí)行`do`循環(huán)中的代碼塊，然后再判斷`while`中的條件，如果條件符合，繼續(xù)執(zhí)行`do`循環(huán)中的代碼塊，直到`while`中的條件不成立，才會中斷循環(huán)的執(zhí)行。也就是說，無論`while`中的條件是否成立，`do`循環(huán)中的代碼塊至少會被執(zhí)行一次。
~~~
var i = 0;
do {
alert(i);
i++;
} while ( i < 10 );
~~~
## while循環(huán)語句
while循環(huán)語句會先判斷條件，如果條件滿足再執(zhí)行循環(huán)體中的代碼，如果不成立，則不會執(zhí)行。
~~~
語法：
while (expression) {statement}
示例：
var i =1;
while ( i < 10 ) {
alert(i);
i++;
}
~~~
在實際應(yīng)用中，`while`語句使用較少，一般會用` for` 循環(huán)語句代替。
## for循環(huán)語句
`for`循環(huán)可能是循環(huán)語句中使用最頻繁的語句了，一般用來重復(fù)執(zhí)行某段代碼塊指定次數(shù)，語法如下：
~~~
for (initialization; expression; post-loop-expression) { statement }
~~~
在`for`循環(huán)中，小括號中有三個語句，每個語句之間用分號（;）隔開，其中第一個語句`initialization`是用來定義初始變量的，是在循環(huán)之前就會執(zhí)行，并且只執(zhí)行這一次；第二個語句`expression`是表示循環(huán)條件，達(dá)到此條件，就執(zhí)行循環(huán)，如果不滿足此條件，則終止執(zhí)行該循環(huán)；第三個語句`post-loop-expression`一般是在循環(huán)迭代使用，此語句是在當(dāng)前循環(huán)執(zhí)行完畢后再執(zhí)行。
~~~
for (var i = 0; i < 3; i++) {
alert( i );
}
~~~
上面這個示例將會連續(xù)彈出三個警告框，內(nèi)容分別是：0、1、2。執(zhí)行順序為：
* 第一次循環(huán)： 首先 `for` 循環(huán)中的第一個語句會被無條件執(zhí)行，所以，會定義一個變量 `i`，值為`0`，然后判斷條件，`i < 3`，此時 i 的值為` 0`，所以滿足條件，則執(zhí)行循環(huán)體，彈出變量 `i` ，也就是 `0`，然后再執(zhí)行for循環(huán)中的第三個語句 `i++`;
* 第二次循環(huán)：因為不是第一次循環(huán)了，所以`for`循環(huán)小括號中的第一個語句就不會被執(zhí)行了，直接判斷條件 `i < 3`，此時的`i`在上一次循環(huán)已經(jīng)被執(zhí)行了` i++` 的遞增操作，所以值為 `1`， `1 < 3` 條件成立，所以繼續(xù)執(zhí)行循環(huán)體，彈出變量`i`的值 `1`，然后再執(zhí)行了`for`循環(huán)中的第三個語句`i++`；
* 第三次循環(huán)：和第二次一樣，不再執(zhí)行` for` 循環(huán)小括號中的第一個語句，直接判斷條件，此時 i的值經(jīng)過第二次循環(huán)中的遞增操作后為`2`，`2 < 3` 的條件成立，則繼續(xù)執(zhí)行循環(huán)體，彈出變量`i`的值，也就是`2`，然后執(zhí)行`for`循環(huán)小括號中的第三個語句` i++`;
* 第四次循環(huán)：也是直接判斷條件，此時的 `i` 經(jīng)過第三次循環(huán)的遞增操作，已經(jīng)為 `3` 了，`i < 3 ` 條件不成立，所以就終止了當(dāng)前的`for`循環(huán)的執(zhí)行，到這里整個循環(huán)結(jié)束。
## for-in 循環(huán)語句
for-in 語句是一種精準(zhǔn)的迭代語句，可以用來枚舉對象的屬性。以下是 for-in 語句的語法：
~~~
for (property in expression) { statement }
~~~
下面是一個示例：
~~~
//數(shù)組實例
var arr = ['red','blue','yellow','green'];
for (var x in arr) {
document.write(arr[x] + '<br />');
}
//輸出
red
blue
yellow
green
~~~
~~~
//對象實例
var obj = {"name":"howie","age":25,"email":"xjdnw@sina.com"};
for (var x in obj) {
document.write(x + '<br />');
}
//輸出
name
age
email
var obj = {"name":"howie","age":25,"email":"xjdnw@sina.com"};
for (var x in obj) {
document.write(obj[x] + '<br />');
}
// 輸出
// howie
// 25
// xjdnw@sina.com
~~~
>[danger] 如果表示要迭代的對象的變量值為 null 或 undefined ， for-in 語句會拋出錯誤。ECMAScript 5 更正了這一行為；對這種情況不再拋出錯誤，而只是不執(zhí)行循環(huán)體。為了保證最大限度的兼容性，建議在使用 for-in 循環(huán)之前，先檢測確認(rèn)該對象的值不是 null 或 undefined 。
## for...of 循環(huán)
for...of 循環(huán)一般用于循環(huán)數(shù)組，與for...in不同的是，for...of每次循環(huán)出來的是數(shù)組元素本身，而不是索引，例如還是上面的數(shù)組，用for...of，就會簡單很多：
~~~
//數(shù)組實例
var arr = ['red','blue','yellow','green'];
for (var x in arr) {
document.write(x + '<br />');
}
// 輸出
// red
// blue
// yellow
// green
~~~
## label語句
使用 label 語句可以在代碼中添加標(biāo)簽，以便將來使用。以下是 label 語句的語法：
~~~
label: statement
~~~
其中的`label`可以任何不是保留關(guān)鍵字的 JavaScript 標(biāo)識符，`label`語句可使用一個標(biāo)簽來唯一標(biāo)記一個循環(huán)，然后使用`break`或`continue`語句來指示程序是否中斷循環(huán)或繼續(xù)執(zhí)行。例如：
~~~
var count = 5;
start: for (var i = 0; i < count; i++) {
console.log(i);
}
//結(jié)果
// 0
// 1
// 2
// 3
// 4
// 5
~~~
## break 和 continue 語句
`break` 和 `continue`都是終止循環(huán)語句，區(qū)別是`break`語句是立即終止執(zhí)行，而`continue`則是終止本次循環(huán)，繼續(xù)下一次循環(huán)。
~~~
for (var i = 0; i <= 5; i++) {
if (i == 3) {
break;
}
console.log(i);
}
// 結(jié)果輸出
// 0
// 1
// 2
~~~
由此可見，當(dāng)執(zhí)行到`break`時，直接終止了當(dāng)前的循環(huán)，不再繼續(xù)執(zhí)行循環(huán)中的任何代碼而下面的例子則是`continue`的執(zhí)行情況。
~~~
for (var i = 0; i <= 5; i++) {
if (i == 3) {
continue;
}
console.log(i);
}
// 輸出結(jié)果
// 0
// 1
// 2
// 4
// 5
~~~
由此可見，當(dāng)執(zhí)行到`continue`的時候，只是終止了當(dāng)前循，而繼續(xù)執(zhí)行下一次循環(huán)。
## with 語句
`with`語句用于設(shè)置代碼在特定對象中的作用域，語法如下：
~~~
with (expression) statement
~~~
定義 with 語句的目的主要是為了簡化多次編寫同一個對象的工作，如下面的例子所示：
~~~
var qs = location.search.substring(1);
var hostName = location.hostname;
var url = location.href;
~~~
上面幾行代碼都包含 location 對象。如果使用 with 語句，可以把上面的代碼改寫成如下所示：
~~~
with(location){
var qs = search.substring(1);
var hostName = hostname;
var url = href;
}
~~~
>[danger] 由于大量使用 with 語句會導(dǎo)致性能下降，同時也會給調(diào)試代碼造成困難，因此在開發(fā)大型應(yīng)用程序時，不建議使用 with 語句。
## switch 語句
witch 語句是 if 語句的兄弟語句，在實際開發(fā)過程中，使用非常頻繁。我們可以用 switch 語句為表達(dá)式提供一系列的情況`（case）`。`switch` 語句的語法如下：
~~~
switch (expression) {
case value: statement;
break;
case value: statement;
break;
case value: statement;
break;
case value: statement;
break;
...
case value: statement;
break;
default: statement;
}
~~~
`switch`語句中的每一種情形（`case`）表示：如果表達(dá)式（`expression`）的值等于這個值（`value`）,則執(zhí)行后面的代碼塊（`statement`）。而 `break`關(guān)鍵字代表跳出當(dāng)前`switch`語句，`break`一般情況不應(yīng)該被省略，因為如果代碼執(zhí)行沒遇到`break`關(guān)鍵字，會繼續(xù)執(zhí)行下一個`case`，而最后的`default`關(guān)鍵字則表示，上面的所有`case`的`value`都不匹配表達(dá)式`expression`的時候，默認(rèn)會執(zhí)行`default`中的代碼塊。`switch`語句的出現(xiàn)是為了解決下面這種重復(fù)`if...elseif...`的問題。
~~~
if (i == 25){
alert("25");
} else if (i == 35) {
alert("35");
} else if (i == 45) {
alert("45");
} else {
alert("Other");
}
~~~
以上這段代碼可以用`switch`語句表示如下：
~~~
switch (i) {
case 25:
alert("25");
break;
case 35:
alert("35");
break;
case 45:
alert("45");
break;
default:
alert("Other");
}
~~~
而case中，可以合并多種值的情況，例如上面這個例子中，我們希望 `i`等于`25`和`35`的時候，都執(zhí)行相同代碼時，可以用如下書寫方式：
~~~
switch (i) {
case 25:
case 35:
alert("35 or 35");
break;
case 45:
alert("45");
break;
default:
alert("Other");
}
~~~
在`switch`的`case`中，我們也可以使用表達(dá)式，如：
~~~
var num = 25;
switch (true) {
case num < 0:
alert("Less than 0.");
break;
case num >= 0 && num <= 10:
alert("Between 0 and 10.");
break;
case num > 10 && num <= 20:
alert("Between 10 and 20.");
break;
default:
alert("More than 20.");
}
~~~
>[danger] 能使用`switch`語句代替 `if...elseif`的，盡量使用`switch`語句，`switch`語句的運行效率要高于 `if...elseif...`
AI寫作智能體 自主規(guī)劃任務(wù)，支持聯(lián)網(wǎng)查詢和網(wǎng)頁讀取，多模態(tài)高效創(chuàng)作各類分析報告、商業(yè)計劃、營銷方案、教學(xué)內(nèi)容等。
![]()
廣告