當前位置 博文首頁 > 信息技術智庫:??JavaScript系列6部曲:流程控制(萬字長文)??

    信息技術智庫:??JavaScript系列6部曲:流程控制(萬字長文)??

    作者:[db:作者] 時間:2021-09-13 19:01

    🎈 作者:不吃西紅柿

    🎈 簡介: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/>")
    }
    cs
程序員cxuan的個人主頁:這篇 Java 基礎,我吹不動了 小小張自由―>張有博:軟件工程――編碼、測試、維護 小小張自由―>張有博:淺談面向對象方法學 小小張自由―>張有博:UML――概述(事物、關系、圖) 小小張自由―>張有博:UML――用例圖 小小張自由―>張有博:UML――活動圖和狀態圖 小小張自由―>張有博:UML――交互圖(順序圖與協作圖) 小小張自由―>張有博:UML――實現圖(構件圖與部署圖) 小小張自由―>張有博:C#編程基礎――C#與.NET的關系 小小張自由―>張有博:C#編程基礎――數據類型 小小張自由―>張有博:C#編程基礎――常量與變量 小小張自由―>張有博:C#編程基礎――運算符與表達式 小小張自由―>張有博:C#編程基礎――循環語句 小小張自由―>張有博:C#編程基礎――跳轉語句 小小張自由―>張有博:C#編程基礎――類 小小張自由―>張有博:C#編程基礎――方法 小小張自由―>張有博:初始三層架構(超超超詳細) 小小張自由―>張有博:C#連接數據庫之Connection、Command、D 小小張自由―>張有博:System.ArgumentOutOfRangeException: 小小張自由―>張有博:機房重構之單例模式的應用 小小張自由―>張有博:機房重構之備忘錄模式的應用 小小張自由―>張有博:機房重構之職責鏈模式的應用 小小張自由―>張有博:HTML基礎――標簽 小小張自由―>張有博:div+css的入門知識 小小張自由―>張有博:CSS核心內容:標準流、盒子模型、浮動 小小張自由―>張有博:asp.net生成驗證碼并提交驗證 小小張自由―>張有博:XML基礎 小小張自由―>張有博:各種計算機語言簡短簡介 小小張自由―>張有博:2020年10月自考總結 小小張自由―>張有博:vs2019利用gitee(碼云)協作開發 小小張自由―>張有博:1024程序員節 小小張自由―>張有博:IDEA2020.3詳細安裝教程 小小張自由―>張有博:JavaWeb之Request與Response詳解 小小張自由―>張有博:JavaWeb之Filter和Listener 小小張自由―>張有博:Vue插件報錯:Vue.js is detected on t 小小張自由―>張有博:在項目中使用Spring Cloud Alibaba Sen 小小張自由―>張有博:在項目中使用OpenFeign 小小張自由―>張有博:解決idea打開Vue項目報紅 小小張自由―>張有博:CentOS7詳細安裝教程--圖文介紹超詳細 zhtbs的博客:Springboot 入門培訓 5 Thymeleaf 與 MVC項目搭建 zhtbs的博客:(Framework7 移動webapp) Springboot 入門培訓 7 zhtbs的博客:HTML+CSS+JavaScript 迷宮生成算法 【建議收藏】 zhtbs的博客:(Framework7 移動webapp) Springboot 入門培訓 8 C zhtbs的博客:Springboot 入門培訓 9 Security(一) 登錄驗證 zhtbs的博客:Springboot 入門培訓 4 WEB+JSP MVC項目搭建 zhtbs的博客:Springboot 入門培訓 10 Security(二) 數據庫DB 貓耳山在天邊:《Linux命令行與shell腳本編程大全》(第三版)讀 英雄哪里出來:??13萬字《C語言動漫對話教程(入門篇)》??(建議收 qq1113673178的博客:[學習][筆記] qt5 從入門到入墳:<12>Grap qq1113673178的博客:[學習][筆記] qt5 從入門到入墳:<13>基于 .net平臺的rabbitmq使用封裝demo詳解 C++類的特種函數生成機制詳解 Python調用百度AI實現圖片上表格識別功能 node自定義安裝更改npm全局模塊默認安裝路徑的步驟 帶你用C語言實現strtok和字符串分割函數 靜態網頁和靜態網頁性能比較 網頁標題優化原則和描述優化原則 php 怎么設置cookie記住密碼 php設置時區無效怎么辦 php __autoload 失效怎么辦 有關PHP調試的小技巧,看看吧! 從0開始:教你微信小店怎么開! 成本5元竟然賣50元 微信朋友圈賣面膜真黑啊 HashMap原理及put方法與get方法的調用過程 基于IDEA 的遠程調試 Weblogic的操作過程 UTC時間、GMT時間、本地時間、Unix時間戳的具體使用 如何利用SwiftUI實現可縮放的圖片預覽器 網站怎么利用內容更新雙重境界快速提高網站權重? php顯示繁體亂碼怎么辦 php不能開啟php_curl怎么辦
A级免费视频