一、for 循環(huán)

在程序中，一組被重復(fù)執(zhí)行的語句被稱之為循環(huán)體，能否繼續(xù)重復(fù)執(zhí)行，取決于循環(huán)的終止條件。由循環(huán)體及循環(huán)的終止條件組成的語句，被稱之為循環(huán)語句。
for 循環(huán)主要用于把某些代碼循環(huán)若干次，通常跟計(jì)數(shù)有關(guān)系。

其語法結(jié)構(gòu)如下：

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

• 初始化變量：通常被用于初始化一個(gè)計(jì)數(shù)器，該表達(dá)式可以使用 var 關(guān)鍵字聲明新的變量，這個(gè)變量幫我們來記錄次數(shù)。
• 條件表達(dá)式：用于確定每一次循環(huán)是否能被執(zhí)行。如果結(jié)果是 true 就繼續(xù)循環(huán)，否則退出循環(huán)。
• 操作表達(dá)式：每次循環(huán)的最后都要執(zhí)行的表達(dá)式。通常被用于更新或者遞增計(jì)數(shù)器變量。當(dāng)然，遞減變量也是可以的。

例如用for循環(huán)執(zhí)行相同的代碼：輸出十次‘我愛學(xué)前端’。

for(i=0;i<10;i++){
    console.log('我愛學(xué)前端');
}

輸出結(jié)果為：

再例如用for循環(huán)執(zhí)行不同的代碼：求輸出一個(gè)人1到20歲。

for (var i = 1; i <= 20; i++) {
    console.log('這個(gè)人今年' + i + '歲了');
}

輸出結(jié)果為：

二、雙重 for 循環(huán)

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

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

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）內(nèi)層循環(huán)負(fù)責(zé)一行打印五個(gè)星星
• （2）外層循環(huán)負(fù)責(zé)打印五行

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

運(yùn)行結(jié)果為：

三、while 循環(huán)

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

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

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

執(zhí)行思路：

• （1）先執(zhí)行條件表達(dá)式，如果結(jié)果為 true，則執(zhí)行循環(huán)體代碼；如果為 false，則退出循環(huán)，執(zhí)行后面代碼
• （2）執(zhí)行循環(huán)體代碼
• （3）循環(huán)體代碼執(zhí)行完畢后，程序會(huì)繼續(xù)判斷執(zhí)行條件表達(dá)式，如條件仍為true，則會(huì)繼續(xù)執(zhí)行循環(huán)體，直到循環(huán)條件為 false 時(shí)，整個(gè)循環(huán)過程才會(huì)結(jié)束

需要注意的是：

使用 while 循環(huán)時(shí)一定要注意，它必須要有退出條件，否則會(huì)成為死循環(huán)
while 循環(huán)和 for 循環(huán)的不同之處在于 while 循環(huán)可以做較為復(fù)雜的條件判斷，比如判斷用戶名和密碼

例如通過while循環(huán)計(jì)算 1 ~ 100 之間所有整數(shù)的和。

var sum = 0;
var i = 0;
while(i<=100){
    sum += i;
    i++;
}
console.log(sum);

輸出的結(jié)果為：

四、do while 循環(huán)

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

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

do {
    // 循環(huán)體代碼 - 條件表達(dá)式為 true 時(shí)重復(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)體，再判斷，會(huì)發(fā)現(xiàn) do…while 循環(huán)語句至少會(huì)執(zhí)行一次循環(huán)體代碼

例如：通過do while循環(huán)計(jì)算 1 ~ 100 之間所有整數(shù)的和。

var sum = 0;
var i = 0;
do{
    sum += i;
    i++;
}while(i<=100)
console.log(sum);

五、循環(huán)小結(jié)

JS 中循環(huán)有 for 、while 、 do while
三個(gè)循環(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 至少會(huì)執(zhí)行一次循環(huán)體， 而 while 可能一次也不執(zhí)行

六、continue break

1、continue關(guān)鍵字

continue 關(guān)鍵字用于立即跳出本次循環(huán)，繼續(xù)下一次循環(huán)（本次循環(huán)體中 continue 之后的代碼就會(huì)少執(zhí)行一次）。
例如：吃5個(gè)包子，第3個(gè)有蟲子，就扔掉第3個(gè)，繼續(xù)吃第4個(gè)第5個(gè)包子，

其代碼實(shí)現(xiàn)如下：

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

2、break關(guān)鍵字

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

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

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 直接退出整個(gè)for 循環(huán)，跳到整個(gè)for下面的語句
   }
   console.log('我正在吃第' + i + '個(gè)包子');
 }

到此這篇關(guān)于JavaScript流程控(循環(huán))的文章就介紹到這了,更多相關(guān)JavaScript流程控內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論