JavaScript循環(huán)語句有哪些及怎么用

今天小編給大家分享一下JavaScript循環(huán)語句有哪些及怎么用的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

while、for循環(huán)

在編程中，經(jīng)常需要使用循環(huán)語句處理各種各樣重復(fù)的工作。
例如，使用JavaScript生成一個學(xué)生名稱列表，這就需要創(chuàng)建一個HTML的<ul>標簽，然后重復(fù)的往標簽中插入<li>子標簽，從而生成如下的HTML結(jié)構(gòu)：

<ul><li>小明</li><li>小紅</li><li>小軍</li><li>...</li></ul>

不過，DOM操作不是本文的主要內(nèi)容，后續(xù)章節(jié)會逐步介紹的。

循環(huán)語句共有三種類型：while、do while和for，讀完本文就能掌握所有的循環(huán)了。

while 循環(huán)

語法

while語法：

while(exp){
	//循環(huán)體}

while語句主要包括執(zhí)行條件exp，和循環(huán)體兩部分。

執(zhí)行條件通常是一個條件表達式，例如i > 0表示當(dāng)只有當(dāng)變量i大于0的時候，才會執(zhí)行循環(huán)體。

舉個栗子：

let i = 10;while(i>0){
	console.log(i);//在控制臺輸出
	i--;}

以上代碼創(chuàng)建了一個變量i，并賦值為10，當(dāng)i > 0成立時，執(zhí)行{}中的代碼。
代碼console.log(i);可以在控制臺輸出一個字符串，敲黑板，控制臺還知道是什么吧！
然后執(zhí)行i--，也就是變量i的值減去1。

總結(jié)上述代碼的作用就是，在瀏覽器的控制臺循環(huán)輸出變量i，從10輸出到1。

代碼執(zhí)行結(jié)果如下圖：

循環(huán)條件

通常情況下，循環(huán)的判斷條件都是一個條件表達式。條件表達式返回布爾值，當(dāng)返回值是true時就執(zhí)行循環(huán)體，當(dāng)返回值是false時，就結(jié)束循環(huán)語句的執(zhí)行。

實際上，判斷條件可以是任何類型的表達式，這里同樣會通過隱式轉(zhuǎn)換將表達式的計算結(jié)果轉(zhuǎn)為Boolean型。

例如 i > 0可以簡寫為while(i):

let i = 3;while (i) { // 當(dāng) i 變成 0 時，Boolean(i)為false
  console.log(i);
  i--;}

由于Boolean(0)是false所以以上代碼是成立的。

危險的死循環(huán)

循環(huán)條件（變量i）必須在每次執(zhí)行的過程中不斷的執(zhí)行減一操作，也就是i--，否則i的值永遠都大于0，循環(huán)也就永遠不會停止，也就是常說的死循環(huán)。

如果出現(xiàn)了死循環(huán)并非沒有解決的方法，我們可以通過殺死當(dāng)前進程結(jié)束代碼執(zhí)行。

最簡單的做法就是，關(guān)閉瀏覽器，然后去控制臺殺死瀏覽器進程。

死循環(huán)對程序來講非常危險，它會占滿cpu資源，甚至是整個內(nèi)存空間，造成死機。

所以，在編寫循環(huán)時，一定要注意不要忘記循環(huán)條件的更改。

只有一行語句的循環(huán)

當(dāng)循環(huán)體中只有一條語句時，就可以省略{}花括號，從而簡化代碼。

舉個簡答的小李子：

let i = 10;while(i>0)console.log(i--);

執(zhí)行效果和上面的代碼是一樣的。

do {…} while

語法

do{
	//循環(huán)體}while(exp);

和while循環(huán)不同的是，do {...} while循環(huán)將判斷條件和循環(huán)體交換了位置，在判斷循環(huán)條件之前，會首先執(zhí)行一次循環(huán)體。

let i = 0;do {
  console.log(i);
  i++;} while (i<10);

以上代碼會輸出0~9的數(shù)字，執(zhí)行結(jié)果如下：

do {…} while的特點

也就是說使用do {...} while語句，循環(huán)體至少為執(zhí)行一次：

let i = 0do {
	console.log(i)
	i--;}while(i>0);

以上代碼，雖然i從一開始就不滿足執(zhí)行條件，循環(huán)體依舊會執(zhí)行一次。

實際上，do {...} while語句在現(xiàn)實編程過程中使用的非常少！
因為很少有情況需要我們在判斷條件不成立的情況下，依舊要執(zhí)行一次循環(huán)體。
即使存在這種情況，我們也通常使用while代替。

for 循環(huán)

相較而言，for循環(huán)語句是最復(fù)雜的，但也是最受歡迎的。

語法

for(begin; exp; step){
	//循環(huán)體}

直接從語法角度解釋for可能令人疑惑，下面是一個最常見的案例：

for(let i = 0; i < 10 ; i++){
	console.log(i)}

對比解讀：

以上代碼的執(zhí)行順序是：

1. let i = 0;，進入循環(huán)語句時執(zhí)行，只執(zhí)行一次；

2. 判斷i < 10，如果成立繼續(xù)執(zhí)行，否則推出循環(huán)；

3. 執(zhí)行console.log(i)，控制臺輸出變量i的值；

4. 執(zhí)行i++，改變循環(huán)變量i的值；

5. 循環(huán)執(zhí)行2 3 4步，直至i < 10不成立。

實際上，以上代碼在功能上完全等價于：

let i = 0;while(i < 10){
	console.log(i);
	i++;}

for的條件變量

和while、do {...} while不同的是，for循環(huán)的條件變量i是定義在for語句內(nèi)部的，相當(dāng)于一個局部變量，或者說是內(nèi)聯(lián)變量，這樣的變量只能在for循環(huán)內(nèi)部能夠使用。

舉個例子：

for(let i = 0; i < 10; i++){
	console.log(i);}console.log(i); //報錯，i is not defined.

如下圖：

造成這種結(jié)果的原因是，i是for的局部變量，當(dāng)for語句執(zhí)行完畢后立即被銷毀，后面的程序是無法使用的。

提醒：如果你執(zhí)行以上代碼并沒有出現(xiàn)錯誤，很有可能是在for語句之前就定義了變量i。

當(dāng)然，我們也可以不使用局部變量：

let i = 0;for(i = 0; i < 10; i++){
	console.log(i);}console.log(i);// 10

這樣我們就可以在for語句外面使用條件變量了！

語句省略

for語句中的任何部分都是可以省略的。

例如，省略begin語句：

let i = 0;for (; i < 10; i++) { // 不再需要 "begin" 語句段
  alert( i );}

例如，省略step語句：

let i = 0;for (; i < 10;) {
  alert( i++ );//循環(huán)變量的修改在循環(huán)體中}

例如，省略循環(huán)體：

let i = 0;for (; i < 10;alert( i++ )) {
	//沒有循環(huán)體}

break

正常情況下，循環(huán)語句需要等待循環(huán)條件不滿足（返回false），才會停止循環(huán)。

但是我們可以通過break語句提前結(jié)束循環(huán)，強制退出。

舉個例子：

while(1){//死循環(huán)
	let num = prompt('輸入一個數(shù)字',0);
	if(num > 9){
		alert('數(shù)字太大了');
	}else if(num < 9){
		alert('數(shù)字太小了');
	}else{
		alert('真聰明，循環(huán)結(jié)束');
		break;//結(jié)束循環(huán)
	}}

以上代碼是一個猜數(shù)字的游戲，循環(huán)條件永遠是1，也就是說循環(huán)永遠不會結(jié)束，但是當(dāng)輸入數(shù)字9后，就會使用break強制結(jié)束循環(huán)。

這種無線循環(huán)加上break的形式在實際編程場景中非常常見，建議用小本本記下來。

continue

continue可以停止當(dāng)前正在執(zhí)行的單次循環(huán)，立即開始下一次循環(huán)。

舉個例子：

for(let i = 1;i < 100; i++){
	if(i % 7)continue;
	console.log(i);}

以上代碼輸出100以內(nèi)的所有7的倍數(shù)，當(dāng)i % 7不為0，也就是說i不是7的倍數(shù)的時候，執(zhí)行continue語句，直接跳過后面的語句，執(zhí)行下一次循環(huán)。

break/continue標簽

在多層循環(huán)嵌套的情況下，會有這樣一個問題，怎樣從多重循環(huán)中跳出整個循環(huán)體呢？

例如：

for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    let input = prompt(`Value at coords (${i},${j})`, '');
    // 如果我想從這里退出并直接執(zhí)行 alert('Done!')
  }}alert('Done!')

break標簽

如果我們需要在，用戶輸入0時，直接讓程序執(zhí)行alert('Done!')應(yīng)該怎么做呢？

這就需要使用標簽，語法如下：

label:for(...){
	...
	break label;}

break label語句可以直接無條件的跳出循環(huán)到標簽label處。

例如：

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    let input = prompt(`Value at coords (${i},${j})`, '');
    // 如果用戶輸入0，則中斷并跳出這兩個循環(huán)。
    if (input=='0') break outer; // (*)
  }}alert('Done!');

上述代碼中，break outer 向上尋找名為 outer 的標簽并跳出當(dāng)前循環(huán)。

因此，控制權(quán)直接從 (*) 轉(zhuǎn)至 alert('Done!')。

continue標簽

我們還可以使用continue label直接結(jié)束當(dāng)前循環(huán)，開始下次循環(huán)：

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    let input = prompt(`Value at coords (${i},${j})`, '');
    // 如果用戶輸入0，則中斷并跳出這兩個循環(huán)。
    if (input=='0') continue outer; // (*)
  }}alert('Done!');

continue outer可以直接結(jié)束多重循環(huán)的最外層循環(huán)，開始下一次循環(huán)。

例如當(dāng)我們在(0,0)處輸入0，那么程序會直接跳到(1,0)處，而不是像break一樣直接結(jié)束整個循環(huán)。

注意：
標簽并不是隨便跳轉(zhuǎn)的，必須符合一定的要求

例如:

break label;label: for(...){...}

就是不正確的。

課后作業(yè)

1. 利用console.log()方法，使用循環(huán)輸出以下圖形：

*
**
***
****
*****
******

2. 利用雙重循環(huán)，創(chuàng)建一個3X3的矩陣，并讓用戶可以輸入矩陣數(shù)據(jù)。

以上就是“JavaScript循環(huán)語句有哪些及怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。