首頁(yè)技術(shù)文章正文

JavaScript for循環(huán)語(yǔ)句操作【JavaScript教程】

更新時(shí)間:2021-09-10 來(lái)源:傳智教育 瀏覽量:

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

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

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

使用for語(yǔ)句輸出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)體,通過(guò)“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é)束。

接下來(lái)我們通過(guò)流程圖來(lái)演示for 語(yǔ)句的執(zhí)行過(guò)程,如下圖1所示。

for語(yǔ)句循環(huán)
圖1

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

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

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

sources面板

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

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

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

在添加斷點(diǎn)后,刷新網(wǎng)頁(yè),程序就會(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('重要的事情說(shuō)10遍');
}

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

var num = prompt('請(qǐng)您輸人次數(shù)');
for(var i=1; i <=num; i++){
	console.log('重要的事情說(shuō)! + 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語(yǔ)句的循環(huán)體中,計(jì)數(shù)器i每次循環(huán)的值都會(huì)加1,如果將計(jì)數(shù)器i的值累加起來(lá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ù)和”有兩種常見(jiàn)的方式,第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)的增長(zhǎng)量,代碼如下。

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

var odd = 0;
for (var i= 1;i <= 100; i += 2){		// i從1開(kāi)始每次加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ī)律來(lái)生成字符串。例如,彈出-一個(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語(yǔ)句的執(zhí)行過(guò)程

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

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

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



猜你喜歡:

Javascript:void(0)和javascript:;是什么意思?

Javascript修改和增加數(shù)組元素方法

JavaScript中怎樣創(chuàng)建Date對(duì)象?

javascript創(chuàng)建對(duì)象的幾種方式介紹?

黑馬程序員web前端培訓(xùn)課程

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!