#第六章流程控制語句
講師：_無腦碼農(張磊)_
博客：http://www.h5code.com
課程內容：
[TOC]
* * * * *
>ECMA-262 規定了一組流程控制語句。語句定義了ECMAScript 中的主要語法，語句通
常由一個或者多個關鍵字來完成給定的任務。諸如：判斷、循環、退出等。
###1.>語句的定義
>在ECMAScript 中，所有的代碼都是由語句來構成的。語句表明執行過程中的流程、限定與約定，形式上可以是單行語句，或者由一對大括號“｛｝”括起來的復合語句，在語法描述中，復合語句整體可以作為一個單行語句處理。
**語句的種類**
| 類型|子類型|語法 |
| -- | -- |
| 聲明語句 | 變量聲明語句 |var box = 100; |
| 聲明語句 | 標簽聲明語句 |label : box; |
| 表達式語句 | 變量賦值語句 |box = 100; |
| 表達式語句 | 函數調用語句 |box(); |
| 表達式語句 | 屬性賦值語句 |box.property = 100; |
| 表達式語句 | 方法調用語句 |box.method(); |
| 分支語句 | 條件分支語句 |if () {} else {} |
| 分支語句 | 多重分支語句 |switch () { case n : ...}; |
| 循環語句 | for | for (;;;) {} |
| 循環語句 | for ... in | for ( x in x) {} |
| 循環語句 | while | while () {}; |
| 循環語句 | do ... while | do {} while (); |
| 控制結構 | 繼續執行子句 |continue ; |
| 控制結構 | 終端執行子句 |break ; |
| 控制結構 | 函數返回子句 |return ; |
| 控制結構 | 異常觸發子句 |throw ; |
| 控制結構 | 異常捕獲與處理 |try {} catch () {} finally {} |
| 其他 | 空語句 |; |
| 其他 | with | 語句with () {} |
###2.>if 語句
>if 語句即條件判斷語句，一共有三種格式：
1 . if (條件表達式) 語句;
~~~
var box = 100;
if (box > 50) alert('box大于50');//一行的if語句，判斷后執行一條語句
var box = 100;
if (box > 50)
alert('box 大于50'); //兩行的if 語句，判斷后也執行一條語句
alert('不管怎樣，我都能被執行到！');
var box = 100;
if (box < 50) {
alert('box 大于50');
alert('不管怎樣，我都能被執行到！');//用復合語句包含，判斷后執行一條復合語句
}
~~~
>對于if 語句括號里的表達式，ECMAScript會自動調用Boolean()轉型函數將這個表達式的結果轉換成一個布爾值。如果值為true，執行后面的一條語句，否則不執行。
*PS：if 語句括號里的表達式如果為true，只會執行后面一條語句，如果有多條語句，那么就必須使用復合語句把多條語句包含在內。*
*PS2：推薦使用第一種或者第三種格式，一行的if語句，或者多行的if 復合語句。這樣就不會因為多條語句而造成混亂。*
*PS3：復合語句我們一般喜歡稱作為：代碼塊。*
2 . if (條件表達式) {語句;} else {語句;}
~~~
var box = 100;
if (box > 50) {
alert('box 大于50'); //條件為true，執行這個代碼塊
} else {
alert('box 小于50'); //條件為false，執行這個代碼塊
}
~~~
3 .if (條件表達式) {語句;} else if (條件表達式) {語句;} ... else {語句;}
~~~
var box = 100;
if (box >= 100) { //如果滿足條件，不會執行下面任何分支
alert('甲');
} else if (box >= 90) {
alert('乙');
} else if (box >= 80) {
alert('丙');
} else if (box >= 70) {
alert('丁');
} else if (box >= 60) {
alert('及格');
} else { //如果以上都不滿足，則輸出不及格
alert('不及格');
}
~~~
###3.>switch 語句
>switch 語句是多重條件判斷，用于多個值相等的比較。
~~~
var box = 1;
switch (box) { //用于判斷box 相等的多個值
case 1 :
alert('one');
break; //break;用于防止語句的穿透
case 2 :
alert('two');
break;
case 3 :
alert('three');
break;
default : //相當于if 語句里的else，否則的意思
alert('error');
}
~~~
###4.>do...while 語句
>do...while 語句是一種先運行，后判斷的循環語句。也就是說，不管條件是否滿足，至少先運行一次循環體。
~~~
var box = 1; //如果是1，執行五次，如果是10，執行1 次
do {
alert(box);
box++;
} while (box <= 5); //先運行一次，再判斷
~~~
###5.>while 語句
>while 語句是一種先判斷，后運行的循環語句。也就是說，必須滿足條件了之后，方可運行循環體。
~~~
var box = 1; //如果是1，執行五次，如果是10，不執行
while (box <= 5) { //先判斷，再執行
alert(box);
box++;
}
~~~
###6.>for 語句
>for 語句也是一種先判斷，后運行的循環語句。但它具有在執行循環之前初始變量和定義循環后要執行代碼的能力。
~~~
for (var box = 1; box <= 5 ; box++) { //第一步，聲明變量var box = 1;
alert(box); //第二步，判斷box <=5
} //第三步，alert(box)
//第四步，box++
//第五步，從第二步再來，直到判斷為false
~~~
###7.>for...in 語句
>for...in 語句是一種精準的迭代語句，可以用來枚舉對象的屬性。
~~~
var box = { //創建一個對象
'name' : '無腦碼農', //鍵值對，左邊是屬性名，右邊是值
'age' : 28,
'height' : 178
};
for (var p in box) { //列舉出對象的所有屬性
alert(p);
}
~~~
###8.>break 和continue 語句
>break 和continue語句用于在循環中精確地控制代碼的執行。其中，break 語句會立即退出循環，強制繼續執行循環體后面的語句。而continue 語句退出當前循環，繼續后面的循環。
~~~
for (var box = 1; box <= 10; box++) {
if (box == 5) break; //如果box 是5，就退出循環
document.write(box);
document.write('<br />');
}
for (var box = 1; box <= 10; box++) {
if (box == 5) continue; //如果box 是5，就退出當前循環
document.write(box);
document.write('<br />');
}
~~~
###9.>with 語句
>with 語句的作用是將代碼的作用域設置到一個特定的對象中。
~~~
var box = { //創建一個對象
'name' : '無腦碼農', //鍵值對
'age' : 28,
'height' : 178
};
var n = box.name; //從對象里取值賦給變量
var a = box.age;
var h = box.height;
~~~
>可以將上面的三段賦值操作改寫成：
~~~
with (box) { //省略了box 對象名
var n = name;
var a = age;
var h = height;
}
~~~
