在之前的文章中,我們帶大家學(xué)習(xí)了JS中的幾種循環(huán)控制結(jié)構(gòu)(while和do-while循環(huán)、for循環(huán)),下面聊聊跳出循環(huán)語(yǔ)句break和continue,希望對(duì)大家有所幫助!
通過前面對(duì)循環(huán)的學(xué)習(xí)我們知道,默認(rèn)情況下循環(huán)會(huì)在表達(dá)式結(jié)果為假時(shí)自動(dòng)退出循環(huán),否則循環(huán)會(huì)一直持續(xù)下去。某些情況下,我們不用等待循環(huán)自動(dòng)退出,可以主動(dòng)退出循環(huán),JavaScript 中提供了 break 和 continue 兩個(gè)語(yǔ)句來(lái)實(shí)現(xiàn)退出循環(huán)和退出(跳過)當(dāng)前循環(huán)。
1、continue語(yǔ)句
continue 語(yǔ)句用來(lái)跳過本次循環(huán),執(zhí)行下次循環(huán)。當(dāng)遇到 continue 語(yǔ)句時(shí),程序會(huì)立即重新檢測(cè)條件表達(dá)式,如果表達(dá)式結(jié)果為真則開始下次循環(huán),如果表達(dá)式結(jié)果為假則退出循環(huán)。
【示例1】使用 continue 語(yǔ)句跳出 for 循環(huán):
<script type="text/javascript"> for (var i = 1; i < 10; i++) { if(i % 2 != 0) { continue; } console.log(i); } </script>
分析:
-
for (var i = 0; i < 10; i++){}
語(yǔ)句可以循環(huán)得出1~10 之間的所有數(shù)字 -
if(i % 2 != 0)
語(yǔ)句用于判斷i的值能否整除2,不能整除則()
中值為true,則執(zhí)行continue;
語(yǔ)句。 -
在循環(huán)體中,使用
if(i % 2 == 0)
語(yǔ)句進(jìn)行判斷,如果i
的值能整除2就使用“console.log(i);
”輸出;如果i
的值不能整除2,則觸發(fā)continue;
語(yǔ)句,跳出本次循環(huán)(不進(jìn)行輸出),執(zhí)行下一次循環(huán)。
輸出結(jié)果:
2、break語(yǔ)句
break語(yǔ)句用于跳出當(dāng)前的語(yǔ)法結(jié)構(gòu),可以終止循環(huán)體的代碼并立即跳出當(dāng)前的循環(huán),執(zhí)行循環(huán)之后的代碼(如果有的話)。
break和continue的不同點(diǎn)是:continue語(yǔ)句只是結(jié)束本次循環(huán),而 break 語(yǔ)句會(huì)終止整個(gè)循環(huán)的執(zhí)行。
沿用上面的示例1中代碼,將continue;
換成break;
,會(huì)輸出什么?
<script type="text/javascript"> for (var i = 1; i < 10; i++) { if(i % 2 != 0) { break; } console.log(i); } </script>
答案是:什么也不輸出。為什么會(huì)這樣尼?我們來(lái)分析一下:
forx循環(huán)一開始,i=1
,1小于10嗎?當(dāng)然,然后開始執(zhí)行循環(huán)體中的if(i % 2 != 0)
語(yǔ)句;
那么1能整除2嗎?顯然是不能,因此()
中值為true,則執(zhí)行if中的“break;
”語(yǔ)句,直接跳出整個(gè)循環(huán)了,根本沒有機(jī)會(huì)執(zhí)行“console.log(i);
”語(yǔ)句。
值得注意的是,break
和continue
都只對(duì)當(dāng)前循環(huán)有效。如果我們有嵌套循環(huán),那么就要很小心了。不妨來(lái)看下面的例子:
for (let i = 0; i < 5; i++) { if (i % 2 == 0) continue; for (let j = 0; j < 5; j++) { if (j == 2) break; console.log(`i = ${i}, j = ${j}`); } }
這里我們有兩個(gè)循環(huán),每一個(gè)都會(huì)執(zhí)行 5 次(0~4)。外層的循環(huán)在 i 是偶數(shù)的時(shí)候,跳過當(dāng)前循環(huán)執(zhí)行下一個(gè)。也就是說只有 i 為 1 或則 3 的時(shí)候,才會(huì)執(zhí)行內(nèi)層的循環(huán)。
內(nèi)層的循環(huán)只要 j 的值為 2,就終止了。因此,j 只有 0 和 1。
最終結(jié)果如下:
4、JavaScript 標(biāo)簽
從 JavaScript 1.2 開始,可以將標(biāo)簽與 break 和 continue 結(jié)合使用,來(lái)更精確的控制程序的執(zhí)行。
JavaScript 中的標(biāo)簽與 HTML 中的標(biāo)簽不同,JavaScript 中的標(biāo)簽就是一個(gè)標(biāo)識(shí)符(類似變量名),后面跟隨一個(gè)冒號(hào):。JavaScript 標(biāo)簽可以聲明在任何語(yǔ)句或者代碼塊之前,并與 break 或 continue 配合來(lái)跳出特定的循環(huán),例如當(dāng)多個(gè)循環(huán)嵌套使用時(shí),單純使用 break 只能跳出當(dāng)前的循環(huán),無(wú)法跳出外層循環(huán),如果將 break 與標(biāo)簽配合使用,則可以一次跳出多層循環(huán)。
示例代碼如下:
<script type="text/javascript"> document.write("開始循環(huán)!<br /> "); outerloop: // 定義一個(gè)標(biāo)簽 for (var i = 0; i < 5; i++) { document.write("外層循環(huán): " + i + "<br />"); innerloop: // 定義一個(gè)標(biāo)簽 for (var j = 0; j < 5; j++) { if (j > 3 ) break ; // 跳出內(nèi)層循環(huán) if (i == 2) break innerloop; // 跳出內(nèi)層訊息 if (i == 4) break outerloop; // 跳出外層循環(huán) document.write("內(nèi)層循環(huán): " + j + " <br />"); } } document.write("循環(huán)結(jié)束!<br /> "); </script>
注意:break 或 continue 與標(biāo)簽之間不能出現(xiàn)換行。另外,標(biāo)簽名稱和相關(guān)循環(huán)之間不能出現(xiàn)其它代碼。
【推薦學(xué)習(xí):javascript高級(jí)教程】