javascript每日必學(xué)之循環(huán)
朋友們大家好,今天,我們繼續(xù)接著前面的內(nèi)容講,前們我們已經(jīng)講了條件分支,今天我們就講循環(huán),顧名思義就是,重復(fù)執(zhí)行相同的操作,正常循環(huán)是受程序控制的,不正常的情況,就會(huì)出現(xiàn)死循環(huán),那就是我們的代碼中出現(xiàn)bug,那樣,我們還要學(xué)會(huì)調(diào)式bug,等我們先把基礎(chǔ)知識(shí)講完了之后,我還會(huì)專(zhuān)門(mén)用篇幅來(lái)講解瀏覽器里面的調(diào)試,那種程序就會(huì)在我們掌控之中,這才是我們想要結(jié)果。
循環(huán)包括的結(jié)構(gòu)體有 for , while , do--while,for循環(huán)有兩種形式的存在,一種是數(shù)字變量變化所引起的循環(huán),另一種就是for...in形式,是屬性或者下標(biāo)所引起的循環(huán)變化,但for...in不是關(guān)鍵,關(guān)鍵還是for,例如在C#語(yǔ)言中,它的名稱(chēng)叫做foreach,好了,只是一個(gè)稱(chēng)謂而已,沒(méi)有別的不同,我講到的時(shí)候,再仔細(xì)說(shuō)。
從for開(kāi)始
for(var i = 0;i<10;i++){ console.log(i); }
(這里用到了一個(gè)新的運(yùn)算符,也是前面我所講漏了的,但是,大家一看就明白,小于運(yùn)算符,運(yùn)算返回結(jié)果是布爾值(true,false))
這里成功地打印出了1到9,看到上面的4個(gè)執(zhí)行步驟,第一步(聲明變量),只執(zhí)行一次;接著第二步判斷條件是否成立(跟if后面的條件接收一樣的類(lèi)型),如果成立,緊跟著就執(zhí)行循環(huán)體里面的內(nèi)容,這里視為第三步,第三步執(zhí)行完了之后,就是執(zhí)行第四步讓變量變化;然后,又執(zhí)行第二步,判斷是否成立。至此已經(jīng)接上頭了,然后循環(huán)就是這樣交替的。
注:解釋一下第四步 i++ 我們可以這樣理解 i = i + 1;一下子就明白了,前面聲明了i = 0;那么i = i + 1 就是讓 i 重新賦值,就是使其變化,i = 0 + 1;這樣 i 就變成了1,當(dāng)執(zhí)行完了一圈的時(shí)候打印出的是0,i 就變成了1,第二圈執(zhí)行完的時(shí)候,打印是1, i 就變成了2,……,第10圈執(zhí)行完時(shí),打印的是9,i 就變了10,當(dāng)再次去第二步執(zhí)行判斷時(shí),i < 10 就是 10 < 10,返回的是false,所以不成立,這樣后面就不再繼續(xù)。
上面我們已經(jīng)講到的控制,是完全按我們的意圖執(zhí)行了10次,如果是同樣的條件 ,我們中途時(shí)可不可以跳出循環(huán)呢?答案是肯定可以的,這就要使用我們已經(jīng)了解過(guò)的一個(gè)關(guān)鍵字了 break 下在我們來(lái)看看示例代碼
for(var i = 0;i<10;i++){ console.log(i); //當(dāng)i等于5的時(shí)候,我們就跳出循環(huán) if(i == 5){ break; } }
看到了吧,只要在滿(mǎn)足我們的條件時(shí)候,我們想在什么時(shí)候跳出循環(huán),都是可以的,這就強(qiáng)制打斷了后面的步驟執(zhí)行。
既然有強(qiáng)制打斷,那么,我就想問(wèn)了,還有沒(méi)有強(qiáng)制繼續(xù)循環(huán)呢?答案還是肯定可以的,我們就要使用一個(gè)新的關(guān)鍵字continue
for(var i = 0;i<10;i++){ //當(dāng)i小于5的時(shí)候,我們強(qiáng)制循環(huán) if(i < 5){ continue; } console.log(i); }
是不是達(dá)到了我們想要的效果呢,當(dāng) i 小于5的時(shí)候,我們就強(qiáng)循環(huán)了,后面的打印都還沒(méi)執(zhí)行,就繼續(xù)下一次的循環(huán),當(dāng) i 大于或等于 5 的時(shí)候,我們才打印出 i 的值來(lái)。
下面我們就接著來(lái)講for...in,在這之前,我們得再了解一種數(shù)據(jù)類(lèi)型,就是數(shù)組,前面我之所以沒(méi)有說(shuō),因?yàn)榍懊婢退阏f(shuō)了,大家也還不能理解,所以現(xiàn)在我們先來(lái)了解一下數(shù)組,我們這里只說(shuō)一維數(shù)組,現(xiàn)在還沒(méi)有必要講二維以及多維數(shù)組,看示例代碼
//聲明一個(gè)數(shù)組,用中括號(hào)包含,組里面的內(nèi)容單位用逗號(hào)分隔,數(shù)組可以包含各種類(lèi)型的值 var arr = [1,2,"abc","MrDream",true,false,null]; //數(shù)組取值就是用下標(biāo)來(lái)獲取,在程序中,第一個(gè)值的下標(biāo)就是0,第二個(gè)才是1,后面的以此類(lèi)推 //在這里 arr 數(shù)組里面,我們放了7個(gè)值進(jìn)去,所以最大的下標(biāo)就是6
接下來(lái),我們來(lái)看一下怎么來(lái)取得其中單個(gè)的值
arr[0] // 1 arr[1] // 2 arr[2] // "abc" arr[3] // "MrDream" arr[4] // true arr[5] // false arr[6] // null
我們來(lái)執(zhí)行一下,看看是不是這樣的
跟我們預(yù)想中的一樣吧
從上面的例子, 我們可以這樣拿到數(shù)組中的值,并且打印出來(lái),但是每次都這樣寫(xiě)是不是很麻煩呢?對(duì)了,我們就可以使用循環(huán)了
var arr = [1,2,"abc","MrDream",true,false,null]; for(var i = 0;i<7;i++){ console.log(arr[i]); }
哈哈,看到循環(huán)的神奇之處了吧,就是這么的方便,但是這里,我們是用的一個(gè)變量來(lái)模擬的下標(biāo),下面我就用for...in來(lái)循環(huán)
var arr = [1,2,"abc","MrDream",true,false,null]; for(var i in arr){ console.log(arr[i]); }
for...in在javascript中就是用來(lái)循環(huán) 數(shù)組的下標(biāo)和對(duì)象的屬性,對(duì)象的屬性以及對(duì)象,我們后面再說(shuō),現(xiàn)在我們只說(shuō)數(shù)組,我現(xiàn)在來(lái)解釋一下for...in這種寫(xiě)法的執(zhí)行步驟,var i用來(lái)聲明一個(gè)變量下標(biāo)(針對(duì)數(shù)組),in 用來(lái)指定在哪個(gè)集合里面,依次取得下標(biāo),如果數(shù)組里面沒(méi)有東西,循環(huán)也將會(huì)直接終止。這個(gè)理解比前面的理解要抽象,大家多寫(xiě)幾次就會(huì)理解了。
現(xiàn)在我們來(lái)驗(yàn)證一下,在數(shù)組中,我們?nèi)〉玫淖兞渴遣皇窍聵?biāo)
看到示例了吧,明顯就是取得的下標(biāo)。
下在我們就講解新的循環(huán)方式 while
while(條件){ //執(zhí)行 }
現(xiàn)在大家看到條件兩個(gè)字是不是再也不陌生了,還是跟if后面的條件使用同一類(lèi)型,我們還是用售票來(lái)舉個(gè)例子
var tickets = 10;//車(chē)票總數(shù)量 //條件,當(dāng)車(chē)票數(shù)量大于0時(shí),就執(zhí)行售票行為 while(tickets > 0){ console.log("目前還有"+ tickets +"張可售車(chē)票,下一位");//這里我們用到了字符串拼接 tickets --; //賣(mài)出一張車(chē)票,我們就減少一張 }
注:在這里,我們又接觸到一個(gè)前面沒(méi)有提及到的運(yùn)算符 -- ,就是使得變量自減1;和上面所說(shuō)的 ++ 運(yùn)算方式一樣。
這里我們剛好執(zhí)行10次售賣(mài)動(dòng)作,是不是感覺(jué)這種寫(xiě)循環(huán)方式很簡(jiǎn)單呢?就這么一下下,我們就把它給理解透徹了,首先就是判斷條件是否成立,如果成立,就執(zhí)行循環(huán)體里面的行為,直到條件不成立為止。說(shuō)到這里,大家是不是覺(jué)得很疑惑,這種循環(huán),只有條件,成立時(shí),才執(zhí)行里面的循環(huán),和前面的for循環(huán),差不多,只有先滿(mǎn)足條件,然后才執(zhí)行里面的內(nèi)容。那么有沒(méi)有一種循環(huán)式,是先執(zhí)行一次循環(huán)體內(nèi)容,然后才來(lái)判斷條件是否成立?問(wèn)得好,我們就是需要這樣的研究精神,然后,javascript語(yǔ)言也沒(méi)有讓我們失望,他還真有這樣循環(huán)體,那就是do...while;下面我們先看語(yǔ)法
do{ //執(zhí)行 }while(條件)
這里就是先執(zhí)行一次循環(huán)體里面的內(nèi)容,然后再來(lái)判斷條件是否成立,如果條件成立,那么就又循環(huán)前面的內(nèi)容執(zhí)行
下面我們就以人生勵(lì)志賺錢(qián)為例進(jìn)行講解 路人甲想取媳婦,但是只有10萬(wàn)元存款,但是取媳婦需要50萬(wàn),那么怎么辦,只有辛苦工作了,當(dāng)有足夠多的存款的時(shí)候,就可以高高興興地取媳婦了
var money = 100000; //路人甲有10萬(wàn)元存款 do{ console.log("辛苦工作1年,存下了10萬(wàn)"); money += 100000; //工作后,有錢(qián)了,就修改一次變量 }while(money < 500000); //條件是,存款不足50萬(wàn),又繼續(xù)執(zhí)行工作行為
看到了吧,沒(méi)有錢(qián),就先去努力賺錢(qián),路人甲 同學(xué)經(jīng)過(guò)4年的不懈努力,終于存夠了50萬(wàn)(因?yàn)樗耙呀?jīng)有10萬(wàn)元了),終于取上媳婦了,過(guò)上了幸福美滿(mǎn)的生活。我們也要努力了。
這樣講大家是不是一下就理解了do...while循環(huán)的方式了呢。
總結(jié)一下,我們今天講解了循環(huán),包括了4種循環(huán)方式 for 、 for...in 、 while 、 do...while,大家是不是已經(jīng)學(xué)會(huì)了呢,看一遍不過(guò)癮,我們還可以多看幾遍,今天所講的東西,理解上是有一些小困難,但多寫(xiě)多練,自然就能熟練使用了。
- 用C語(yǔ)言程序判斷大小端模式
- C語(yǔ)言中判斷int,long型等變量是否賦值的方法詳解
- C語(yǔ)言小程序 如何判斷兩個(gè)日期之差
- C語(yǔ)言小程序 如何判斷三角型類(lèi)型
- C語(yǔ)言使用普通循環(huán)方法和遞歸求斐波那契序列示例代碼
- c語(yǔ)言判斷是否素?cái)?shù)程序代碼
- 使用c語(yǔ)言判斷100以?xún)?nèi)素?cái)?shù)的示例(c語(yǔ)言求素?cái)?shù))
- C語(yǔ)言單循環(huán)鏈表的表示與實(shí)現(xiàn)實(shí)例詳解
- C語(yǔ)言循環(huán)隊(duì)列的表示與實(shí)現(xiàn)實(shí)例詳解
- 用C語(yǔ)言判斷字符是否為空白字符或特殊字符的方法
- 理解javascript中Map代替循環(huán)
- JavaScript中循環(huán)遍歷Array與Map的方法小結(jié)
- 詳解C語(yǔ)言 三大循環(huán) 四大跳轉(zhuǎn) 和判斷語(yǔ)句
相關(guān)文章
移動(dòng)端利用H5實(shí)現(xiàn)壓縮圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了移動(dòng)端利用H5實(shí)現(xiàn)壓縮圖片上傳功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03JS實(shí)現(xiàn)圖片轉(zhuǎn)換成base64的各種應(yīng)用場(chǎng)景實(shí)例分析
這篇文章主要介紹了JS實(shí)現(xiàn)圖片轉(zhuǎn)換成base64的各種應(yīng)用場(chǎng)景,結(jié)合實(shí)例形式分析了javascript實(shí)現(xiàn)圖片轉(zhuǎn)換成base64的各種應(yīng)用場(chǎng)景的相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2018-06-06全面解析Bootstrap中transition、affix的使用方法
這篇文章主要為大家詳細(xì)解析了Bootstrap中transition、affix的使用方法,感興趣的朋友可以參考一下2016-05-05js項(xiàng)目中前端如何實(shí)現(xiàn)無(wú)感刷新token
本文主要介紹了js項(xiàng)目中前端如何實(shí)現(xiàn)無(wú)感刷新token,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07使用JavaScript和CSS實(shí)現(xiàn)文本隔行換色的方法
這篇文章主要介紹了使用JavaScript和CSS實(shí)現(xiàn)文本隔行換色的方法,當(dāng)然最普通的也可以單純用CSS實(shí)現(xiàn),需要的朋友可以參考下2015-11-11JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片滾動(dòng)附源碼下載
JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片滾動(dòng),9張圖告訴你,C羅欲哭無(wú)淚,另附源碼下載,方便學(xué)習(xí)2014-06-06JavaScript數(shù)據(jù)結(jié)構(gòu)yocto queue隊(duì)列鏈表代碼分析
這篇文章主要為大家介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)yocto queue隊(duì)列鏈表代碼分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12JavaScript實(shí)現(xiàn)圖片合成下載的示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片合成下載的示例,幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下2020-11-11