JavaScript流程控制及應(yīng)用時(shí)間：匯報(bào)人：JavaScript+Vue.js前端開發(fā)任務(wù)驅(qū)動(dòng)式教程3.1JavaScript的條件語(yǔ)句3.2JavaScript的循環(huán)語(yǔ)句目錄JavaScript的條件語(yǔ)句用于基于不同的條件執(zhí)行不同的語(yǔ)句。編寫程序代碼時(shí)，經(jīng)常需要為不同的決定執(zhí)行不同的動(dòng)作，可以在代碼中使用條件語(yǔ)句來(lái)完成該任務(wù)。在JavaScript中，可以使用以下條件語(yǔ)句。（1）if語(yǔ)句：只有當(dāng)指定條件為true時(shí)，才執(zhí)行指定的代碼。（2）if…else…語(yǔ)句：當(dāng)條件為true時(shí)執(zhí)行指定的代碼，當(dāng)條件為false時(shí)執(zhí)行其他代碼。（3）if…elseif…else…語(yǔ)句：使用該語(yǔ)句選擇多個(gè)代碼塊中的一個(gè)來(lái)執(zhí)行。（4）switch語(yǔ)句：使用該語(yǔ)句選擇多個(gè)代碼塊中的一個(gè)來(lái)執(zhí)行。JavaScript的條件語(yǔ)句JavaScript的條件語(yǔ)句1．if語(yǔ)句只有當(dāng)指定條件為true時(shí)，該語(yǔ)句才會(huì)執(zhí)行指定的代碼。語(yǔ)法格式如下。if(條件){//當(dāng)條件為true時(shí)執(zhí)行的代碼}這里的關(guān)鍵字為小寫的if，如果使用大寫字母（IF），則會(huì)產(chǎn)生JavaScript錯(cuò)誤。JavaScript的條件語(yǔ)句例：以下代碼實(shí)現(xiàn)的功能如下：當(dāng)時(shí)間早于20:00時(shí)，問候語(yǔ)顯示為Goodday。lettime=12;if(time<20){x="Goodday";}document.write(x);//輸出結(jié)果為Goodday該語(yǔ)句不包含else，只有在指定條件為true時(shí)才會(huì)執(zhí)行指定的代碼。JavaScript的條件語(yǔ)句2．if…else…語(yǔ)句使用if…else…語(yǔ)句在條件為true時(shí)執(zhí)行指定的代碼，在條件為false時(shí)執(zhí)行其他代碼。語(yǔ)法格式如下。if(條件){//當(dāng)條件為true時(shí)執(zhí)行的代碼}else{//當(dāng)條件為false時(shí)執(zhí)行的代碼}JavaScript的條件語(yǔ)句例：以下代碼實(shí)現(xiàn)的功能如下：當(dāng)時(shí)間早于20:00時(shí)，顯示問候語(yǔ)Goodday，否則顯示問候語(yǔ)Goodevening。lettime=21;if(time<20){x="Goodday";}else{x="Goodevening";}document.write(x);//輸出結(jié)果為GoodeveningJavaScript的條件語(yǔ)句3．if…elseif…else…語(yǔ)句使用if…elseif…else…語(yǔ)句選擇多個(gè)代碼塊中的一個(gè)來(lái)執(zhí)行。語(yǔ)法格式如下。if(條件1){//當(dāng)條件1為true時(shí)執(zhí)行的代碼}elseif(條件2){//當(dāng)條件2為true時(shí)執(zhí)行的代碼}else{//當(dāng)條件1和條件2都不為true時(shí)執(zhí)行的代碼}JavaScript的條件語(yǔ)句例：以下代碼實(shí)現(xiàn)的功能如下：當(dāng)時(shí)間早于10:00時(shí)，顯示問候語(yǔ)Goodmorning；當(dāng)時(shí)間在10:00至20:00內(nèi)時(shí)，顯示問候語(yǔ)Goodday；否則，顯示問候語(yǔ)Goodevening。lettime=8;if(time<10){x="Goodmorning";}elseif(time<20){x="Goodday";}else{x="Goodevening";}document.write(x);//輸出結(jié)果為GoodmorningJavaScript的條件語(yǔ)句4.switch語(yǔ)句switch語(yǔ)句用于基于不同條件執(zhí)行不同動(dòng)作。使用switch語(yǔ)句可選擇要執(zhí)行的多個(gè)代碼塊中的一個(gè)來(lái)執(zhí)行。語(yǔ)法格式如下。switch(表達(dá)式){casem://執(zhí)行代碼塊1break;casen://執(zhí)行代碼塊2break;default://表達(dá)式的值與m、n不同時(shí)執(zhí)行的代碼}JavaScript的條件語(yǔ)句首先計(jì)算一次switch對(duì)應(yīng)表達(dá)式（通常為一個(gè)變量）的值，隨后表達(dá)式的值會(huì)與結(jié)構(gòu)中每個(gè)case后面的值進(jìn)行比較。如果存在匹配項(xiàng)，則與該case關(guān)聯(lián)的代碼塊會(huì)被執(zhí)行。使用break來(lái)阻止代碼自動(dòng)向下一個(gè)case運(yùn)行，跳出switch語(yǔ)句。switch語(yǔ)句中的表達(dá)式不一定是條件表達(dá)式，可以是普通的表達(dá)式，其值可以是數(shù)值、字符串或布爾值。執(zhí)行switch語(yǔ)句時(shí)，首先將表達(dá)式的值與一個(gè)數(shù)據(jù)進(jìn)行比較，當(dāng)表達(dá)式的值與所列數(shù)據(jù)相等時(shí)，執(zhí)行相應(yīng)的語(yǔ)句；如果表達(dá)式的值與所有列出的數(shù)據(jù)都不相等，則執(zhí)行default后的語(yǔ)句；如果沒有default關(guān)鍵字，則跳出switch語(yǔ)句并執(zhí)行switch語(yǔ)句后面的語(yǔ)句。JavaScript的條件語(yǔ)句例：以下代碼實(shí)現(xiàn)的功能如下：顯示今日為星期幾。varday=newDate().getDay();switch(day){case0:x="星期日";break;case1:x="星期一";break;case2:x="星期二";break;case3:x="星期三";break;case4:x="星期四";break;case5:x="星期五";break;case6:x="星期六";break;}document.write("今天是："+x);有時(shí)需要通過不同的case語(yǔ)句來(lái)使用相同的代碼。JavaScript的條件語(yǔ)句例：switch(newDate().getDay()){case4:case5:info="周末快到了。";break;case0:case6:info="今天是周末。";break;default:info="期待周末！";}document.write(info);switch語(yǔ)句使用全等（===），即對(duì)于已匹配的表達(dá)式的值和case后面的值，它們的值和類型都必須相同，全等的結(jié)果才能為true。JavaScript的條件語(yǔ)句【示例3-6】demo0306.html代碼如下。varx="0";switch(x){case0:text="Off";break;case1:text="On";break;default:text="Novaluefound";}document.write(text);//輸出的值為Novaluefound以上代碼中，x與每個(gè)case后面的值都不匹配。JavaScript的條件語(yǔ)句5．break關(guān)鍵字在switch語(yǔ)句中，如果JavaScript遇到break關(guān)鍵字，則會(huì)跳出switch代碼塊，此舉將中斷代碼塊中更多代碼的執(zhí)行及case匹配。break能夠節(jié)省大量代碼執(zhí)行時(shí)間，因?yàn)樗鼤?huì)“忽略”switch代碼塊中其他代碼的執(zhí)行。switch語(yǔ)句中的最后一個(gè)case語(yǔ)句不必中斷，該語(yǔ)句執(zhí)行完畢后，switch語(yǔ)句會(huì)自然結(jié)束。JavaScript的條件語(yǔ)句6．default關(guān)鍵字使用default關(guān)鍵字指定switch語(yǔ)句中不存在case匹配項(xiàng)時(shí)所執(zhí)行的代碼。default在switch語(yǔ)句中是可選的，并非必不可少，但通常會(huì)把它放在switch語(yǔ)句的最后來(lái)執(zhí)行兜底操作。例：以下代碼實(shí)現(xiàn)的功能如下：如果今天不是周六或周日，則會(huì)輸出默認(rèn)的消息。varday=newDate().getDay();switch(day){case6:x="今天是星期六";break;case0:x="今天是星期日";break;default:x="期待周末！";}document.write(x);JavaScript的循環(huán)語(yǔ)句如果需要多次運(yùn)行相同的代碼，并且每次需要的參數(shù)值都不同，那么使用循環(huán)是很方便的，循環(huán)可以將代碼塊反復(fù)執(zhí)行指定的次數(shù)。數(shù)組num的定義如下。varnum=[0,1,2,3,4,5];以下代碼可以輸出數(shù)組中元素的值。document.write(num[0]+"<br>");document.write(num[1]+"<br>");document.write(num[2]+"<br>");document.write(num[3]+"<br>");document.write(num[4]+"<br>");document.write(num[5]+"<br>");但以上代碼通常寫為如下形式。for(vari=0;i<num.length;i++){document.write(num[i]+"<br>");}JavaScript的循環(huán)語(yǔ)句JavaScript支持不同類型的循環(huán)。（1）while循環(huán)：當(dāng)指定的條件為true時(shí)執(zhí)行指定的代碼塊。（2）do…while循環(huán)：當(dāng)指定的條件為true時(shí)執(zhí)行指定的代碼塊。（3）for循環(huán)：多次遍歷代碼塊，并且循環(huán)的次數(shù)固定。（4）for…in循環(huán)：循環(huán)遍歷對(duì)象的屬性。（5）for…of循環(huán)：循環(huán)遍歷可迭代對(duì)象的值。JavaScript的循環(huán)語(yǔ)句1．while循環(huán)While循環(huán)會(huì)在指定條件為true時(shí)循環(huán)執(zhí)行代碼塊，只要指定條件為true，while循環(huán)就可以一直執(zhí)行代碼塊。語(yǔ)法格式如下。while(條件){//要執(zhí)行的代碼

}JavaScript的循環(huán)語(yǔ)句例：只要變量i小于5，本例中的循環(huán)就繼續(xù)運(yùn)行。代碼如下。varx="";vari=0;while(i<5){x=x+"Thenumberis"+i+"<br>";i++;}如果忘記增加條件中所用變量的值，即沒有i++語(yǔ)句，則該循環(huán)永遠(yuǎn)不會(huì)結(jié)束（即死循環(huán)）。這可能會(huì)導(dǎo)致瀏覽器崩潰。JavaScript的循環(huán)語(yǔ)句2．do…while循環(huán)do…while循環(huán)是while循環(huán)的變體，該循環(huán)在檢查條件是否為true之前會(huì)執(zhí)行一次代碼塊，此后如果條件為true，則重復(fù)這個(gè)循環(huán)。語(yǔ)法格式如下。do{//要執(zhí)行的代碼

}while(條件);JavaScript的循環(huán)語(yǔ)句例：代碼如下。varx="";vari=0;do{x=x+"Thenumberis"+i+"<br>";i++;}while(i<5);以上示例代碼使用do…while循環(huán)，即使條件為false，該循環(huán)也至少會(huì)執(zhí)行一次。別忘記增加條件中所用變量的值，否則循環(huán)永遠(yuǎn)不會(huì)結(jié)束！JavaScript的循環(huán)語(yǔ)句3.for循環(huán)語(yǔ)法格式如下。for(表達(dá)式1;表達(dá)式2;表達(dá)式3){//要執(zhí)行的代碼塊}表達(dá)式1：在循環(huán)（代碼塊）開始前執(zhí)行。表達(dá)式2：執(zhí)行循環(huán)（代碼塊）的條件。表達(dá)式3：在循環(huán)（代碼塊）被執(zhí)行之后執(zhí)行。先執(zhí)行表達(dá)式1，完成初始化；再判斷表達(dá)式2的值是否為true，如果為true，則執(zhí)行循環(huán)代碼塊，否則退出循環(huán)；執(zhí)行循環(huán)代碼塊之后，執(zhí)行表達(dá)式3；接著重新判斷表達(dá)式2的值，若其值為true，則再次重復(fù)執(zhí)行循環(huán)代碼塊，如此循環(huán)執(zhí)行。JavaScript的循環(huán)語(yǔ)句例：varx="";for(vari=0;i<5;i++){x=x+"Thenumberis"+i+"<br>";}從上述代碼可以看出以下信息。表達(dá)式1在循環(huán)開始之前定義變量：vari=0。表達(dá)式2定義了循環(huán)運(yùn)行的條件：i必須小于5。表達(dá)式3在代碼塊已被執(zhí)行一次后使i增加1：i++。JavaScript的條件語(yǔ)句（1）表達(dá)式1通常使用表達(dá)式1來(lái)初始化for循環(huán)中所用的變量（vari=0），也可以在表達(dá)式1中初始化由逗號(hào)分隔的多個(gè)值。例如：varnum=[0,1,2,3,4,5];for(vari=0,len=num.length,info="";i<len;i++){info+=num[i]+"<br>";}document.write(info);表達(dá)式1是可選的，也就是說，可以省略表達(dá)式1，而在循環(huán)開始前設(shè)置變量的值。例如：vari=2;varlen=num.length;for(;i<len;i++){document.write(num[i]+"<br>");}JavaScript的條件語(yǔ)句（2）表達(dá)式2通常表達(dá)式2用于判斷條件是否成立，表達(dá)式2同樣是可選的。如果表達(dá)式2返回true，則循環(huán)再次開始；如果返回false，則循環(huán)將結(jié)束。如果省略了表達(dá)式2，那么必須在循環(huán)內(nèi)提供break，否則循環(huán)會(huì)無(wú)法停止，這有可能令瀏覽器崩潰。（3）表達(dá)式3表達(dá)式3通常用于增加初始變量的值，表達(dá)式3有多種用法，增量可以是負(fù)數(shù)（i--），或者更大的數(shù)（i=i+15）。表達(dá)式3也是可選的，當(dāng)循環(huán)體內(nèi)部有相應(yīng)的代碼時(shí)，表達(dá)式3可以省略。例如：vari=0;varlen=num.length;for(;i<len;){document.write(num[i]+"<br>");i++;}JavaScript的條件語(yǔ)句4．for…in循環(huán)JavaScript的for…in循環(huán)用于循環(huán)遍歷對(duì)象的屬性，for…in循環(huán)中的代碼塊將針對(duì)每個(gè)屬性執(zhí)行一次。語(yǔ)法格式如下。for(keyinobject){//要執(zhí)行的代碼}（1）使用for…in循環(huán)遍歷對(duì)象的屬性lettxt="";constbook={name:"網(wǎng)頁(yè)應(yīng)用實(shí)踐",price:38.8,edition:2};for(letxinbook)a{txt=txt+book[x]+""+"<br>";}document.write(txt);以上代碼中的for…in循環(huán)會(huì)遍歷book對(duì)象，每次迭代返回一個(gè)鍵（x），鍵用于訪問鍵的值，鍵的值為book[x]。JavaScript的條件語(yǔ)句（2）使用for…in循環(huán)輸出數(shù)組中的元素語(yǔ)法格式如下。for(variableinarray){//要執(zhí)行的代碼}例：代碼如下。lettxt="";constnums=[1,2,3,4,5];for(letxinnums){txt+=nums[x]+"<br>";}document.write(txt);JavaScript的條件語(yǔ)句5．for…of循環(huán)for…of循環(huán)于2015年被添加到ES6中，JavaScript的for…of循環(huán)用于循環(huán)遍歷可迭代對(duì)象的值。它允許循環(huán)遍歷可迭代的數(shù)據(jù)結(jié)構(gòu)，如數(shù)組、字符串、映射、節(jié)點(diǎn)列表等。語(yǔ)法格式如下。for(variableofiterable){//要執(zhí)行的代碼}其中，對(duì)于每次迭代，下一個(gè)屬性的值都會(huì)分配給variable，它可以用const、let或var聲明；iterable表示可迭代的對(duì)象。JavaScript的條件語(yǔ)句（1）遍歷數(shù)組例：代碼如下。constcolor=["red","yellow","blue"];lettext="";for(letxofcolor){text+=x+"";}document.write(text);//輸出結(jié)果為redyellowblue例：代碼如下。letcolor="blue";lettext="";for(letxofcolor){text+=x+"";}d