首頁技術文章正文

JavaScript for循環(huán)語句詳細介紹【JavaScript教程】

更新時間:2021年09月10日17時25分來源:傳智教育瀏覽次數(shù):

在程序中，一組被重復執(zhí)行的語句稱為循環(huán)體，能否重復執(zhí)行，取決于循環(huán)的終止條件。由循環(huán)體及循環(huán)的終止條件組成的語句稱為循環(huán)語句。 for語句是最常用的循環(huán)語句，它適合循環(huán)次數(shù)已知的情況，其語法結(jié)構(gòu)如下。

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

在上述語法中，“初始化變量”用來初始化一一個用來作為計數(shù)器的變量，通常使用var關鍵字聲明一個變量，并給變量賦一個初始值。 “條件表達式”用來決定每一次循環(huán)是否繼續(xù)執(zhí)行，也就是循環(huán)的終止條件。“操作表達式”是每次循環(huán)最后執(zhí)行的代碼，通常用于對計數(shù)器變量進行更新(遞增或遞減)。

使用for語句輸出1~100范圍內(nèi)的數(shù)字，具體代碼如下。

<script>
    for(var i=1; i <= 100; i++) {
        console.log(i);
    }
</script>

上述代碼的執(zhí)行流程如下。

①執(zhí)行“var i= 1;”初始化變量。

②判斷“i <= 100”是否為true,如果為true，執(zhí)行循環(huán)體，反之，結(jié)束循環(huán)。

③執(zhí)行循環(huán)體，通過“console.log()" 輸出變量i的值。

④執(zhí)行“i++”，將i的值加1，此時i的值為2。

⑤判斷“i <= 100”是否為true，和第②步相同。只要滿足“i <= 100”這個條件，就會一直循環(huán)。當i的值加到101時，判斷結(jié)果為false，循環(huán)結(jié)束。

接下來我們通過流程圖來演示for 語句的執(zhí)行過程，如下圖1所示。

圖1

斷點調(diào)試

斷點調(diào)試是指在程序的某一行設置一個斷點，調(diào)試時，程序運行到這一行就會停住，然后就可以控制代碼一步一步地執(zhí)行，在這個過程中可以看到每個變量當前的值。斷點調(diào)試可以幫助我們觀察程序的運行過程。

在Chrome瀏覽器的開發(fā)者工具中可以進行斷點調(diào)試。按F12鍵啟動開發(fā)者工具后，切換到“Sources"面板，如圖2所示。

sources面板
圖2

從圖2可以看出，該面板有左、中、右3個欄目，左欄是目錄結(jié)構(gòu)，中欄是網(wǎng)頁源代碼，右欄是JavaScript調(diào)試區(qū)。

在中欄顯示的網(wǎng)頁源代碼中，單擊某一行的行號，即可添加斷點，再次單擊，可以取消斷點。例如，為for語句添加斷點，如圖3所示。

圖3 斷點調(diào)試

在添加斷點后，刷新網(wǎng)頁，程序就會在斷點的位置暫停，此時按F11鍵讓程序單步執(zhí)行，在右欄的"Watch"中可以觀察變量的值的變化。

for循環(huán)案例

1.重復執(zhí)行相同代碼

利用for循環(huán)可以重復執(zhí)行相同代碼。例如，重復執(zhí)行10次的代碼如下所示。

for (var i=1; i<=10; i++){
	console.log('重要的事情說10遍');
}

還可以利用prompt()讓用戶來輸人循環(huán)的次數(shù)，如下所示。

var num = prompt('請您輸人次數(shù)');
for(var i=1; i <=num; i++){
	console.log('重要的事情說! + num +'遍');
}

2.重復執(zhí)行不同代碼

在for循環(huán)中可以使用if進行判斷，根據(jù)i值的不同，進行不同的處理。例如，判斷當前循環(huán)進行到第幾次，如下所示。

for(var i=1;i <=100; i++){
	if(i == 1){
		console.log('當前是第1次');
	}elself(i == 100){
		console.log('當前是第100次');
	}
}

3. 1~100之間的所有整數(shù)“求和”和“求平均值”

在for語句的循環(huán)體中，計數(shù)器i每次循環(huán)的值都會加1,如果將計數(shù)器i的值累加起來，就可以求和了。將求和結(jié)果除以整數(shù)的數(shù)量，即可獲得平均值。具體代碼如下。

var sum = 0;	//利用sum對計數(shù)器i進行累加
for (var i=1; i<=100; i++){
	sum += i;	//相當于sum = sum + i;
}
console.log('求和：' + sum);					//計算結(jié)果：5050
console.log('求平均值：' + （sum/100）);		//計算結(jié)果：50.5

4. 1~100之間的所有整數(shù)“求偶數(shù)和”和“求奇數(shù)和”

計算“偶數(shù)和”和“奇數(shù)和”有兩種常見的方式，第1種是在循環(huán)中判斷當前是偶數(shù)還是奇數(shù)，然后用even和odd兩個變量分別保存偶數(shù)和奇數(shù)的累加結(jié)果。代碼如下。

var even = 0;
var odd = 0;
for (var i=1; i <= 100; i++){
	if(i % 2 == 0){		//判斷i是奇數(shù)還是偶數(shù)
		even += i;
	} else {
		odd += i;
	}
}
console.log('1~100之間所有的偶數(shù)和是' + even);		//計算結(jié)果: 2550
console.log('1~100之間所有的奇數(shù)和是' + odd);		//計算結(jié)果: 2500

第2種方式是修改i的初始值和每次循環(huán)的增長量，代碼如下。

var even = 0;
for (var i= 2; i<= 100;1+= 2) {			// i從2開始每次加2
	even += i;
}

var odd = 0;
for (var i= 1;i <= 100; i += 2){		// i從1開始每次加2
	odd += i;
}
console.log('1 ~ 100之間所有的偶數(shù)和是，+ even);	//計算結(jié)果: 2550
console.log('1 ~ 100之間所有的奇數(shù)和是↑+ odd);	//計算結(jié)果: 2500

5.求1 ~ 100之間的所有能被3整除的整數(shù)之和

利用“%”運算符可以計算一個數(shù)除以另一個數(shù)的余數(shù)，如果余數(shù)為0，則表示這個數(shù)可以被另一個數(shù)整除。代碼如下。

var result = 0;
for(var i = 1; i <= 100; i++){
	if(i % 3 == 0) {
		result += i;
	}
	console.log(result);		//計算結(jié)果: 1683

6.自動生成字符串

使用for循環(huán)可以很方便地按照某個規(guī)律來生成字符串。例如，彈出-一個輸人框，讓用戶輸入一個數(shù)字，程序自動生成對應數(shù)量的星星字符串，代碼如下。

var num = prompt('請輸人星星的個數(shù)');
var str = '';
for(var i = 1; i <= num; i++){
	str = str + '★';
}
console.log(str);

多學一招：記錄for語句的執(zhí)行過程

前面演示的for循環(huán)的代碼都是for語句的常規(guī)用法。實際上，for語句非常靈活，在熟知了它的執(zhí)行順序后，可以利用for語句完成其他想要的操作。例如，將for語句的執(zhí)行過程記錄下來，具體代碼如下。

var str = '';
var i=4;	//控制循環(huán)次數(shù)
for (str += '1'; i -- && (str += '2'); str += '4-1) {
	str += '3';
}
console.log(str);	//輸出結(jié)果: 1234-234-234-234-

在上述代碼中，用來控制循環(huán)次數(shù)的變量i并沒有按照常規(guī)的方式寫在for語句中，而是寫在了外面，然后在條件表達式中對i的值進行了改變，直到i的值減為0的時候判斷為false跳出循環(huán)。從輸出結(jié)果可以看出，字符串str記錄了for 語句中的每個表達式的執(zhí)行順序。通過學習以上代碼可以幫助讀者加深對for語句的理解。