迴圈結構的概念

先來看看生活中的一些場景：

（1）食堂阿姨打菜：接過顧客的餐盤→詢問菜品→打菜→遞迴餐盤，重複以上過程，直到所有顧客的菜都打完了。

（2）快遞員送快遞：檢視送件地址→趕往目的地→電話告知收件人→收件人簽收→交快遞件，重複以上過程，直到所有需要送的快遞都處理完了。

（3）公交司機……

（4）作業流程……

以上場景都有一個共同的特點：有條件地重複地做一件事，每一次做的事情不同但類似。

程式是為了解決實際問題的，實際問題中存在著重複動作，那麼程式中也應該有相應的描述，這就是迴圈。

案例：計算1+2+3+……+10

/*方案一*/
var sum1 = 1+2+3+4+5+6+7+8+9+10;
/*方案二*/
var sum2 = 0;
sum2 += 1;
sum2 += 2;
sum2 += 3;
sum2 += 4;
sum2 += 5;
sum2 += 6;
sum2 += 7;
sum2 += 8;
sum2 += 9;
sum2 += 10;
 

但是這兩種方案的描述方式都不太理想，如果是要加到10000呢？

注意觀察方案二，它重複地做一件事（將一個數加到sum2中），每一次做的不同但類似。

我們希望能找到一種更好的描述方法

*方案三:改造方案二*/
var sum3 = 0;
var n = 1;
while(n <= 10){
    sum3 += n;
    n++;
}

方案三表達的含義和方案二一樣，但是表達方式要好得多，比如加到10000，只需要把條件n<=10改為n<=10000

 while迴圈

while是表示“當……則……”，也就是當某個條件成立時，則一直重複做。

（除錯工具檢視程式執行軌跡以及變數的變化情況）

案例：輸出所有水仙花數

<script>
    var num = 100;
    while (num <= 999) {
        var num100 = Math.floor((num % 1000) / 100);
        var num10 = Math.floor((num % 100) / 10);
        var num1 = Math.floor((num % 10));
        var sum = Math.pow(num100, 3) + Math.pow(num10, 3) + Math.pow(num1, 3);
        if(sum == num){
            alert(num+"是水仙花數");
        }
        num++;
    }
</script>
 

案例：GDP預測：

<script>
    var year = 2009;
    var gdp_usa = 142562.75;
    var gdp_chn = 49089.82;
    while(gdp_usa>gdp_chn){
        gdp_usa *= (1+0.02);
        gdp_chn *= (1+0.08);
        year++;
    }
    alert(year+"年，中國("+gdp_chn+")將超過美國("+gdp_usa+")");
</script> 

總結一下迴圈的套路

（1）初始狀態

（2）迴圈條件

（3）迴圈體（要重複做的事情）

（4）為下次迴圈作準備（）

那如何去寫迴圈的程式呢？

拿到問題，不要胡思亂想，就回答四個問題：

（1）初始狀態是怎樣的？

（2）重複做的條件是什麼

（3）重複做什麼

（4）怎麼過渡到下一次迴圈

案例：計算圓周率, π =（1 - 1/3 + 1/5 - 1/7 + ……）*4，計算到最後一項的絕對值小於10^-6

分析：將公式稍微變化一下

1 - 1/3 + 1/5 - 1/7 +

變化為（+1/1）+(-1/3)+(+1/5)+(-1/7)

那麼它和我們之前解決的1+2+3+……+10問題就非常類似了，即都是求累加和的問題，只不過每次加的內容不同而已。

我們可以將每一項拆分為三部分：

t = 符號*1/分母

（1）初始狀態是怎樣的？

sum = 0;

t = 1;

sign = 1;

deno = 1;

（2）重複做的條件是什麼

|t|>=10^-6

（3）重複做什麼

sum += t;

（4）怎麼過渡到下一次迴圈

sign = -sign;

deno += 2;

t = sign*1/deno;

for迴圈

<script>
    /*
    * 1.定義等腰三角形的行數
    * 2.
    * 3，*/
    var num=10;
    //每一行的空格數為總行數減去當前是第幾行
    //每一行的星星個數為當前*2-1
    //迴圈條件數小於等於10
    for(var i=1;i<=num;i++){
        for(var j=num-i;j>0;j--){
            document.write("-");
 
        }
        for(var k=1;k<=i*2-1;k++){
            document.write("%");
        }
        document.write("</br>")
    }
</script>

  迴圈輔助語句

break:跳出所在的switch或者迴圈結構

案例：素數判斷

var n = Number(prompt("請輸入一個自然數"));
var m = Math.ceil(Math.sqrt(n));//根據相關數學定理，查詢範圍可縮小至[2,sqrt(n)]
var found = false;//找到因子的標記
for(var i=2; i<=m; i++){
    if(n%i == 0){
        found = true;
        break;//找到則提前結束
    }
}
alert(found?"不是素數":"是素數");
continue:結束本次迴圈，開啟下一次迴圈。

案例：對100以內既不是3的倍數也不是5的倍數的數求和

常規思路：對滿足條件的數累加

var sum = 0;
 for(var n=1; n<=100; n++){
     if(n%3!=0 && n%5!=0){
         sum += n;
     }
 }
 alert(sum);
另一種思路：不滿足條件的就放過
var sum = 0;
for(var n=1; n<=100; n++){
    if(n%3==0 || n%5==0){
        continue;//結束本次迴圈
    }
    sum += n;
}
alert(sum);

第二種思路的好處是：結構清晰

也就是我們在進行資料處理之前，先把各種不符合條件的情況先排除，然後在處理符合條件的情況（這個一般是程式的主體）

如果迴圈體的主體程式碼的執行有兩個前提條件，常規思路是這麼寫的，如果迴圈體主體程式碼較多，該程式的可讀性較差。

for(……）{
if(條件1）{
if(條件2）{
迴圈體主體程式碼（可能程式碼較多）
}else{
alert("錯誤提示2")
}
}else{
alert("錯誤提示1");
}
}

換另外一個思路來描述，是這樣的

for(……){
if（!條件1）{
alert("錯誤提示1");
continue;
}
if（!條件2）{
alert("錯誤提示2");
continue;
}
迴圈體主體程式碼
}

break和continue的聯絡和區別

  迴圈巢狀

for迴圈巢狀特點：

外層迴圈轉一次，內層迴圈轉一圈
              外層迴圈控制行數，內層迴圈控制每行元素個數

案例1：找素數

<script>
    /*
    * 思路
    * 素數：對於自然數，如果他只有1和他的本身之外再沒有其他因子
    * 解決思路：
    * 1.提示並接收待判斷的數n輸入
    * 2.在【2，n-1】之間去尋找因子，
    * 3.如果找到則設定找到標誌，並提前結束
    * 4.根據標誌輸出相應結果*/
    var n =Number(prompt("請輸入一個自然數"));
     var found = false;//找到因子的標記
    var m=Math.ceil(Math.sqrt(n));//根據數學的相關定理，判斷範圍可進一步縮小至{2，sqrt（n）
//    for(var i=2; i<n-1; i++){
    for(var i=2; i<=m; i++){
        if(n%i == 0){
            found = true;
            break;//找到則提前結束
        }
    }
alert(found?"不是素數":"是素數")
/*
* 三個關鍵
* 1.break；提前結束
* 2.標誌位
* 3優化：根據定義，找因子的範圍定義為{2，}n-1
* 肖為分析下，最大的因子不會超過n/2
* 即找到範圍可縮小至{2，n/2}
* 根據數學的相關定理，判斷範圍可進一步縮小至{2，sqrt（n）}*/
</script>

做圖形思路：

1確定圖形一共幾行  極為外層的迴圈的次數
             2確定每行有幾種元素，代表有幾個內層迴圈。
             3 確定每種元素的個數，即為每個內層迴圈的次數
 tips：通常：找出每種元素個數，與行號的關係式，極為當前迴圈的最大值（從1開始迴圈）

[長方形]
             
              *****
              *****
              *****
              *****
             
        for(var a=1;a<=5;a++){
            for(var b=1;b<=5;b++){
                document.write(b)
                }
            document.write("<br />");
        }        
[直角三角形]
          *
          **
          ***
          ****
          *****
         for(var a=1;a<=5;a++){
             for(var b=1;b<=a;b++){
                 document.write(b)    
             }
             document.write("<br />");
         }
         
         
         
 [平行四邊形]
          *****
           *****
            *****
             *****
              *****
         
         for(var a=1;a<=5;a++){
             for(var c=1;c<=a-1;c++){
                 document.write("&nbsp")
             }
             
            for(var b=1;b<=5;b++){
                document.write(b);
                }
            document.write("<br />")
        }


[菱形]
            *          1     3
           ***         2     2
          *****        3     1
         *******       4     0
          *****       1     5
           ***        2     3
            *         3     1
          
       
         for(var a=1;a<=4; a++){
             for(var c=1;c<=4-a;c++){
                 document.write("<span style='display: inline-block;width: 7px;'></span>")
             }
             for(var b=1;b<=2*a-1;b++){
                 document.write("*")
             }
             document.write("<br />")
         }
         
         
         for(var d=1;d<=3;d++ ){
             for(var f=1;f<=d;f++){
                 document.write("<span style='display: inline-block;width: 7px;'></span>");
             }
             for(var e=1;e<=7-2*d;e++){
                 document.write("*")
             }
             
             document.write("<br />")
         }