1 - 迴圈

1.1 for迴圈

• 語法結構

  for(初始化變數; 條件表示式; 操作表示式 ){
      //迴圈體
  }
  

  名稱	作用
  初始化變數	通常被用於初始化一個計數器，該表示式可以使用 var 關鍵字宣告新的變數，這個變數幫我們來記錄次數。
  條件表示式	用於確定每一次迴圈是否能被執行。如果結果是 true 就繼續迴圈，否則退出迴圈。
  操作表示式	用於確定每一次迴圈是否能被執行。如果結果是 true 就繼續迴圈，否則退出迴圈。

  執行過程：

  1. 初始化變數，初始化操作在整個 for 迴圈只會執行一次。

• 執行條件表示式，如果為true，則執行迴圈體語句，否則退出迴圈，迴圈結束。

1. 執行操作表示式，此時第一輪結束。
2. 第二輪開始，直接去執行條件表示式（不再初始化變數），如果為 true ，則去執行迴圈體語句，否則退出迴圈。
3. 繼續執行操作表示式，第二輪結束。
4. 後續跟第二輪一致，直至條件表示式為假，結束整個 for 迴圈。

斷點除錯：

	斷點除錯是指自己在程式的某一行設定一個斷點，除錯時，程式執行到這一行就會停住，然後你可以一步一步往下除錯，除錯過程中可以看各個變數當前的值，出錯的話，除錯到出錯的程式碼行即顯示錯誤，停下。斷點除錯可以幫助觀察程式的執行過程

斷點除錯的流程：
1、瀏覽器中按 F12--> sources -->找到需要除錯的檔案-->在程式的某一行設定斷點
2、Watch: 監視，通過watch可以監視變數的值的變化，非常的常用。
3、摁下F11，程式單步執行，讓程式一行一行的執行，這個時候，觀察watch中變數的值的變化。
 

• for 迴圈重複相同的程式碼

  比如輸出10句“媳婦我錯了”

  //  基本寫法
  for(var i = 1; i <= 10; i++){
      console.log('媳婦我錯了~');
  }
  // 使用者輸入次數
  var num = prompt('請輸入次數:')；
  for ( var i = 1 ; i <= num; i++) {
      console.log('媳婦我錯了~');
  } 
  

• for 迴圈重複不相同的程式碼

  例如，求輸出1到100歲：

  //  基本寫法
  for (var i = 1; i <= 100; i++) {
        console.log('這個人今年' + i + '歲了');
  }
   
  

  例如，求輸出1到100歲，並提示出生、死亡

  // for 裡面是可以新增其他語句的 
  for (var i = 1; i <= 100; i++) {
   if (i == 1) {
      console.log('這個人今年1歲了， 它出生了');
   } else if (i == 100) {
      console.log('這個人今年100歲了，它死了');
    } else {
         console.log('這個人今年' + i + '歲了');
    }
  }
  

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

1.2 雙重for迴圈

• 雙重 for 迴圈概述

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

• 雙重 for 迴圈語法

  for (外迴圈的初始; 外迴圈的條件; 外迴圈的操作表示式) {
      for (內迴圈的初始; 內迴圈的條件; 內迴圈的操作表示式) {  
         需執行的程式碼;
     }
  }
  

  • 內層迴圈可以看做外層迴圈的迴圈體語句
  • 內層迴圈執行的順序也要遵循 for 迴圈的執行順序
  • 外層迴圈執行一次，內層迴圈要執行全部次數

• 列印五行五列星星

  var star = '';
  for (var j = 1; j <= 3; j++) {
      for (var i = 1; i <= 3; i++) {
        star += '☆'
      }
      // 每次滿 5個星星 就 加一次換行
      star += '\n'
  }
  console.log(star);
  
  

  核心邏輯：

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

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

• for 迴圈小結

  • for 迴圈可以重複執行某些相同程式碼
  • for 迴圈可以重複執行些許不同的程式碼，因為我們有計數器
  • for 迴圈可以重複執行某些操作，比如算術運算子加法操作
  • 隨著需求增加，雙重for迴圈可以做更多、更好看的效果
  • 雙重 for 迴圈，外層迴圈一次，內層 for 迴圈全部執行
  • for 迴圈是迴圈條件和數字直接相關的迴圈

1.3 while迴圈

while語句的語法結構如下：

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

執行思路：

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

注意：

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

1.4 do-while迴圈

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

do {
    // 迴圈體程式碼 - 條件表示式為 true 時重複執行迴圈體程式碼
} while(條件表示式);

執行思路

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

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

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

1.5 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 + '個包子呢');
 }

執行結果：

2 - 程式碼規範

2.1 識別符號命名規範

• 變數、函式的命名必須要有意義
• 變數的名稱一般用名詞
• 函式的名稱一般用動詞

2.2 操作符規範

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

2.3 單行註釋規範

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

2.4 其他規範

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