??JavaScript系列6部曲：流程控制（萬字長文）??

🎈 作者：不吃西紅柿

🎈 簡介：CSDN博客專家🏆、藍橋簽約作者、Python領域優質創作者、「資訊技術智庫」公號作者?，技術交流、面試刷題盡管關注咨詢我，

熱門專欄推薦：

🥇 知識集錦專欄：大資料生態硬核學習資料 & 面試真題集錦
🥈 資料倉庫專欄：數倉發展史、建設方法論、實戰經驗、面試真題
🥉 Python專欄：Python相關黑科技：爬蟲、演算法、小工具

（優質好文持續更新中……）?

創作不易，點贊👍 關注💪 鼓勵「不吃西紅柿」吧~

CSDN私信回復「資料」驚喜等你！！

01 流程控制

流程控制即代碼的執行程序，有三種方式：

1.順序結構:從上到下,從左到右執行的順序,就叫做順序結構

2.分支結構:if陳述句,if-else陳述句,if-else if-else if…陳述句,switch-case陳述句,三元運算式陳述句

3.回圈結構:while回圈,do-while回圈,for回圈,后期還有一個for-in回圈

02 分支陳述句之if陳述句

語法：

 語法: if(運算式){     代碼塊   }

執行程序:先判斷運算式的結果是true還是false,如果是true則執行代碼塊,如果是false,大括號中的代碼是不執行的

例子:

1.如果18大于16,請輸出8,如果一個數字大于另一個數字則輸出大的數字

2.問:阿珊的年齡是否大于18歲,如果是成年的,則提示,可以打代碼了

if(18>16){        console.log(18);      }//例子1:    var num1=10;      var num2=100;      if(num1>num2){        console.log(num1);      }    console.log("我執行了");  //例子2var age = 19;  if (age >= 18) {    console.log("可以打代碼了");  } else {    console.log("打什么代碼，浪起來")  }

03 分支陳述句之if-else陳述句

理解：if-else 陳述句：兩個分支,只能執行一個分支

語法如下：

  if(運算式){      // 代碼1  }else{      // 代碼2  }

執行程序：如果運算式的結果是true則執行代碼1,如果運算式的結果是false,則執行代碼2

舉一些例子:

//定義變數,并初始化var age = 100; //判斷if (age >= 18) {   console.log("可以看電影了,嘎嘎...");} else {   console.log("看什么看,回家寫作業去"); } //提示用戶請輸入年齡----var age=prompt("請您輸入您的年齡");//彈框---并且有輸入,輸入的內容在age變數中 console.log(age);//最終的結果是字串的型別 //案例1:var age = parseInt(prompt("請您輸入年齡")); //判斷if (age >= 18) {   console.log("可以看電影了,嘎嘎..."); } else {   console.log("看什么看,回家寫作業去"); }//練習1:找到兩個數字中的最大值var num1=10; var num2=20; if(num1>num2){   console.log(num1); }else{   console.log(num2); }//練習2:判斷這個數字是奇數還是偶數var number=parseInt(prompt("請輸入一個數字")); if(number%2==0){   console.log("偶數"); }else{   console.log("奇數"); }

04 分支陳述句之三元運算式

語法:

var 變數=運算式1?運算式2:運算式3;

執行程序:運算式1的結果是true還是false,如果是true則執行運算式2,然后把結果給變數

如果運算式1的結果是false,則執行運算式3,把結果給變數

//兩個數字中的最大值var x = 10;var y = 20;var result1 = x > y ? x : y;console.log(result1);?//顯示成年還是未成年var age = 10;var result2 = age >= 18 ? "成年了" : "未成年";console.log(result2);

總結:大多數情況,使用if-else的陳述句都可以用三元運算式的方式來表示

05 分支陳述句之if-else if陳述句

if陳述句只有一個分支

if-else陳述句有兩個分支,最終執行一個分支

if-else if-else if-else if-else if…else—多分支,最終也是執行一個

if-else if陳述句…

語法:

if(運算式1){ 代碼1}elseif(運算式2){ 代碼2}elseif(運算式3){ 代碼3}else{ 代碼4   }

else if—這種結構可以寫多個,具體多少個看需求,

else–結構是可以不用寫的,具體也是看需求

執行程序:

先判斷運算式1的結果,

如果為true則執行代碼1

如果為false,則判斷運算式2

如果運算式2為true則執行代碼2

如果為false,則判斷運算式3

如果運算式3為true則執行代碼3

否則執行代碼4

例子: 成績的結果是在90到100(包含)之間則 顯示A級
如果成績是在80到90(包含)之間,則顯示B級
如果成績是在70到80(包含)之間,則顯示C級
如果成績是在60(包含)到70(包含)之間,則顯示D級
如果成績在0到60(不包含)之間,則顯示E級

var score=parseInt(prompt("請你輸入成績"));//有bug     if(!isNaN(score)&&!(score>100&&score<0)){//如果為true，說明不是數字       console.log("輸入不規范，請重新輸入")       if(score>90&&score<100){       console.log("a級")       }else if(score>80&&score<90){       console.log("b級")       }else if(score>70&&score<80){       console.log("c級")       }else if(score>=60&&score<70){       console.log("d級");       }else{       console.log("e級")       }    }    // 或者可以這么寫var score = Number(prompt("請您輸入成績"));//有bug if (!isNaN(score)) {//如果為true就說明 不是數字   if (score > 90 && score <= 100) {     console.log("A級");   } else if (score > 80) {     console.log("B級");   } else if (score > 70) {     console.log("C級");   } else if (score >= 60) {     console.log("D級");   } else {     console.log("E級");   }} else {   console.log("您輸入有誤"); }?

練習:判斷一個年份是不是閏年

定義變數存盤一個年份

var year=Number(prompt("請您輸入年份"))if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { console.log("閏年");}else{ console.log("平年");}

06 分支陳述句之switch-case陳述句

switch-case陳述句—分支陳述句—多分支陳述句

語法:

switch(運算式){ case 值1:代碼1;break; case 值2:代碼2;break; case 值3:代碼3;break; case 值4:代碼4;break; ...多個case default:代碼5;

注意問題:

default后面的break是可以省略的

default也可以省略

switch-case 陳述句中和case后面的值比較的時候使用的是嚴格的模式

break是可以省略

執行程序:

獲取運算式的值,和值1比較,如果一樣,則執行代碼1,遇到break則跳出整個的陳述句,

后面代碼不執行

如果運算式的值和值1不一樣,則和值2比較,如果相同則執行代碼2,

遇到break則跳出

否則和值3比較,相同則執行代碼3,遇到break,跳出,

否則和值4比較,相同則執行代碼4,遇到break則跳出,否則直接執行代碼5

例子:獲取一個人的成績的級別,如果是A級則顯示90到100直接的分數

如果是B級則顯示80到90分

如果是C級則顯示70到80之間分數

如果是D級則顯示60到70分之間

否則顯示0到59之間

var jiBie=prompt("請輸入級別");switch(jiBie){    case"a":console.log("90-100");break;    case"b":console.log("80-90");break;    case"c":console.log("70-80");break;    case"d":console.log("60-70");break;    default:console.log("0-59");//break;(可以省略)}??varjiBie = "E";switch(jiBie) { case "A":   console.log("90到100之間");   break; case "B":   console.log("80到90之間");   break; case "C":   console.log("70到80之間");   break; case "D":   console.log("60到70之間");   break; default :   console.log("0到59之間"); }

根據月份顯示對應的天數

var  mouth=parseInt(prompt("請輸入月份"));   switch(mouth){       case 1:       case 3:       case 5:       case 7:       case 8:       case 10:       case 12:console.log("31");break;?       case 2:console.log("28");break;?       case 4:       case 6:       case 9:       case 11:console.log("30");break;   }// 1,3,5,7,8,10,12 —31天// 2----28天// 4,6,9,11----30   var month=parseInt(prompt("請輸入月份"));   switch (month){     case 1:console.log("31天");break;     case 2:console.log("28天");break;     case 3:console.log("31天");break;     case 4:console.log("30天");break;     case 5:console.log("31天");break;     case 6:console.log("30天");break;     case 7:console.log("31天");break;     case 8:console.log("31天");break;     case 9:console.log("30天");break;     case 10:console.log("31天");break;     case 11:console.log("30天");break;     case 12:console.log("31天");break;?   }   // 練習:根據數字顯示對應的星期var num = parseInt(prompt("請輸入一個星期的數字"));switch (num) {    case 1: console.log("day1"); break;    case 2: console.log("day2"); break;    case 3: console.log("day3"); break;    case 4: console.log("day4"); break;    case 5: console.log("day5"); break;    case 6: console.log("day6"); break;    case 7: console.log("day7"); break;    default: console.log("輸入有誤");}?

07 總結分支陳述句

分支陳述句:

if陳述句:一個分支

if-else陳述句:兩個分支,最終只執行一個分支

if-else if-else if…陳述句: 多個分支,也是只會執行一個

switch-case陳述句:多分支陳述句,最終也會一個(必須要有break)

三元運算式:和if-else陳述句是一樣的

什么時候使用if-else if…: 一般是對范圍的判斷

什么時候使用switch-case陳述句:一般是對具體的值的判斷

如果有多個分支,是針對范圍的判斷一般選擇if-else if的陳述句

如果有多個分支,是針對具體的值判斷,一般選擇用switch-case陳述句

08 回圈陳述句之while回圈

回圈:一件事不停的或者是重復的做

回圈要有結束的條件,回圈還應該有計數器(記錄回圈的次數的

while回圈

while回圈語法:

計數器var 變數=0;while(回圈的條件){  回圈體;  計數器++;}

執行程序:

先判斷條件是否成立,(條件的結果是true還是false),如果是false,

那么回圈的代碼(while的大括號中的代碼都不執行),如果是true,

那么先執行回圈體,然后執行計數器,然后,直接去—>回圈的條件,

再次判斷是否成立,成立則繼續執行回圈體,否則跳出回圈,執行完回圈體之后,

計數器加1,然后再去回圈的條件,判斷,成立則回圈,否則跳出回圈

練習:

// 計算1-100之間所有數字的和var sum=0;var i=0;while(i<=100){//sum=sum+i;sum+=i;i++}console.log("和為："+sum)?var sum=0;while(i<10){ console.log("和為："+sum) sum+=i;}??var sum=0;//存盤最終的和var i=1;//計數器while(i<=100){ //sum=sum+i;//不停的計算數字的和 sum+=i; i++;}console.log("和為:"+sum); ?? var sum=0;//存盤最終的和 var i=0;//計數器 while(i<=5){   //sum=sum+i;//不停的計算數字的和   sum+=i;   i++; } console.log("和為:"+sum);? // 求6的階乘: var ji = 1;//存盤最終的階乘的結果 var i = 1;//開始的數字 while (i <= 6) {     ji *= i;     i++; } console.log(ji)  var ji = 1;//存盤最終的階乘的結果  var i = 1;//開始的數字  while (i <= 6) {    ji *= i;    i++;  }?  console.log(ji);?求1-100之間所有的偶數的和var i=1;//計數器var sum=0;//存盤所有數字的和//判斷這個數字是不是奇數,如果是奇數則相加,把結果存放在sum變數中while(i<=100){    if(i%2!=0){    sum+=i;    }    i++;//為了不變成死回圈}console.log(sum)?求1-100之間所有的奇數的和var i = 1;//計數器var sum = 0;//存盤和的while (i <= 100) {  if (i % 2 != 0) {    sum += i;  }  i++;}console.log(sum);// 請輸出1-100之間所有能夠被7整除的數字 var i = 0;     while (i <= 100) {         if (i % 7 == 0) {             console.log(i);         }         i++;     }?     var i=1;     while(i<=100){       //判斷這個數字是否能夠被7整除       if(i%7==0){         console.log(i);       }       i++;     }?//求帳號和密碼是否一致,登錄的效果實作//提示用戶輸入帳號//提示用戶輸入密碼//如果帳號或者密碼不對,則一直提示用戶輸入帳號和密碼//帳號–admin//密碼–123—字串型別var userName=prompt("請輸入帳號"); var userPwd=prompt("請輸入密碼"); while(userName!="admin"||userPwd!="123"){      userName=prompt("請輸入帳號");      userPwd=prompt("請輸入密碼"); } console.log("登錄成功")

09 回圈陳述句之do-while回圈

語法:

do{    回圈體}while(條件);

執行程序:

先執行一次回圈體,然后判斷條件是否成立,不成立,

則跳出回圈,成立則執行回圈體,然后再判斷條件是否成立,成立則繼續回圈,否則跳出…

輸出:阿珊要睡覺了…10次

var i=0; do{   console.log("阿珊要睡覺了")   i++; }while(i<10); //注意：分號一定要下? // 練習:求100以內所有3的倍數的和?  //方法1：    var i = 1;    var sum = 0;    while (i <= 100) {      if (i % 3 == 0) {        sum += i;      }      i++;    }    console.log(sum)?    //方法2    var i = 1;    var sum = 0;    do {      if (i % 3 == 0) {        sum += i;      }      i++;    } while (i <= 100);    console.log(sum)

10 總結while回圈和do-while回圈

while回圈特點:先判斷,后回圈,有可能一次回圈體都不執行

do-while回圈特點:先回圈,后判斷,至少執行一次回圈體

11 回圈陳述句之for回圈

  for(運算式1;運算式2;運算式3){    回圈體;  }

執行程序:

先執行一次運算式1,然后判斷運算式2;如果不成立則直接跳出回圈

如果運算式2成立,執行回圈體的代碼,結束后,跳到運算式3執行,然后跳到運算式2,判斷運算式2是否成立,不成立,則跳出回圈

如果運算式2成立,則執行回圈體,然后再跳到運算式3,再跳到運算式2,判斷是否成立,一直如此

for(var //例子:列印10次,哈哈,我又變帥了for (var i = 0; i < 10; i++) {  console.log("日照香爐生紫煙,一對情侶在林間.遠看身影如神仙,近看竟然是于千");}?//求1-100之間所有數字的和?var sum = 0;for (var i = 1; i <= 100; i++) {  sum += i;}console.log("和為:" + sum);??//    for (var i = 0; i < 10; i++) {//      console.log("小楊好帥");//    }for(var i=0;i<10;i++){  console.log("love")//求1-100之間所有偶數的和?var sum=0;for(var i=0;i<=100;i++){  if(i%2==0){    sum+=i;  }}console.log(sum)?// 求1-100之間所有奇數的和 var sum=0; for(var i=0;i<=10;i++){   if(i%2!=0){     sum+=i;   } } console.log(sum)// 求1-100之間所有能被3整除的數字的和var sum=0;for(var i=1;i<100;i++){  if(i%3==0){    sum+=i;  }}console.log(sum)// 求1-100之間所有能被7整除的數字的和var sum=0;for(var i=1;i<=100;i++){  if(i%7==0){    sum+=i;  }}console.log(sum)//畫星星?for(var i=0;i<=5;i++){  for(var j=0;j<=i;j++){    document.write("?")  }  document.write("<br/>")}    //控制行數的---正方形的    for (var i = 0; i <= 5; i++) {      //控制每一行有幾個星星      for (var j = 0; j <= 5; j++) {        document.write("★");      }      document.write("<br/>");    }?    //    //    for(var j=0;j<=2;j++){    //      document.write("★");    //    }三角形的—五角星----隨著行數的增加,每一行都會比上一行多一個五角星?for (var i = 0; i <= 5; i++) {  //控制每一行有幾個星星  for (var j = 0; j <= i; j++) {    document.write("★");  }  document.write("<br/>");}// 乘法口訣表 for(var i=1;i<=9;i++){   //控制每一行有多少個運算式   for(var j=1;j<=9;j++){     document.write(j+"*"+i+"="+i*j);   }   document.write("<br/>"); }? for(var i=1;i<=9;i++){   //控制個數   for(var j=1;j<=i;j++){     document.write(j+"*"+i+"="+i*j)   }   document.write("<br/>")
}