更新時間: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 (初始化變量;條件表達(dá)式;操作表達(dá)式) { //循環(huán)體 }
在上述語法中,“初始化變量”用來初始化一一個用來作為計數(shù)器的變量,通常使用var關(guān)鍵字聲明一個變量,并給變量賦一個初始值。 “條件表達(dá)式”用來決定每一次循環(huán)是否繼續(xù)執(zhí)行,也就是循環(huán)的終止條件?!安僮鞅磉_(dá)式”是每次循環(huán)最后執(zhí)行的代碼,通常用于對計數(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,此時i的值為2。
⑤判斷“i <= 100”是否為true,和第②步相同。只要滿足“i <= 100”這個條件,就會一直循環(huán)。當(dāng)i的值加到101時,判斷結(jié)果為false,循環(huán)結(jié)束。
接下來我們通過流程圖來演示for 語句的執(zhí)行過程,如下圖1所示。
斷點調(diào)試
斷點調(diào)試是指在程序的某一行設(shè)置一個斷點,調(diào)試時,程序運(yùn)行到這一行就會停住,然后就可以控制代碼一步一步地執(zhí)行,在這個過程中可以看到每個變量當(dāng)前的值。斷點調(diào)試可 以幫助我們觀察程序的運(yùn)行過程。
在Chrome瀏覽器的開發(fā)者工具中可以進(jìn)行斷點調(diào)試。按F12鍵啟動開發(fā)者工具后,切換到“Sources"面板,如圖2所示。
從圖2可以看出,該面板有左、中、右3個欄目,左欄是目錄結(jié)構(gòu),中欄是網(wǎng)頁源代碼,右欄是JavaScript調(diào)試區(qū)。
在中欄顯示的網(wǎng)頁源代碼中,單擊某一行的行號,即可添加斷點,再次單擊,可以取消斷點。例如,為for語句添加斷點,如圖3所示。
斷點調(diào)試
在添加斷點后,刷新網(wǎng)頁,程序就會在斷點的位置暫停,此時按F11鍵讓程序單步執(zhí)行,在右欄的"Watch"中可以觀察變量的值的變化。
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ì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)體中,計數(shù)器i每次循環(huán)的值都會加1,如果將計數(shù)器i的值累加起來,就可以求和了。將求和結(jié)果除以整數(shù)的數(shù)量,即可獲得平均值。具體代碼如下。
var sum = 0; //利用sum對計數(shù)器i進(jìn)行累加 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ù)之和
利用“%”運(yùn)算符可以計算一個數(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語句中,而是寫在了外面,然后在條件表達(dá)式中對i的值進(jìn)行了改變,直到i的值減為0的時候判斷為false跳出循環(huán)。從輸出結(jié)果可以看出,字符串str記錄了for 語句中的每個表達(dá)式的執(zhí)行順序。 通過學(xué)習(xí)以上代碼可以幫助讀者加深對for語句的理解。
加QQ:2217622915獲取Javascript全套視頻教程+筆記+源碼。
猜你喜歡:
Javascript:void(0)和javascript:;是什么意思?
JavaScript中怎樣創(chuàng)建Date對象?