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

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

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

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

使用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，此時(shí)i的值為2。

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

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

斷點(diǎn)調(diào)試

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

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

圖2

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

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

圖3  斷點(diǎn)調(diào)試

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

for循環(huán)案例

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

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

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

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

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

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

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

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

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

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

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

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

計(jì)算“偶數(shù)和”和“奇數(shù)和”有兩種常見的方式，第1種是在循環(huán)中判斷當(dāng)前是偶數(shù)還是奇數(shù)，然后用even和odd兩個(gè)變量分別保存偶數(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);		//計(jì)算結(jié)果: 2550
console.log('1~100之間所有的奇數(shù)和是' + odd);		//計(jì)算結(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);	//計(jì)算結(jié)果: 2550
console.log('1 ~ 100之間所有的奇數(shù)和是↑+ odd);	//計(jì)算結(jié)果: 2500

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

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

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

6.自動(dòng)生成字符串

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

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

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

前面演示的for循環(huán)的代碼都是for語句的常規(guī)用法。實(shí)際上，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語句中，而是寫在了外面，然后在條件表達(dá)式中對(duì)i的值進(jìn)行了改變，直到i的值減為0的時(shí)候判斷為false跳出循環(huán)。從輸出結(jié)果可以看出，字符串str記錄了for 語句中的每個(gè)表達(dá)式的執(zhí)行順序。 通過學(xué)習(xí)以上代碼可以幫助讀者加深對(duì)for語句的理解。

加QQ：435946716獲取Javascript全套視頻教程+筆記+源碼。

猜你喜歡：

JavaScript動(dòng)畫和CSS3動(dòng)畫有什么區(qū)別？

JavaScript如何新增或修改數(shù)組元素？

JavaScript的組成部分包括哪些？

5款常用JavaScript開發(fā)工具推薦

JavaScript是什么意思?JavaScript和Java有什關(guān)系？

傳智教育HTML&JS+前端課程