整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
avaScript的流程控制語句主要是包括了判斷、選擇和循環。
其中判斷主要是if,選擇是switch，循環是for和while來實現的。
判斷語句
if 語句的語法：
if (condition) statement1 else statement2如果條件計算結果為 true，則執行 statement1；如果條件計算結果為 false，則執行 statement2。
注意：
判斷的條件會發生自動類型轉換：
number：如果非0為true，0為false
string：如果非null或非空為true，否則為false
undefined：false
NaN: false
對象類型：非null為true，否則為false。
1.1.2. 選擇
switch 語句的語法：
switch (expression)
case value: statement;
break ;
case value: statement1;
break ; //結束1
case value: statement2;
break ; //結束2
case value: statement3;
break;//結束
...
case value: statement4;
break;
default: statement5;每個情況（case）都是表示“如果 expression 等于 value，就執行 statement”。
關鍵字 break 會使代碼跳出 switch 語句。如果沒有關鍵字 break，代碼執行就會繼續進入下一個 case。
關鍵字 default 說明了表達式的結果不等于任何一種情況時的操作（事實上，它相對于 else 從句）。
ECMAScript 和 Java 中的 switch 語句
ECMAScript 和 Java 中的 switch 語句有兩點不同。在 ECMAScript 中，switch 語句可以用于字符串，而且能用不是常量的值說明情況：
1、基本數據類型都可以傳遞給switch case語句。
2、case語句可以是表達式
function test6() {
var color="xx";
var value1="red", value2="green";
switch(color) {
case value1:
alert("紅色");
break ;
case value2:
alert("綠色");
break ;
default:
alert("執行默認default");
}
}這里，switch 語句用于字符串 sColor，聲明 case 使用的是變量 BLUE、RED 和 GREEN，這在 ECMAScript 中是完全有效的。
練習：
switch中傳遞boolean類型值？
var num=20;
switch(true) {
case num >=0 && num <=10:
alert("大于0小于等于10");
break;
case num>10&&num<=20:
alert("大于10小于等于20");
break;
}while 語句
while 語句是先測試循環。這意味著退出條件是在執行循環內部的代碼之前計算的。因此，循環主體可能根本不被執行。
它的語法如下：
while (expression) statement例子：
var i=0;
while (i < 10) {
i +=2;
}do-while 語句
do-while 語句是后測試循環，即退出條件在執行循環內部的代碼之后計算。這意味著在計算表達式之前，至少會執行循環主體一次。
do-while 的語法如下：
do {statement} while (expression);do while例子：
var i=0 ;
do {i +=2;} while (i < 10);for 語句
for 語句是前測試循環，而且在進入循環之前，能夠初始化變量，并定義循環后要執行的代碼。
for它的語法如下：
for (initialization; expression; post-loop-expression) statement注意：post-loop-expression 之后不能寫分號，否則無法運行。
for 例子：
iCount=6;
for (var i=0; i < iCount; i++) {
alert(i);
}這段代碼定義了初始值為 0 的變量 i。只有當條件表達式（i < iCount）的值為 true 時，才進入 for 循環，這樣循環主體可能不被執行。如果執行了循環主體，那么將執行循環后表達式，并迭代變量 i。
for循環中不會有局部變量，都是全局的變量。
for 語句是嚴格的迭代語句，用于枚舉對象的屬性或者遍歷一個數組的元素。
for in它的語法如下：
for (property in expression) statement例子1.1.4：
for (sProp in window) {
alert(sProp);
}這里，for-in 語句用于顯示 window 對象的所有屬性。
wth語句的作用： 有了 With 語句，在存取對象屬性和方法時就不用重復指定參考對象。
with格式 ：
with(obj){
操作obj的屬性語句;
}例子如下：
<script type="text/javascript">
<!—
with(document){
write("您好 !");
write("<br>這個文檔的標題是 : \"" + title + "\".");
write("<br>這個文檔的 URL 是: " + URL);
write("<br>現在您不用每次都寫出 document 對象的前綴了 !");
}
// -->
</script>1，顯示“*”為正方形，5行5列。
2，顯示“*”為直角三角型，5行，第1行有1個“*”，第2行有2個“*”……
3，顯示乘法口訣。
1*1=1
1*2=2 2*2=4
....
1*9=9 2*9=18 ...
用{}包圍起來的代碼，就是代碼塊。
JS中的代碼塊，只具有分組的作用，沒有其他的用途。
代碼塊中的內容，在外部是完全可見的。舉例：
{ var a=2; alert("qianguyihao"); console.log("永不止步");}console.log("a=" + a);打印結果：（可以看出，雖然變量 a 是定義在代碼塊中的，但是在外部依然可以訪問）
永不止步a=2在一個程序執行的過程中，各條語句的執行順序對程序的結果是有直接影響的。所以，我們必須清楚每條語句的執行流程。而且，很多時候我們要通過控制語句的執行順序來實現我們要完成的功能。
按照代碼的先后順序，依次執行。結構圖如下：
if語句有以下三種。
條件成立才執行。如果條件不成立，那就什么都不做。
格式：
if (條件表達式) { // 條件為真時，做的事情}格式1：
if (條件表達式) { // 條件為真時，做的事情} else { // 條件為假時，做的事情}格式2：（多分支的if語句）
if (條件表達式1) { // 條件1為真時，做的事情} else if (條件表達式2) { // 條件1不滿足，條件2滿足時，做的事情} else if (條件表達式3) { // 條件1、2不滿足，條件3滿足時，做的事情} else { // 條件1、2、3都不滿足時，做的事情}以上所有的語句體中，只執行其中一個。
根據BMI（身體質量指數）顯示一個人的體型。BMI指數，就是體重、身高的一個計算公式。公式是：BMI=體重÷身高的平方比如，老師的體重是81.6公斤，身高是1.71米。那么老師的BMI就是 81.6 ÷ 1.712 等于 27.906022365856163過輕：低于18.5正常：18.5-24.99999999過重：25-27.9999999肥胖：28-32非常肥胖, 高于32用JavaScript開發一個程序，讓用戶先輸入自己的體重，然后輸入自己的身高（彈出兩次prompt框）。計算它的BMI，根據上表，彈出用戶的身體情況。比如“過輕” 、 “正常” 、“過重” 、 “肥胖” 、“非常肥胖”。答案：
寫法1：
//第一步，輸入身高和體重var height=parseFloat(prompt("請輸入身高，單位是米"));var weight=parseFloat(prompt("請輸入體重，單位是公斤"));//第二步，計算BMI指數var BMI=weight / Math.pow(height, 2);//第三步，if語句來判斷。注意跳樓現象if (BMI < 18.5) { alert("偏瘦");} else if (BMI < 25) { alert("正常");} else if (BMI < 28) { alert("過重");} else if (BMI <=32) { alert("肥胖");} else { alert("非常肥胖");}寫法2：
//第一步，輸入身高和體重var height=parseFloat(prompt("請輸入身高，單位是米"));var weight=parseFloat(prompt("請輸入體重，單位是公斤"));//第二步，計算BMI指數var BMI=weight / Math.pow(height, 2);//第三步，if語句來判斷。注意跳樓現象if (BMI > 32) { alert("非常肥胖");} else if (BMI >=28) { alert("肥胖");} else if (BMI >=25) { alert("過重");} else if (BMI >=18.5) { alert("正常")} else { alert("偏瘦");}我們通過下面這個例子來引出if語句的嵌套。
一個加油站為了鼓勵車主多加油，所以加的多有優惠。92號汽油，每升6元；如果大于等于20升，那么每升5.9；97號汽油，每升7元；如果大于等于30升，那么每升6.95編寫JS程序，用戶輸入自己的汽油編號，然后輸入自己加多少升，彈出價格。代碼實現如下：
//第一步，輸入var bianhao=parseInt(prompt("您想加什么油？填寫92或者97"));var sheng=parseFloat(prompt("您想加多少升？"));//第二步，判斷if (bianhao==92) { //編號是92的時候做的事情 if (sheng >=20) { var price=sheng * 5.9; } else { var price=sheng * 6; }} else if (bianhao==97) { //編號是97的時候做的事情 if (sheng >=30) { var price=sheng * 6.95; } else { var price=sheng * 7; }} else { alert("不好意思，沒有這個編號的汽油！");}alert("價格是" + price);switch語句也叫條件分支語句。
格式：
switch(表達式) { case 值1： 語句體1; break; case 值2： 語句體2; break; ... ... default： 語句體 n+1; break;}注意：
流程圖如下：
執行流程如下：
（1）首先，計算出表達式的值，和case依次比較，一旦有對應的值，就會執行相應的語句，在執行的過程中，遇到break就會結束。
（2）然后，如果所有的case都和表達式的值不匹配，就會執行default語句體部分。
我們來看下面的兩個例子就明白了。
switch 語句中的break可以省略，但一般不建議（對于新手而言）。否則結果可能不是你想要的，會出現一個現象：case穿透。
舉例1：（case穿透的情況）
var num=4; //switch判斷語句 switch (num) { case 1: console.log("星期一"); break; case 2: console.log("星期二"); break; case 3: console.log("星期三"); break; case 4: console.log("星期四"); //break; case 5: console.log("星期五"); //break; case 6: console.log("星期六"); break; case 7: console.log("星期日"); break; default: console.log("你輸入的數據有誤"); break; }上方代碼的運行結果，可能會令你感到意外：
星期四星期五星期六上方代碼的解釋：因為在case 4和case 5中都沒有break，那語句走到case 6的break才會停止。
舉例2：
//switch判斷語句 var number=5; switch (number) { default: console.log("我是defaul語句"); // break; case (2): console.log("第二個呵呵:" + number); //break; case (3): console.log("第三個呵呵:" + number); break; case (4): console.log("第四個呵呵:" + number); break; }上方代碼的運行結果，你也許會意外：
我是defaul語句第二個呵呵:5第三個呵呵:5上方代碼的解釋：代碼走到 default 時，因為沒有遇到 break，所以會繼續往下走，直到遇見 break 或者走到程序的末尾。 從這個例子可以看出：switch 語句的結束與 default 的順序無關。
我們實戰開發中，經常需要根據接口的返回碼 retCode ，來讓前端做不同的展示。
這種場景是業務開發中經常出現的，請一定要掌握。然而，很多人估計會這么寫：
寫法1：（不推薦。這種寫法太挫了）
let retCode=1003; // 返回碼 retCode 的值可能有很多種情況if (retCode==0) { alert('接口聯調成功');} else if (retCode==101) { alert('活動不存在');} else if (retCode==103) { alert('活動未開始');} else if (retCode==104) { alert('活動已結束');} else if (retCode==1001) { alert('參數錯誤');} else if (retCode==1002) { alert('接口頻率限制');} else if (retCode==1003) { alert('未登錄');} else if (retCode==1004) { alert('（風控用戶）提示 活動太火爆啦~軍萬馬都在擠，請稍后再試');} else { // 其他異常返回碼 alert('系統君失聯了，請稍候再試');}如果你是按照上面的 if else的方式來寫各種條件判斷，說明你的代碼水平太初級了，會被人噴的，千萬不要這么寫。那要怎么改進呢？繼續往下看。
寫法2：（推薦。通過 return 的方式，將上面的寫法進行改進）
let retCode=1003; // 返回碼 retCode 的值可能有很多種情況handleRetCode(retCode);// 方法：根據接口不同的返回碼，處理前端不同的顯示狀態function handleRetCode(retCode) { if (retCode==0) { alert('接口聯調成功'); return; } if (retCode==101) { alert('活動不存在'); return; } if (retCode==103) { alert('活動未開始'); return; } if (retCode==104) { alert('活動已結束'); return; } if (retCode==1001) { alert('參數錯誤'); return; } if (retCode==1002) { alert('接口頻率限制'); return; } if (retCode==1003) { alert('未登錄'); return; } if (retCode==1004) { alert('（風控用戶）提示 活動太火爆啦~軍萬馬都在擠，請稍后再試'); return; } // 其他異常返回碼 alert('系統君失聯了，請稍候再試'); return;}上面的寫法2，是比較推薦的寫法：直接通過 return 的方式，讓 function 里的代碼不再繼續往下走，這就達到目的了。對了，因為要用到 return ，所以需要單獨封裝到一個 function 里面。
如果你以后看到有前端小白采用的是寫法1，請一定要把寫法2傳授給他：不需要那么多的 if else，直接用 return 返回就行了。
寫法3：（推薦。將 if else 改為 switch）
let retCode=1003; // 返回碼 retCode 的值可能有很多種情況switch (retCode) { case 0: alert('接口聯調成功'); break; case 101: alert('活動不存在'); break; case 103: alert('活動未開始'); break; case 104: alert('活動已結束'); break; case 1001: alert('參數錯誤'); break; case 1002: alert('接口頻率限制'); break; case 1003: alert('未登錄'); break; case 1004: alert('（風控用戶）提示 活動太火爆啦~軍萬馬都在擠，請稍后再試'); break; // 其他異常返回碼 default: alert('系統君失聯了，請稍候再試'); break;}在實戰開發中，方式3是非常推薦的寫法，甚至比方式2還要好。我們盡量不要寫太多的 if 語句，避免代碼嵌套過深。
我們先來看看下面這段代碼：（不推薦）
let day=2;switch (day) { case 1: console.log('work'); break; case 2: console.log('work'); break; case 3: console.log('work'); break; case 4: console.log('work'); break; case 5: console.log('work'); break; case 6: console.log('relax'); break; case 7: console.log('relax'); break; default: break;}上面的代碼，咋一看，好像沒啥毛病。但你有沒有發現，重復代碼太多了？
實戰開發中，凡是有重復的地方，我們都必須要想辦法簡化。寫代碼就是在不斷重構的過程。
上面的代碼，可以改進如下：（推薦，非常優雅）
let day=2;switch (day) { case 1: case 2: case 3: case 4: case 5: console.log('work'); break; // 在這里放一個 break case 6: case 7: console.log('relax'); break; // 在這里放一個 break default: break;}}你沒看錯，就是上面的這種寫法，能達到同樣的效果，非常優雅。
小白可能認為這樣的寫法可讀性不強，所以說他是小白。我可以明確告訴你，改進后的這種寫法，才是最優雅的、最簡潔、可讀性最好的。
日常開發中，為了方便數據的輸入和輸出，JavaScript提供了一些常用的輸入輸出語句，具體如表1-3所示。
表1常用的輸入輸出語句
類型 | 語句 | 說明 |
輸入 | prompt() | 用于在瀏覽器中彈出輸入框，用戶可以輸入內容 |
輸出 | alert() | 用于在瀏覽器中彈出警告框 |
document.write() | 用于在網頁中輸出內容 | |
console.log() | 用于在控制臺中輸出信息 |
接下來將分別演示document.write0、console.log0和promptO的使用。
1. document.write()
document.write0的輸出內容中如果含有HTML標簽，會被瀏覽器解析。下面利用documenL.write0在頁面中輸出“我是document.write0語句!”，示例代碼如下。
document.write('我是document.write()語句！');2. console.log()
利用console.log0語句在控制臺輸出“我是console.log0語句!”，示例代碼如下。
console.log('我是console.log()語句!');console:.log0的輸出結果需要在瀏覽器的控制臺中查看。在Chrome 瀏覽器中按“F12”鍵(或在網頁空白區域右擊，在彈出的菜單中選擇“檢查”)啟動開發者工具，然后切換到“Console”(控制臺)面板，即可看到console.log0的輸出結果。
3.prompt()
利用prompt0語句實現在頁面中彈出一個帶有提示信息的輸入框，示例代碼如下。
prompt(請輸入姓名：');上述示例代碼運行后，將在頁面中彈出一個輸人框并提示用戶“請輸人姓名：”提示框。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
