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分支男娄。

示例：如果今天不是周六或周日行贪，則會輸出默認的消息：

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標簽的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)類似購物車的“全選”焚廊、“反選”效果

示例代碼如下：

? ? ? ?

? ? ? ?

? ? ? ?

? ? ? ? ? ?

? ? ? ?

? ?

? ?

? ?