1.迴圈

迴圈目的

• 在實際問題中，有許多具有規律性的重複操作，因此在程式中要完成這類操作就需要重複執行某些語句

JS中的迴圈

在JS中，主要有三種類型的迴圈語句：

• for迴圈

• while迴圈

• do...while迴圈

2.for 迴圈

在程式中，一組被重複執行的語句被稱之為迴圈體，能否繼續重複執行，取決於迴圈的終止條件。由迴圈體及迴圈的終止條件組成的語句，被稱之為迴圈語句

2.1 語法結構

for迴圈主要用於把某些程式碼迴圈若干次，通常跟計數有關係。其語法結構如下：

//1.for重複執行某些程式碼，通常跟計數有關係
//2.for語法結構
for(初始化變數;條件表示式;操作表示式) {
    
 
//迴圈體
}
//3.初始化變數 就是用var宣告一個普通的變數，通常用於作為計數器使用
//4.條件表示式就是用來決定每一次迴圈是否繼續執行 就是終止的條件
//5.操作表示式 是每次迴圈最後執行的程式碼 經常用於我們計數器變數進行更新（遞增或者遞減）
//6.程式碼體驗 重複列印100次 How are you?
  for (var i = 1; i <= 100; i++) {
            console.log('How are you?');
        }

2.2 for迴圈重複相同程式碼

        //for迴圈可以執行相同的程式碼
        for (var i = 1; i <= 100; i++) {
            console.log(
 
' How are you!')
        }
        //讓使用者控制輸入次數
        var num = prompt('請您輸入要執行的次數');
        for (var i = 1; i <= num; i++) {
            console.log(' How are you!')
        }

2.3 for迴圈重複不相同程式碼

for迴圈還可以重複不同的程式碼，這主要是因為使用了計數器，計數器在每次迴圈過程中都會有變化。

        //for迴圈可以重複執行不同的程式碼  因為由計數器變數i的存在
        //我們想要輸出一個人1~100
 

        /* for (var i = 1; i <= 100; i++) {
            console.log('她今年' + i + '歲了');
        } */
        for (var i = 1; i <= 100; i++) {
            if (i == 1) {
                console.log('他出生了');
            } else if (i == 50) {
                console.log('他今年要過五十大壽了');
            } else {
                console.log('他今年' + i + '了')
            }
        }

2.4 for迴圈重複某些相同程式碼

for迴圈因為有了計數器的存在，我們還可以重複的執行某些操作，比如做一些算數運算。

案例：求1-100之間所有整數的累加和

案例分析：

1. 需要迴圈100次，我們需要一個計數器 i

2. 我們需要一個儲存結果的變數sum,但是初始值一定是0

3. 核心演算法：1+2+3+4......，sum = sum + i;

      var num = 0;
      for (var i = 1; i <= 100; i++) {
        num += i;
      }
      console.log(num);

for迴圈練習

     //1.求1~100之間所有數的平均值
      var num = 0;
      var average = 0;
      for (var i = 1; i <= 100; i++) {
        num = num + i;
      }
      average = num / 100;
      console.log(average);
      //2.求1~100之間所有偶數和奇數的和
      var even = 0;
      var odd = 0;
      for (var i = 1; i <= 100; i++) {
        num += i;
        if (i % 2 == 0) {
          even += i;
        } else if (i % 2 !== 0) {
          odd += i;
        }
      }
      console.log("1~100之間的偶數的和是" + even);
      console.log("1~100之間的奇數的和是" + odd);
      //3.求1~100之間所有能被3整除的數的和
      var num = 0;
      for (var i = 1; i <= 100; i++) {
        if (i % 3 == 0) {
          num += i;
        }
      }
      console.log("1~100之間能被3整除的數的和是" + num);

案例：求學生成績

要求使用者輸入班級人數，之後依次輸入每個學生的成績，最後打印出該班級的總成績以及平均成績

案例分析：

1. 彈出輸入框總的班級人數（num）

2. 依次輸入學生的成績(儲存起來score),此時我們需要用到for迴圈，彈出的次數跟班級總人數有關係，條件表示式 i <= num

3. 進行業務處理：計算成績。先求總成績(sum),之後求平均成績(average)

4. 彈出成績

      var num = prompt("請輸入學生總人數:");
 var sum = 0;
 var average = 0;
 for (var i = 1; i <= num; i++) {
 var score = prompt("請輸入第" + i + "個學生的成績:");
 //從prompt取過來的是字元型，需要將字元型轉換為數字型才能相加
 sum += parseFloat(score);
 }
 alert("學生總成績是:" + sum);
 average = sum / num;
 alert("學生平均成績是:" + average);

3.雙重for迴圈

3.1雙重for迴圈概述

迴圈巢狀是指在一個迴圈語句中再定義一個迴圈語句的語法結構，例如在for迴圈語句中，可以再巢狀一個for迴圈，這樣的for迴圈語句我們稱之為雙重for迴圈。

3.2雙重 for 迴圈語法

for (外層初始化變數;外層條件表示式;外層操作表示式) {
   for (裡層初始化變數;裡層條件表示式;裡層操作表示式) {  
    執行語句;
  }
}

• 可以把裡層的迴圈看作是外層迴圈的執行語句

• 外層迴圈迴圈一次，裡層迴圈執行全部迴圈

列印五行五列星星

核心：

1. 內層迴圈負責一行列印五個星星

2. 外層迴圈負責列印五行

      var str = "";
      for (var i = 1; i <= 5; i++) {
        for (var j = 1; j <= 5; j++) {
          str = str + "★";
        }
         //每滿五個星星就換行
        str = str + "\n";
      }
      console.log(str);

列印n行n列星星

      var rows = prompt("請輸入行數");
      var cols = prompt("請輸入列數");
      var str = "";
      for (var i = 1; i <= rows; i++) {
        for (var j = 1; j <= cols; j++) {
          str = str + "★";
        }
        str = str + "\n"; //每滿n個星星就換行
      }
      console.log(str);

列印倒三角

var str = "";
      for (var i = 1; i <= 10; i++) {
        for (var j = i; j <= 10; j++) {
          str += "★";
        }
        str += "\n";
      }
      console.log(str);

for迴圈 綜合案例

 var str = "";
      for (var i = 1; i <= 9; i++) {
        for (var j = 1; j <= i; j++) {
          //   1 × 2 = 2
          str += j + "×" + i + "=" + i * j + "\t";
        }
        str += "\n";
      }
      console.log(str);

3.3 for 迴圈小結

• for 迴圈可以重複執行某些相同程式碼

• for 迴圈可以重複執行些許不同的程式碼，因為我們有計數器

• for 迴圈可以重複執行某些操作，比如算術運算子加法操作

• 隨著需求增加，雙重for迴圈可以做更多、更好看的效果

• 雙重 for 迴圈，外層迴圈一次，內層 for 迴圈全部執行

• for 迴圈是迴圈條件和數字直接相關的迴圈

4. while迴圈

while語句的語法結構如下：

while (條件表示式) {
// 迴圈體程式碼
}

 var num = 1;
      while (num <= 100) {
        console.log("你好嗎！");
        num++;
      }

執行思路：

• 1 先執行條件表示式，如果結果為 true，則執行迴圈體程式碼；如果為 false，則退出迴圈，執行後面程式碼

• 2 執行迴圈體程式碼

• 3 迴圈體程式碼執行完畢後，程式會繼續判斷執行條件表示式，如條件仍為true，則會繼續執行迴圈體，直到迴圈條件為 false 時，整個迴圈過程才會結束

注意：

• 使用 while 迴圈時一定要注意，它必須要有退出條件，否則會成為死迴圈

5.do-while迴圈

do... while 語句的語法結構如下：

do {
    // 迴圈體程式碼 - 條件表示式為 true 時重複執行迴圈體程式碼
} while(條件表示式);
　　//程式碼如下
      var i = 1;
      do {
        console.log("How are you?");
        i++;
      } while (i <= 100);

執行思路

• 1 先執行一次迴圈體程式碼

• 2 再執行條件表示式，如果結果為 true，則繼續執行迴圈體程式碼，如果為 false，則退出迴圈，繼續執行後面程式碼

  注意：先再執行迴圈體，再判斷，do…while迴圈語句至少會執行一次迴圈體程式碼

迴圈小結

• JS中迴圈有for、while、do while

• 三個迴圈很多情況下都可以相互替代使用

• 如果是用來計次數，跟數字相關的，三者使用基本相同，但是我們更喜歡用for

• while和do...while可以做更復雜的判斷條件，比for迴圈靈活一些

• while和do...while執行順序不一樣，while先判斷後執行，do...while先執行一次，再判斷執行

• while和do...while執行次數不一樣，do...while至少會執行一次迴圈體，而while可能一次也不執行

• 實際工作中，我們更常用到for迴圈語句，它寫法更簡潔直觀

6. continue、break

continue 關鍵字用於立即跳出本次迴圈，繼續下一次迴圈（本次迴圈體中 continue 之後的程式碼就會少執行一次）。

例如，吃5個包子，第3個有蟲子，就扔掉第3個，繼續吃第4個第5個包子，其程式碼實現如下：

for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         console.log('這個包子有蟲子，扔掉');
         continue; // 跳出本次迴圈，跳出的是第3次迴圈 
      }
      console.log('我正在吃第' + i + '個包子呢');
 }

執行結果：

break 關鍵字用於立即跳出整個迴圈（迴圈結束）。

例如，吃5個包子，吃到第3個發現裡面有半個蟲子，其餘的不吃了，其程式碼實現如下：

for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         break; // 直接退出整個for 迴圈，跳到整個for下面的語句
     }
     console.log('我正在吃第' + i + '個包子呢');
   }

執行結果：

7 - 程式碼規範

7.1 識別符號命名規範

• 變數、函式的命名必須要有意義

• 變數的名稱一般用名詞

• 函式的名稱一般用動詞

7.2 操作符規範

// 操作符的左右兩側各保留一個空格
for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 直接退出整個 for 迴圈，跳到整個for迴圈下面的語句
   }
   console.log('我正在吃第' + i + '個包子呢');
}

7.3 單行註釋規範

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 單行註釋前面注意有個空格
   }
   console.log('我正在吃第' + i + '個包子呢');
}

7.4 其他規範

關鍵詞、操作符之間後加空格