js中的程序控制語(yǔ)句
常見(jiàn)的程序有三種執(zhí)行結(jié)構(gòu)：
- 順序結(jié)構(gòu)
- 分支結(jié)構(gòu)
- 循環(huán)結(jié)構(gòu)
順序結(jié)構(gòu)：程序從第一行開(kāi)始執(zhí)行昨凡，按順序執(zhí)行到最后一行
分支結(jié)構(gòu)：就像一條岔路口怠堪，必須選擇且只能選擇其中一條道路繼續(xù)走下去什湘，不能同時(shí)執(zhí)行兩個(gè)分支里的代碼暑脆。
我們可以使用如下三種方式來(lái)實(shí)現(xiàn)程序的分支結(jié)構(gòu)
if(條件) {表達(dá)式}switch(變量) case 表達(dá)式箱亿； break涣澡；-
表達(dá)式1 ? 表達(dá)式2 ： 表達(dá)式3三目運(yùn)算
if語(yǔ)句：
我們可以通過(guò)if來(lái)實(shí)現(xiàn)一個(gè)分支結(jié)構(gòu)贱呐。if語(yǔ)句需要兩個(gè)必要的內(nèi)容：判斷條件和分支語(yǔ)句。其中判斷條件只能返回一個(gè)布爾值入桂，如果判斷條件為真奄薇，則執(zhí)行分支一，否則執(zhí)行分之二或跳過(guò)if語(yǔ)句想后邊繼續(xù)執(zhí)行抗愁。
雙分支結(jié)構(gòu)
if語(yǔ)句示例：
var age = 20;
if (age >= 18) { // 如果age >= 18為true馁蒂，則執(zhí)行if語(yǔ)句塊
alert('adult');
} else { // 否則執(zhí)行else語(yǔ)句塊
alert('teenager');
}
以上的示例是一個(gè)雙分支結(jié)構(gòu)呵晚，如果小括號(hào)中的條件表達(dá)式成立，則執(zhí)行第一個(gè)大括號(hào)里的代碼沫屡，否則執(zhí)行第二個(gè)大括號(hào)里的代碼饵隙。其中，else語(yǔ)句是可選的沮脖，如果沒(méi)有else語(yǔ)句金矛，判斷條件不成立就直接跳過(guò)分支，繼續(xù)向后執(zhí)行勺届。注意：當(dāng)分支中的代碼只有一行時(shí)驶俊，大括號(hào)可以省略，但是為了避免程序混亂免姿，不便于閱讀饼酿，最好不要省略。
多分支結(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');
}
}
我們可以通過(guò)嵌套if...else來(lái)實(shí)現(xiàn)多分支結(jié)構(gòu),請(qǐng)注意胚膊，if...else...語(yǔ)句的執(zhí)行特點(diǎn)是二選一故俐，在多個(gè)if...else...語(yǔ)句中，如果某個(gè)條件成立澜掩，則后續(xù)就不再繼續(xù)判斷了购披。
switch語(yǔ)句
前邊我們?cè)趯W(xué)分支結(jié)構(gòu)是學(xué)到了if...else...這種結(jié)構(gòu)，我們可以通過(guò)if語(yǔ)句的嵌套實(shí)現(xiàn)多分支結(jié)構(gòu)肩榕，下邊將要學(xué)習(xí)一種更簡(jiǎn)單的多分支語(yǔ)句：switch...case...
語(yǔ)法：
switch(n)
{
case 1:
執(zhí)行代碼塊 1
break;
case 2:
執(zhí)行代碼塊 2
break;
default:
n 與 case 1 和 case 2 不同時(shí)執(zhí)行的代碼
}
首先設(shè)置表達(dá)式 n（通常是一個(gè)變量）刚陡。隨后表達(dá)式的值會(huì)與結(jié)構(gòu)中的每個(gè) case 的值做比較。如果存在匹配株汉，則與該 case 關(guān)聯(lián)的代碼塊會(huì)被執(zhí)行筐乳。請(qǐng)使用 break 來(lái)阻止代碼自動(dòng)地向下一個(gè) case 運(yùn)行,如果case之后沒(méi)有break語(yǔ)句，則程序會(huì)掉入下一個(gè)case中乔妈，直到遇到第一個(gè)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)鍵詞
也許你注意到了勃刨，在上邊講解語(yǔ)法結(jié)構(gòu)是有一個(gè)default，關(guān)鍵字股淡。這個(gè)關(guān)鍵字的主要任務(wù)相當(dāng)于if語(yǔ)句中的最后一個(gè)else分支身隐，和前邊的條件都不匹配時(shí)，執(zhí)行default分支唯灵。
示例：如果今天不是周六或周日贾铝，則會(huì)輸出默認(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)隨處可見(jiàn)，如：鐘表不停的轉(zhuǎn)動(dòng)垢揩，太陽(yáng)不斷的東升西落玖绿，學(xué)生們圍著跑到跑圈等等。重復(fù)的做一件事情叁巨，就是循環(huán)斑匪，如果這循環(huán)沒(méi)有停止的條件，那么就成了死循環(huán)俘种，如果循環(huán)達(dá)到了停止條件秤标，循環(huán)就結(jié)束，比如：鐘表沒(méi)電宙刘，鐘表停止運(yùn)動(dòng)苍姜，學(xué)生跑夠了一定的圈數(shù)，就不用再跑了悬包。
什么時(shí)候我們會(huì)用到循環(huán)衙猪？
如果來(lái)計(jì)算1+2+3的和，應(yīng)該怎么用程序表示布近？
var sum = 1 + 2 + 3垫释；
那如果從1一直加到10000呢？這種情況下撑瞧，在去寫(xiě)一個(gè)加法表達(dá)式就很浪費(fèi)了棵譬，我們觀察：這個(gè)任務(wù)是在重復(fù)的執(zhí)行加法運(yùn)算，唯一變化的是加數(shù)预伺，所以當(dāng)程序需重復(fù)執(zhí)行一項(xiàng)任務(wù)時(shí)订咸，我們就可以使用循環(huán)來(lái)替我們完成任務(wù)了。
JavaScript有多種循環(huán)語(yǔ)句酬诀，今天我們學(xué)習(xí)的是for循環(huán).
for循環(huán)的語(yǔ)法結(jié)構(gòu)
for (定義一個(gè)循環(huán)增量; 循環(huán)條件; 循環(huán)增量自加一) {
循環(huán)體脏嚷；
}
我們來(lái)分析一下這個(gè)循環(huán)結(jié)構(gòu)：
- 循環(huán)增量：在這里定義一個(gè)變量，并賦初值（一般是0或1）
- 循環(huán)條件：這是一個(gè)條件表達(dá)式瞒御，用來(lái)判斷循環(huán)條件是否滿足
- 循環(huán)在呢過(guò)量自加一：這里在前邊定義的循環(huán)增量會(huì)進(jìn)行加一操作
- 循環(huán)體：如果循環(huán)條件成立則反復(fù)執(zhí)行循環(huán)體父叙，一致到循環(huán)條件不成立為止
這個(gè)for循環(huán)只執(zhí)行順序如下：
- 定義一個(gè)循環(huán)增量
- 判斷循環(huán)條件是否成立
- 成立則執(zhí)行循環(huán)體/不成立則跳過(guò)循環(huán)體，繼續(xù)向后執(zhí)行
- 循環(huán)增量自加一
- 判斷自加一后肴裙，循環(huán)條件是否成立
- 成立則執(zhí)行循環(huán)體/不成立則跳過(guò)循環(huán)體趾唱，繼續(xù)向后執(zhí)行
- 。蜻懦。甜癞。
- 。阻肩。。
- 。烤惊。乔煞。
- 當(dāng)遇到循環(huán)條件不成立，結(jié)束循環(huán)柒室，繼續(xù)向后執(zhí)行代碼
注意：我們?cè)趯?xiě)循環(huán)時(shí)渡贾，一定要有循環(huán)條件，否則雄右，程序會(huì)進(jìn)入死循環(huán)空骚。
示例：1+2+3+。擂仍。囤屹。+1000：
var x = 0;
var i;
for (i=1; i<=10000; i++) {
x = x + i;
}
x; // 50005000
讓我們來(lái)分析一上邊下for循環(huán)的控制條件：
- i=1 這是初始條件，將變量i置為1逢渔；
- i<=10000 這是判斷條件肋坚，滿足時(shí)就繼續(xù)循環(huán)，不滿足就退出循環(huán)肃廓；
- i++ 這是每次循環(huán)后的遞增條件智厌，由于每次循環(huán)后變量i都會(huì)加1，因此它終將在若干次循環(huán)后不滿足判斷條件i<=10000而退出循環(huán)盲赊。
循環(huán)跳出語(yǔ)句
break:跳出循環(huán)铣鹏，繼續(xù)向后執(zhí)行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
for(var i=0; i<10; i++){
alert(i);
if (i>5){
break;
}
}
</script>
</html>
以上程序，當(dāng)輸出到6時(shí)就停止輸出了哀蘑，因?yàn)?>5诚卸，滿足if條件，所以就跳出循環(huán)递礼，繼續(xù)向后執(zhí)行
continue:結(jié)束本次循環(huán)惨险，開(kāi)啟下次循環(huán)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
for(var i=0; i<10; i++){
alert(i);
if (i>5){
// break;
continue;
}
alert("我在continue之后執(zhí)行");
}
</script>
</html>
以上代碼從輸出6開(kāi)始，就不再輸出"我在continue之后執(zhí)行"這句話了脊髓，但是數(shù)字還在繼續(xù)輸出
拓展：for...in循環(huán)
for循環(huán)的一個(gè)變體是for ... in循環(huán)辫愉，它可以把一個(gè)對(duì)象的所有屬性依次循環(huán)出來(lái)：
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后，就是一個(gè)復(fù)選框了将硝，如果checked屬性是true恭朗，那么選框被選中；如果checked屬性設(shè)置為false依疼，則選框是取消選中狀態(tài)痰腮。下邊，我們使用js來(lái)設(shè)置選框的狀態(tài).
示例代碼：通過(guò)點(diǎn)擊切換按鈕律罢，實(shí)現(xiàn)選框的選中】取消選中效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="切換" id="btn1" />
<input type="checkbox" id="ch1" />
</body>
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
var ch1 = document.getElementById("ch1");
btn1.onclick = function (){
if (ch1.checked){
ch1.checked = false;
}else{
ch1.checked = true;
}
}
</script>
</html>
練習(xí):實(shí)現(xiàn)類似購(gòu)物車(chē)的“全選”膀值、“反選”效果
示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="全選" id="btn1" />
<input type="button" value="反選" id="btn2" />
<input type="checkbox" id="ch1" />
<ul id="ul1">
<li><input type="checkbox" /></li>
<li><input type="checkbox" /></li>
<li><input type="checkbox" /></li>
<li><input type="checkbox" /></li>
<li><input type="checkbox" /></li>
<li><input type="checkbox" /></li>
<li><input type="checkbox" /></li>
<li><input type="checkbox" /></li>
<li><input type="checkbox" /></li>
<li><input type="checkbox" /></li>
</ul>
</body>
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var ch1 = document.getElementById("ch1");
var ul1 = document.getElementById("ul1");
var inputs = ul1.getElementsByTagName("input");
// alert(inputs.length);
btn1.onclick = function (){
for (var i=0; i<inputs.length; i++){
inputs[i].checked = true;
}
ch1.checked = true;
}
btn2.onclick = function (){
var num = 0;
for (var i=0; i<inputs.length; i++){
if (inputs[i].checked==false){
num++;
}
inputs[i].checked = !inputs[i].checked;
}
if (num == inputs.length){
alert("ok");
}
}
</script>
</html>
while循環(huán)
for循環(huán)在已知循環(huán)的初始和結(jié)束條件時(shí)非常有用棍丐。而上述忽略了條件的for循環(huán)容易讓人看不清循環(huán)的邏輯，此時(shí)用while循環(huán)更佳沧踏。
while循環(huán)只有一個(gè)判斷條件歌逢，條件滿足，就不斷循環(huán)翘狱，條件不滿足時(shí)則退出循環(huán)秘案。比如我們要計(jì)算100以內(nèi)所有奇數(shù)之和，可以用while循環(huán)實(shí)現(xiàn)：
var x = 0;
var n = 99;
while (n > 0) {
x = x + n;
n = n - 2;
}
x; // 2500
在循環(huán)內(nèi)部變量n不斷自減潦匈，直到變?yōu)?code>-1時(shí)阱高，不再滿足while條件，循環(huán)退出茬缩。
do ... while循環(huán)
do { ... } while()循環(huán)赤惊，它和while循環(huán)的唯一區(qū)別在于，不是在每次循環(huán)開(kāi)始的時(shí)候判斷條件寒屯，而是在每次循環(huán)完成的時(shí)候判斷條件：
var n = 0;
do {
n = n + 1;
} while (n < 100);
n; // 100
用do { ... } while()循環(huán)要小心荐捻，循環(huán)體會(huì)至少執(zhí)行1次，而for和while循環(huán)則可能一次都不執(zhí)行寡夹。
