當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

❤️JavaScript系列6部曲：流程控制（万字长文）❤️

發布時間：2024/7/23 javascript 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 ❤️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 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之間");?}

根據月份顯示對應的天數

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(" ")} //控制行數的---正方形的 for (var i = 0; i <= 5; i++) { //控制每一行有幾個星星 for (var j = 0; j <= 5; j++) { document.write("★"); } document.write(" "); }? // // 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(" ");}// 乘法口訣表 for(var i=1;i<=9;i++){ //控制每一行有多少個表達式 for(var j=1;j<=9;j++){ document.write(j+"*"+i+"="+i*j); } document.write(" "); }? for(var i=1;i<=9;i++){ //控制個數 for(var j=1;j<=i;j++){ document.write(j+"*"+i+"="+i*j) } document.write(" ") } 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的❤️JavaScript系列6部曲：流程控制（万字长文）❤️的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。