朋友們大家好，今天，我們繼續(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ě)多練，自然就能熟練使用了。

最新評(píng)論