JavaScript 流程控制-循環(huán)

1. 循環(huán)

循環(huán)目的

在實(shí)際問題中，有許多具有規(guī)律性的重復(fù)操作，因此在程序中要完成這類操作就需要重復(fù)執(zhí)行某些語句

JS 中的循環(huán)

在Js 中，主要有三種類型的循環(huán)語句：

  • for 循環(huán)

  • while 循環(huán)

  • do...while 循環(huán)

1.2. for 循環(huán)

在程序中，一組被重復(fù)執(zhí)行的語句被稱之為循環(huán)體，能否繼續(xù)重復(fù)執(zhí)行，取決于循環(huán)的終止條件。由循環(huán)體及循環(huán)的終止條件組成的語句，被稱之為循環(huán)語句

1.2.1 語法結(jié)構(gòu)

for 循環(huán)主要用于把某些代碼循環(huán)若干次，通常跟計(jì)數(shù)有關(guān)系。其語法結(jié)構(gòu)如下：

for(初始化變量; 條件表達(dá)式; 操作表達(dá)式 ){
 //循環(huán)體
}

  • 初始化變量：通常被用于初始化一個計(jì)數(shù)器，該表達(dá)式可以使用 var 關(guān)鍵字聲明新的變量，這個變量幫我們來記錄次數(shù)。

  • 條件表達(dá)式：用于確定每一次循環(huán)是否能被執(zhí)行。如果結(jié)果是 true 就繼續(xù)循環(huán)，否則退出循環(huán)。

  • 操作表達(dá)式：每次循環(huán)的最后都要執(zhí)行的表達(dá)式。通常被用于更新或者遞增計(jì)數(shù)器變量。當(dāng)然，遞減變量也是可以的。

1.2.2 執(zhí)行過程

  1. 初始化變量，初始化操作在整個 for 循環(huán)只會執(zhí)行一次。

  2. 執(zhí)行條件表達(dá)式，如果為true，則執(zhí)行循環(huán)體語句，否則退出循環(huán)，循環(huán)結(jié)束。

  3. 執(zhí)行操作表達(dá)式，此時第一輪結(jié)束。

  4. 第二輪開始，直接去執(zhí)行條件表達(dá)式（不再初始化變量），如果為 true ，則去執(zhí)行循環(huán)體語句，否則退出循環(huán)。

  5. 繼續(xù)執(zhí)行操作表達(dá)式，第二輪結(jié)束。

  6. 后續(xù)跟第二輪一致，直至條件表達(dá)式為假，結(jié)束整個 for 循環(huán)。

1.2.3 for 循環(huán)重復(fù)相同的代碼

for循環(huán)可以重復(fù)相同的代碼 ，比如我們要輸出10句“媳婦我錯了”

// 基本寫法
for(var i = 1; i <= 10; i++){
 console.log('媳婦我錯了~');
}
// 用戶輸入次數(shù)
var num = prompt('請輸入次數(shù):')；
for ( var i = 1 ; i <= num; i++) {
 console.log('媳婦我錯了~');
}

1.2.4 for 循環(huán)重復(fù)不相同的代碼

for 循環(huán)還可以重復(fù)不同的代碼，這主要是因?yàn)槭褂昧擞?jì)數(shù)器 ，計(jì)數(shù)器在每次循環(huán)過程中都會有變化。

例如，求輸出一個人1到100歲：

// 基本寫法
for (var i = 1; i <= 100; i++) {
 console.log('這個人今年' + i + '歲了');
}

1.2.5 for 循環(huán)重復(fù)某些相同操作

for 循環(huán)因?yàn)橛辛擞?jì)數(shù)器的存在，我們還可以重復(fù)的執(zhí)行某些操作，比如做一些算術(shù)運(yùn)算。

1.2.6 案例(求1-100之間所有整數(shù)的累加和、求學(xué)生平均成績)

求1-100之間所有整數(shù)的累加和

案例分析

① 需要循環(huán)100次，我們需要一個計(jì)數(shù)器 i

② 我們需要一個存儲結(jié)果的變量 sum ，但是初始值一定是 0

③ 核心算法：1 + 2 + 3 + 4 .... ，sum = sum + i;

實(shí)現(xiàn)代碼

var sum = 0;
for(var i = 1;i <= 100; i++){
 sum += i;
}
console.log('1-100之間整數(shù)的和 = ' + sum);

要求用戶輸入班級人數(shù)，之后依次輸入每個學(xué)生的成績，最后打印出該班級總的成績以及平均成績。

案例分析

① 彈出輸入框輸入總的班級人數(shù) ( num )

② 依次輸入學(xué)生的成績（保存起來 score），此時我們需要用到 for 循環(huán)，彈出的次數(shù)跟班級總?cè)藬?shù)有關(guān)系 條件表達(dá)式 i <= num

③ 進(jìn)行業(yè)務(wù)處理: 計(jì)算成績。 先求總成績（sum），之后求平均成績（average）

④ 彈出結(jié)果

實(shí)現(xiàn)代碼

var num = prompt('請輸入班級總的人數(shù):'); // num 班級總的人數(shù)
var sum = 0; // 總成績
var average = 0; // 平均成績
for (var i = 1; i <= num; i++) {
 var score = prompt('請輸入第' + i + '個學(xué)生的成績');
 sum = sum + parseFloat(score); 
}
average = sum / num;
alert('班級總的成績是：' + sum);
alert('班級總的平均成績是：' + average);

1.3. 雙重 for 循環(huán)

1.3.1 雙重 for 循環(huán)概述

很多情況下，單層 for 循環(huán)并不能滿足我們的需求，比如我們要打印一個 5 行 5 列的圖形、打印一個倒直角三角形等，此時就可以通過循環(huán)嵌套來實(shí)現(xiàn)。

循環(huán)嵌套是指在一個循環(huán)語句中再定義一個循環(huán)語句的語法結(jié)構(gòu)，例如在for循環(huán)語句中，可以再嵌套一個for 循環(huán)，這樣的 for 循環(huán)語句我們稱之為雙重for循環(huán)。

1.3.2 雙重 for 循環(huán)語法

for (外循環(huán)的初始; 外循環(huán)的條件; 外循環(huán)的操作表達(dá)式) {
 for (內(nèi)循環(huán)的初始; 內(nèi)循環(huán)的條件; 內(nèi)循環(huán)的操作表達(dá)式) { 
 需執(zhí)行的代碼;
 }
}

  • 內(nèi)層循環(huán)可以看做外層循環(huán)的語句

  • 內(nèi)層循環(huán)執(zhí)行的順序也要遵循 for 循環(huán)的執(zhí)行順序

  • 外層循環(huán)執(zhí)行一次，內(nèi)層循環(huán)要執(zhí)行全部次數(shù)

1.3.3 案例(打印五行五列星星、打印 n 行 n 列的星星、打印倒三角形、打印九九乘法表)

打印五行五列星星

核心：

  1. 內(nèi)層循環(huán)負(fù)責(zé)一行打印五個星星

  2. 外層循環(huán)負(fù)責(zé)打印五行

var star = '';
for (var j = 1; j <= 3; j++) {
 for (var i = 1; i <= 3; i++) {
 star += '☆'
 }
 // 每次滿 5個星星 就 加一次換行
 star += '\n'
}
console.log(star);

打印 n 行 n 列的星星

var row = prompt('請輸入您打印幾行星星:');
var col = prompt('請輸入您打印幾列星星:');
var str = '';
for (var i = 1; i <= row; i++) {
 for (j = 1; j <= col; j++) {
 str += '☆';
 }
 str += '\n';
}
 console.log(str);

打印倒三角形

案例分析

① 一共有10行，但是每行的星星個數(shù)不一樣，因此需要用到雙重 for 循環(huán)

② 外層的 for 控制行數(shù) i ，循環(huán)10次可以打印10行

③ 內(nèi)層的 for 控制每行的星星個數(shù) j

④ 核心算法： 每一行星星的個數(shù) j = i ; j <= 10; j++

⑤ 每行打印完畢后，都需要重新?lián)Q一行

實(shí)現(xiàn)代碼

var row = prompt('請輸入您打印幾行星星:');
var col = prompt('請輸入您打印幾列星星:');
var str = '';
for (var i = 1; i <= row; i++) {
 for (j = 1; j <= col; j++) {
 str += '☆';
 }
 str += '\n';
}
 console.log(str);

打印九九乘法表

案例分析

① 一共有9行，但是每行的個數(shù)不一樣，因此需要用到雙重 for 循環(huán)

② 外層的 for 循環(huán)控制行數(shù) i ，循環(huán)9次 ，可以打印 9 行

③ 內(nèi)層的 for 循環(huán)控制每行公式 j

④ 核心算法：每一行 公式的個數(shù)正好和行數(shù)一致， j <= i;

⑤ 每行打印完畢，都需要重新?lián)Q一行

⑥ 把公式用 i 和 j 替換

實(shí)現(xiàn)代碼

var str = ''
for (var i = 1; i <= 9; i++) { // 外層for控制 行數(shù) 9行
 for (var j = 1; j <= i; j++) { // j 控制列數(shù) 列數(shù)和行數(shù)是一樣的 j <= i 
 str += j + " × " + i + " = " + i * j + '\t';
 }
 str += '\n';
}
console.log(str);

1.3.4 for 循環(huán)小結(jié)

  • for 循環(huán)可以重復(fù)執(zhí)行某些相同代碼

  • for 循環(huán)可以重復(fù)執(zhí)行些許不同的代碼，因?yàn)槲覀冇杏?jì)數(shù)器

  • for 循環(huán)可以重復(fù)執(zhí)行某些操作，比如算術(shù)運(yùn)算符加法操作

  • 隨著需求增加，雙重for循環(huán)可以做更多、更好看的效果

  • 雙重 for 循環(huán)，外層循環(huán)一次，內(nèi)層 for 循環(huán)全部執(zhí)行

  • for 循環(huán)是循環(huán)條件和數(shù)字直接相關(guān)的循環(huán)

  • 分析要比寫代碼更重要

  • 一些核心算法想不到，但是要學(xué)會，分析它執(zhí)行過程

  • 舉一反三，自己經(jīng)?？偨Y(jié)，做一些相似的案例

1.4. while 循環(huán)

while 語句可以在條件表達(dá)式為真的前提下，循環(huán)執(zhí)行指定的一段代碼，直到表達(dá)式不為真時結(jié)束循環(huán)。

while語句的語法結(jié)構(gòu)如下：

while (條件表達(dá)式) {
 // 循環(huán)體代碼
}

執(zhí)行思路：

① 先執(zhí)行條件表達(dá)式，如果結(jié)果為 true，則執(zhí)行循環(huán)體代碼；如果為 false，則退出循環(huán)，執(zhí)行后面代碼

② 執(zhí)行循環(huán)體代碼

③ 循環(huán)體代碼執(zhí)行完畢后，程序會繼續(xù)判斷執(zhí)行條件表達(dá)式，如條件仍為true，則會繼續(xù)執(zhí)行循環(huán)體，直到循環(huán)條件為 false 時，整個循環(huán)過程才會結(jié)束

注意：

① 使用 while 循環(huán)時一定要注意，它必須要有退出條件，否則會成為死循環(huán)

② while 循環(huán)和 for 循環(huán)的不同之處在于 while 循環(huán)可以做較為復(fù)雜的條件判斷，比如判斷用戶名和密碼

1.5. do while 循環(huán))

do... while 語句其實(shí)是 while 語句的一個變體。該循環(huán)會先執(zhí)行一次代碼塊，然后對條件表達(dá)式進(jìn)行判斷，如果條件為真，就會重復(fù)執(zhí)行循環(huán)體，否則退出循環(huán)。

do... while 語句的語法結(jié)構(gòu)如下：

do {
 // 循環(huán)體代碼 - 條件表達(dá)式為 true 時重復(fù)執(zhí)行循環(huán)體代碼
} while(條件表達(dá)式);

執(zhí)行思路：

① 先執(zhí)行一次循環(huán)體代碼

② 再執(zhí)行條件表達(dá)式，如果結(jié)果為 true，則繼續(xù)執(zhí)行循環(huán)體代碼，如果為 false，則退出循環(huán)，繼續(xù)執(zhí)行后面代碼

注意：先再執(zhí)行循環(huán)體，再判斷，我們會發(fā)現(xiàn) do…while 循環(huán)語句至少會執(zhí)行一次循環(huán)體代碼

1.5.1 案例

彈出一個提示框， 你愛我嗎？ 如果輸入我愛你，就提示結(jié)束，否則，一直詢問。

案例分析

① 彈出輸入框，要求用戶輸入。

② 判斷條件我們使用 do…while 循環(huán)。

③ do… while 循環(huán)語句中的條件表達(dá)式只要輸入的不是我愛你，就一直循環(huán)。

實(shí)現(xiàn)代碼

do {
 var love = prompt('你愛我嗎？');
} while (love != '我愛你')
alert('登錄成功');

1.5.2 循環(huán)小結(jié)

  • JS 中循環(huán)有 for 、while 、 do while

  • 三個循環(huán)很多情況下都可以相互替代使用

  • 如果是用來計(jì)次數(shù)，跟數(shù)字相關(guān)的，三者使用基本相同，但是我們更喜歡用 for

  • while 和 do…while 可以做更復(fù)雜的判斷條件，比 for 循環(huán)靈活一些

  • while 和 do…while 執(zhí)行順序不一樣，while 先判斷后執(zhí)行，do…while 先執(zhí)行一次，再判斷執(zhí)行

  • while 和 do…while 執(zhí)行次數(shù)不一樣，do…while 至少會執(zhí)行一次循環(huán)體， 而 while 可能一次也不執(zhí)行

  • 實(shí)際工作中，我們更常用for 循環(huán)語句，它寫法更簡潔直觀， 所以這個要重點(diǎn)學(xué)習(xí)

1.6. continue break

6.1 continue 關(guān)鍵字

continue 關(guān)鍵字用于立即跳出本次循環(huán)，繼續(xù)下一次循環(huán)（本次循環(huán)體中 continue 之后的代碼就會少執(zhí)行一次）。

例如，吃5個包子，第3個有蟲子，就扔掉第3個，繼續(xù)吃第4個第5個包子，其代碼實(shí)現(xiàn)如下：

 for (var i = 1; i <= 5; i++) {
 if (i == 3) {
    console.log('這個包子有蟲子，扔掉');
    continue; // 跳出本次循環(huán)，跳出的是第3次循環(huán)
 }
 console.log('我正在吃第' + i + '個包子呢');
 }

6.2 break 關(guān)鍵字

break 關(guān)鍵字用于立即跳出整個循環(huán)（循環(huán)結(jié)束）。

例如，吃5個包子，吃到第3個發(fā)現(xiàn)里面有半個蟲子，其余的不吃了，其代碼實(shí)現(xiàn)如下：

for (var i = 1; i <= 5; i++) {
 if (i == 3) {
    break; // 直接退出整個for 循環(huán)，跳到整個for下面的語句
 }
 console.log('我正在吃第' + i + '個包子呢');
 }
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容