js中的程序控制語句

常見的程序有三種執(zhí)行結(jié)構(gòu)：

順序結(jié)構(gòu)

分支結(jié)構(gòu)

循環(huán)結(jié)構(gòu)

順序結(jié)構(gòu)：程序從第一行開始執(zhí)行，按順序執(zhí)行到最后一行

分支結(jié)構(gòu)：就像一條岔路口，必須選擇且只能選擇其中一條道路繼續(xù)走下去，不能同時執(zhí)行兩個分支里的代碼。

我們可以使用如下三種方式來實現(xiàn)程序的分支結(jié)構(gòu)

if(條件) {表達式}

switch(變量) case 表達式； break；

表達式1 ? 表達式2 ： 表達式3三目運算

if語句：

我們可以通過if來實現(xiàn)一個分支結(jié)構(gòu)。if語句需要兩個必要的內(nèi)容：判斷條件和分支語句。其中判斷條件只能返回一個布爾值，如果判斷條件為真，則執(zhí)行分支一，否則執(zhí)行分之二或跳過if語句想后邊繼續(xù)執(zhí)行。

雙分支結(jié)構(gòu)

if語句示例：

var age = 20;

if (age >= 18) { // 如果age >= 18為true，則執(zhí)行if語句塊

? ? alert('adult');

} else { // 否則執(zhí)行else語句塊

? ? alert('teenager');

}

以上的示例是一個雙分支結(jié)構(gòu)，如果小括號中的條件表達式成立，則執(zhí)行第一個大括號里的代碼，否則執(zhí)行第二個大括號里的代碼。其中，else語句是可選的，如果沒有else語句，判斷條件不成立就直接跳過分支，繼續(xù)向后執(zhí)行。注意：當(dāng)分支中的代碼只有一行時，大括號可以省略，但是為了避免程序混亂，不便于閱讀，最好不要省略。

多分支結(jié)構(gòu)

var age = 3;

if (age >= 18) {

? ? alert('adult');

} else if (age >= 6) {

? ? alert('teenager');

} else {

? ? alert('kid');

}

或

var age = 3;

if (age >= 18) {

? ? alert('adult');

} else {

? ? if (age >= 6) {

? ? ? ? alert('teenager');

? ? } else {

? ? ? ? alert('kid');

? ? }

}

我們可以通過嵌套if...else來實現(xiàn)多分支結(jié)構(gòu),請注意，if...else...語句的執(zhí)行特點是二選一，在多個if...else...語句中，如果某個條件成立，則后續(xù)就不再繼續(xù)判斷了。

switch語句

前邊我們在學(xué)分支結(jié)構(gòu)是學(xué)到了if...else...這種結(jié)構(gòu)，我們可以通過if語句的嵌套實現(xiàn)多分支結(jié)構(gòu)，下邊將要學(xué)習(xí)一種更簡單的多分支語句：switch...case...

語法：

switch(n)

{

case 1:

? 執(zhí)行代碼塊 1

? break;

case 2:

? 執(zhí)行代碼塊 2

? break;

default:

? n 與 case 1 和 case 2 不同時執(zhí)行的代碼

}

首先設(shè)置表達式 n（通常是一個變量）。隨后表達式的值會與結(jié)構(gòu)中的每個 case 的值做比較。如果存在匹配，則與該 case 關(guān)聯(lián)的代碼塊會被執(zhí)行。請使用 break 來阻止代碼自動地向下一個 case 運行,如果case之后沒有break語句，則程序會掉入下一個case中，直到遇到第一個break或執(zhí)行完全部的case才停止。

練習(xí)：判斷今天是周幾，并彈框顯示

var day=new Date().getDay();

switch (day)

{

case 0:

? x="Today it's Sunday";

? break;

case 1:

? x="Today it's Monday";

? break;

case 2:

? x="Today it's Tuesday";

? break;

case 3:

? x="Today it's Wednesday";

? break;

case 4:

? x="Today it's Thursday";

? break;

case 5:

? x="Today it's Friday";

? break;

case 6:

? x="Today it's Saturday";

? break;

}

alert(x)；

default關(guān)鍵詞

也許你注意到了，在上邊講解語法結(jié)構(gòu)是有一個default，關(guān)鍵字。這個關(guān)鍵字的主要任務(wù)相當(dāng)于if語句中的最后一個else分支，和前邊的條件都不匹配時，執(zhí)行default分支。

示例：如果今天不是周六或周日，則會輸出默認(rèn)的消息：

var day=new Date().getDay();

switch (day)

{

case 6:

? x="Today it's Saturday";

? break;

case 0:

? x="Today it's Sunday";

? break;

default:

? x="Looking forward to the Weekend";

}

for循環(huán)

什么是循環(huán)？

生活中的循環(huán)隨處可見，如：鐘表不停的轉(zhuǎn)動，太陽不斷的東升西落，學(xué)生們圍著跑到跑圈等等。重復(fù)的做一件事情，就是循環(huán)，如果這循環(huán)沒有停止的條件，那么就成了死循環(huán)，如果循環(huán)達到了停止條件，循環(huán)就結(jié)束，比如：鐘表沒電，鐘表停止運動，學(xué)生跑夠了一定的圈數(shù)，就不用再跑了。

什么時候我們會用到循環(huán)？

如果來計算1+2+3的和，應(yīng)該怎么用程序表示？

? ? var sum = 1 + 2 + 3；

那如果從1一直加到10000呢？這種情況下，在去寫一個加法表達式就很浪費了，我們觀察：這個任務(wù)是在重復(fù)的執(zhí)行加法運算，唯一變化的是加數(shù)，所以當(dāng)程序需重復(fù)執(zhí)行一項任務(wù)時，我們就可以使用循環(huán)來替我們完成任務(wù)了。

JavaScript有多種循環(huán)語句，今天我們學(xué)習(xí)的是for循環(huán).

for循環(huán)的語法結(jié)構(gòu)

for (定義一個循環(huán)增量; 循環(huán)條件; 循環(huán)增量自加一) {

? ? 循環(huán)體；

}

我們來分析一下這個循環(huán)結(jié)構(gòu)：

循環(huán)增量：在這里定義一個變量，并賦初值（一般是0或1）

循環(huán)條件：這是一個條件表達式，用來判斷循環(huán)條件是否滿足

循環(huán)在呢過量自加一：這里在前邊定義的循環(huán)增量會進行加一操作

循環(huán)體：如果循環(huán)條件成立則反復(fù)執(zhí)行循環(huán)體，一致到循環(huán)條件不成立為止

這個for循環(huán)只執(zhí)行順序如下：

699614-ff43af376724d43f.png

定義一個循環(huán)增量

判斷循環(huán)條件是否成立

成立則執(zhí)行循環(huán)體/不成立則跳過循環(huán)體，繼續(xù)向后執(zhí)行

循環(huán)增量自加一

判斷自加一后，循環(huán)條件是否成立

成立則執(zhí)行循環(huán)體/不成立則跳過循環(huán)體，繼續(xù)向后執(zhí)行

。。。

。。。

。。。

當(dāng)遇到循環(huán)條件不成立，結(jié)束循環(huán)，繼續(xù)向后執(zhí)行代碼

注意：我們在寫循環(huán)時，一定要有循環(huán)條件，否則，程序會進入死循環(huán)。

示例：1+2+3+。。。+1000：

var x = 0;

var i;

for (i=1; i<=10000; i++) {

? ? x = x + i;

}

x; // 50005000

讓我們來分析一上邊下for循環(huán)的控制條件：

i=1 這是初始條件，將變量i置為1；

i<=10000 這是判斷條件，滿足時就繼續(xù)循環(huán)，不滿足就退出循環(huán)；

i++ 這是每次循環(huán)后的遞增條件，由于每次循環(huán)后變量i都會加1，因此它終將在若干次循環(huán)后不滿足判斷條件i<=10000而退出循環(huán)。

循環(huán)跳出語句

break:跳出循環(huán)，繼續(xù)向后執(zhí)行

? ? ? ? for(var i=0; i<10; i++){

? ? ? ? ? ? alert(i);

? ? ? ? ? ? if (i>5){

? ? ? ? ? ? ? ? break;

? ? ? ? ? ? }

? ? ? ? }

以上程序，當(dāng)輸出到6時就停止輸出了，因為6>5，滿足if條件，所以就跳出循環(huán)，繼續(xù)向后執(zhí)行

continue:結(jié)束本次循環(huán)，開啟下次循環(huán)

? ? ? ? for(var i=0; i<10; i++){

? ? ? ? ? ? alert(i);

? ? ? ? ? ? if (i>5){

? ? ? ? ? ? ? ? // break;

? ? ? ? ? ? ? ? continue;

? ? ? ? ? ? }

? ? ? ? ? ? alert("我在continue之后執(zhí)行");

? ? ? ? }

以上代碼從輸出6開始，就不再輸出"我在continue之后執(zhí)行"這句話了，但是數(shù)字還在繼續(xù)輸出

拓展：for...in循環(huán)

for循環(huán)的一個變體是for ... in循環(huán)，它可以把一個對象的所有屬性依次循環(huán)出來：

var o = {

? ? name: 'Jack',

? ? age: 20,

? ? city: 'Beijing'

};

for (var key in o) {

? ? alert(key); // 'name', 'age', 'city'

}

input的checked屬性

在學(xué)習(xí)HTML是我們都知道：把input標(biāo)簽的type設(shè)置為checkbox后，就是一個復(fù)選框了，如果checked屬性是true，那么選框被選中；如果checked屬性設(shè)置為false，則選框是取消選中狀態(tài)。下邊，我們使用js來設(shè)置選框的狀態(tài).

示例代碼：通過點擊切換按鈕，實現(xiàn)選框的選中】取消選中效果

? ? ? ?

? ? ? ?

? ? ? ? var btn1 = document.getElementById("btn1");

? ? ? ? var ch1 = document.getElementById("ch1");

? ? ? ? btn1.onclick = function (){

? ? ? ? ? ? if (ch1.checked){

? ? ? ? ? ? ? ? ch1.checked = false;

? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? ch1.checked = true;

? ? ? ? ? ? }

? ? ? ? }

練習(xí):實現(xiàn)類似購物車的“全選”、“反選”效果

示例代碼如下：

? ? ? ?

? ? ? ?

? ? ? ?

? ? ? ? ? ?

? ? ? ?

? ?

? ?

? ?