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

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

更新時間:2021-09-10 來源:傳智教育 瀏覽量:

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

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

在上述語法中,“初始化變量”用來初始化一一個用來作為計數(shù)器的變量,通常使用var關(guān)鍵字聲明一個變量,并給變量賦一個初始值。 “條件表達式”用來決定每一次循環(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)。當(dāng)i的值加到101時,判斷結(jié)果為false,循環(huán)結(jié)束。

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

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

斷點調(diào)試

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

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

sources面板

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

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

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

在添加斷點后,刷新網(wǎng)頁,程序就會在斷點的位置暫停,此時按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('請您輸人次數(shù)');
for(var i=1; i <=num; i++){
	console.log('重要的事情說! + num +'遍');
}

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

在for循環(huán)中可以使用if進行判斷,根據(jù)i值的不同,進行不同的處理。例如,判斷當(dāng)前循環(huá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)體中,計數(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;	//相當(dāng)于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)中判斷當(dāng)前是偶數(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ù)字,程序自動生成對應(yīng)數(shù)量的星星字符串,代碼如下。

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

多學(xué)一招:記錄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í)行順序。 通過學(xué)習(xí)以上代碼可以幫助讀者加深對for語句的理解。

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



猜你喜歡:

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

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

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

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

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

分享到:
在線咨詢 我要報名
和我們在線交談!