javascript大神修煉記（4）——循環

　　讀者朋友們你們好，今天，咱們繼續接着前面的內容講，前們咱們已經講了條件分支，今天咱們就講循環，顧名思義就是，重複執行相同的操做，正常循環是受程序控制的，不正常的狀況，就會出現死循環，那就是咱們的代碼中出現bug，那樣，咱們還要學會調式bug，等咱們先把基礎知識講完了以後，我還會專門用篇幅來說解瀏覽器裏面的調試，那種程序就會在咱們掌控之中，這纔是咱們想要結果。

　　循環包括的結構體有 for , while , do--while，for循環有兩種形式的存在，一種是數字變量變化所引發的循環，另外一種就是for...in形式，是屬性或者下標所引發的循環變化，但for...in不是關鍵，關鍵仍是for，例如在C#語言中，它的名稱叫作foreach，好了，只是一個稱謂而已，沒有別的不一樣，我講到的時候，再仔細說。

　　從for開始

for(var i = 0;i<10;i++){
    console.log(i);
}

（這裏用到了一個新的運算符，也是前面我所講漏了的，可是，你們一看就明白，小於運算符，運算返回結果是布爾值（true,false））

這裏成功地打印出了1到9，看到上面的4個執行步驟，第一步（聲明變量），只執行一次；接着第二步判斷條件是否成立(跟if後面的條件接收同樣的類型)，若是成立，緊跟着就執行循環體裏面的內容，這裏視爲第三步，第三步執行完了以後，就是執行第四步讓變量變化；而後，又執行第二步，判斷是否成立。至此已經接上頭了，而後循環就是這樣交替的。

注：解釋一下第四步 i++ 咱們能夠這樣理解 i = i + 1；一會兒就明白了，前面聲明瞭i = 0；那麼i = i + 1 就是讓 i 從新賦值，就是使其變化，i = 0 + 1；這樣  i 就變成了1，當執行完了一圈的時候打印出的是0，i 就變成了1，第二圈執行完的時候，打印是1， i 就變成了2，……，第10圈執行完時，打印的是9，i 就變了10，當再次去第二步執行判斷時，i < 10 就是 10 < 10，返回的是false，因此不成立，這樣後面就再也不繼續。

上面咱們已經講到的控制，是徹底按咱們的意圖執行了10次，若是是一樣的條件 ，咱們中途時可不能夠跳出循環呢？答案是確定能夠的，這就要使用咱們已經瞭解過的一個關鍵字了 break 下在咱們來看看示例代碼

for(var i = 0;i<10;i++){
    console.log(i);
    //當i等於5的時候，咱們就跳出循環
    if(i == 5){
        break;
    }
}

看到了吧，只要在知足咱們的條件時候，咱們想在何時跳出循環，都是能夠的，這就強制打斷了後面的步驟執行。

既然有強制打斷，那麼，我就想問了，還有沒有強制繼續循環呢？答案仍是確定能夠的，咱們就要使用一個新的關鍵字continue

for(var i = 0;i<10;i++){
    //當i小於5的時候，咱們強制循環
    if(i < 5){
        continue;
    }
    console.log(i);
}

是否是達到了咱們想要的效果呢，當 i 小於5的時候，咱們就強循環了，後面的打印都還沒執行，就繼續下一次的循環，當 i 大於或等於 5 的時候，咱們纔打印出 i 的值來。

下面咱們就接着來說for...in，在這以前，咱們得再瞭解一種數據類型，就是數組，前面我之因此沒有說，由於前面就算說了，你們也還不能理解，因此如今咱們先來了解一下數組，咱們這裏只說一維數組，如今尚未必要講二維以及多維數組，看示例代碼

//聲明一個數組，用中括號包含，組裏面的內容單位用逗號分隔，數組能夠包含各類類型的值
var arr = [1,2,"abc","MrDream",true,false,null];

//數組取值就是用下標來獲取，在程序中，第一個值的下標就是0，第二個纔是1，後面的以此類推
//在這裏 arr 數組裏面，咱們放了7個值進去，因此最大的下標就是6

接下來，咱們來看一下怎麼來取得其中單個的值

arr[0] // 1
arr[1] // 2
arr[2] // "abc"
arr[3] // "MrDream"
arr[4] // true
arr[5] // false
arr[6] // null

咱們來執行一下，看看是否是這樣的

跟咱們預想中的同樣吧

從上面的例子， 咱們能夠這樣拿到數組中的值，而且打印出來，可是每次都這樣寫是否是很麻煩呢？對了，咱們就可使用循環了

var arr = [1,2,"abc","MrDream",true,false,null];

for(var i = 0;i<7;i++){
    console.log(arr[i]);
}

哈哈，看到循環的神奇之處了吧，就是這麼的方便，可是這裏，咱們是用的一個變量來模擬的下標，下面我就用for...in來循環

var arr = [1,2,"abc","MrDream",true,false,null];

for(var i in arr){
    console.log(arr[i]);
}

for...in在javascript中就是用來循環 數組的下標和對象的屬性，對象的屬性以及對象，咱們後面再說，如今咱們只說數組，我如今來解釋一下for...in這種寫法的執行步驟，var i用來聲明一個變量下標（針對數組），in 用來指定在哪一個集合裏面，依次取得下標，若是數組裏面沒有東西，循環也將會直接終止。這個理解比前面的理解要抽象，你們多寫幾回就會理解了。

如今咱們來驗證一下，在數組中，咱們取得的變量是否是下標

看到示例了吧，明顯就是取得的下標。

下在咱們就講解新的循環方式 while

while(條件){
    //執行
}

如今你們看到條件兩個字是否是不再陌生了，仍是跟if後面的條件使用同一類型，咱們仍是用售票來舉個例子

var tickets = 10;//車票總數量

//條件，當車票數量大於0時，就執行售票行爲
while(tickets > 0){
    console.log("目前還有"+ tickets +"張可售車票，下一位");//這裏咱們用到了字符串拼接
    tickets --; //賣出一張車票，咱們就減小一張
}

注：在這裏，咱們又接觸到一個前面沒有說起到的運算符 --  ，就是使得變量自減1；和上面所說的 ++ 運算方式同樣。

這裏咱們恰好執行10次售賣動做，是否是感受這種寫循環方式很簡單呢？就這麼一下下，咱們就把它給理解透徹了，首先就是判斷條件是否成立，若是成立，就執行循環體裏面的行爲，直到條件不成立爲止。說到這裏，你們是否是以爲很疑惑，這種循環，只有條件，成立時，才執行裏面的循環，和前面的for循環，差很少，只有先知足條件，而後才執行裏面的內容。那麼有沒有一種循環式，是先執行一次循環體內容，而後纔來判斷條件是否成立？問得好，咱們就是須要這樣的研究精神，而後，javascript語言也沒有讓咱們失望，他還真有這樣循環體，那就是do...while；下面咱們先看語法 

do{
    //執行
}while(條件)

這裏就是先執行一次循環體裏面的內容，而後再來判斷條件是否成立，若是條件成立，那麼就又循環前面的內容執行

下面咱們就以人生勵志賺錢爲例進行講解 路人甲想取媳婦，可是隻有10萬元存款，可是取媳婦須要50萬，那麼怎麼辦，只有辛苦工做了，當有足夠多的存款的時候，就能夠高高興興地取媳婦了

var money = 100000; //路人甲有10萬元存款

do{
    console.log("辛苦工做1年，存下了10萬"); 
    money += 100000; //工做後，有錢了，就修改一次變量
}while(money < 500000); //條件是，存款不足50萬，又繼續執行工做行爲

看到了吧，沒有錢，就先去努力賺錢，路人甲 同窗通過4年的不懈努力，終於存夠了50萬（由於他以前已經有10萬元了），終於取上媳婦了，過上了幸福美滿的生活。咱們也要努力了。

這樣講你們是否是一下下就理解了do...while循環的方式了呢。

　　總結一下，咱們今天講解了循環，包括了4種循環方式 for  、 for...in   、 while   、 do...while，你們是否是已經學會了呢，看一遍不過癮，咱們還能夠多看幾遍，今天所講的東西，理解上是有一些小困難，但多寫多練，天然就能熟練使用了。