今天主要學習流程控制,回圈和代碼規范

1.流程控制

1. 流程控制概念

在一個程式執行的程序中，各條代碼的執行順序對程式的結果是有直接影響的，很多時候我們要通過控制代碼的執行順序來實作我們要完成的功能，

簡單理解：**流程控制就是來控制代碼按照一定結構順序來執行**

流程控制主要有三種結構，分別是**順序結構**、**分支結構**和**回圈結構**，代表三種代碼執行的順序，

2. 順序流程控制

順序結構是程式中最簡單、最基本的流程控制，它沒有特定的語法結構，程式會按照代碼的先后順序，依次執行，程式中大多數的代碼都是這樣執行的，

3.分支流程控制

1.分支結構

由上到下執行代碼的程序中，根據不同的條件，執行不同的路徑代碼（執行代碼多選一的程序），從而得到不同的結果

js語言提供了兩種分支結構陳述句:if陳述句,switch陳述句

2.if 陳述句

• 語法結構

// 條件成立執行代碼，否則什么也不做
if (條件運算式) {
// 條件成立執行的代碼陳述句
}

陳述句可以理解為一個行為,回圈陳述句和分支陳述句就是典型的陳述句，一個程式由很多個陳述句組成，一般情況下，會分割成一個一個的陳述句，

• 執行流程

• if else陳述句(雙分支陳述句)

語法結構

// 條件成立 執行 if 里面代碼，否則執行else 里面的代碼
if (條件運算式) {
// [如果] 條件成立執行的代碼
} else {
// [否則] 執行的代碼
}

• 執行流程

• if else if 陳述句(多分支陳述句)

語法結構

// 適合于檢查多重條件，
if (條件運算式1) {
陳述句1；
} else if (條件運算式2) {
陳述句2；
} else if (條件運算式3) {
陳述句3；
....
} else {
// 上述條件都不成立執行此處代碼
}

• 執行邏輯

4.三元運算式

語法結構

運算式1 ? 運算式2:運算式3;

• 執行思路

如果運算式1為 true ，則回傳運算式2的值，如果運算式1為 false，則回傳運算式3的值

簡單理解： 就類似于 if else （雙分支） 的簡寫

5 switch分支流程控制

• 語法結構

switch陳述句也是多分支陳述句,它用于基本不同的條件來執行不同的代碼，當要針對變數設定一系列的特定值的選項時，就可以使用switch，

switch( 運算式 ){
case value1:
// 運算式 等于 value1 時要執行的代碼
break;
case value2:
// 運算式 等于 value2 時要執行的代碼
break;
default:
// 運算式 不等于任何一個 value 時要執行的代碼
}

• switch ：開關 轉換 ， case ：小例子 選項

• 關鍵字 switch 后面括號內可以是運算式或值， 通常是一個變數

• 關鍵字 case , 后跟一個選項的運算式或值，后面跟一個冒號

• switch 運算式的值會與結構中的 case 的值做比較

• 如果存在匹配全等(===) ，則與該 case 關聯的代碼塊會被執行，并在遇到 break 時停止，整個 switch 陳述句代碼執行結束

• 如果所有的 case 的值都和運算式的值不匹配，則執行 default 里的代碼

注意： 執行case 里面的陳述句時，如果沒有break，則繼續執行下一個case里面的陳述句，

6.switch 陳述句和 if else if 陳述句的區別：

• 一般情況下，它們兩個的陳述句可以相互替換
• switch...case陳述句通常處理case為比較確定值的情況,而if...else...陳述句更加靈活,常用于范圍判斷(大于,等于某個范圍)
• switch陳述句進行條件判斷后直接執行到程式的條件陳述句,效率更高，而if...else陳述句有幾種條件,就得判斷多少次
• 當分支比較少時,if...else陳述句的執行效率比switch陳述句高
• 當分支比較高時,switch陳述句的執行效率比較高,而且結構更清晰

2.回圈

1.for回圈

• 陳述句結構

for(初始化變數; 條件運算式; 操作運算式 ){
//回圈體
}

執行程序：

• 初始化變數,初始化操作在整個for回圈只會執行一次
• 執行條件運算式,如果為true,則執行回圈體陳述句,否則退出回圈,回圈結束
• 執行操作運算式,此時第一輪結束
• 第二輪開始,直接去執行條件運算式(不在初始化變數),如果為true,則去執行回圈體陳述句,否則退出回圈
• 繼續執行操作運算式,第二輪結束
• 后續跟第二輪一致,直到條件運算式為假,結束整個for回圈

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

斷點除錯:

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

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

2 雙重for回圈

1.雙重 for 回圈概述

回圈嵌套是指在一個回圈陳述句中再定義一個回圈陳述句的語法結構，例如在for回圈陳述句中，可以再嵌套一個for 回圈，這樣的 for 回圈陳述句我們稱之為雙重for回圈，

2.雙重 for 回圈語法

for (外回圈的初始; 外回圈的條件; 外回圈的操作運算式) {
for (內回圈的初始; 內回圈的條件; 內回圈的操作運算式) {
需執行的代碼;
}
}

• 內層回圈可以看做外層回圈的回圈體陳述句
• 內層回圈執行的順序也要遵循for回圈的執行順序
• 外層回圈執行一次,內層回圈要執行全部次數

1. 案例 : 列印五行五列星星

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.外層回圈負責列印五行

3.for 回圈小結

• for 回圈可以重復執行某些相同代碼

• for 回圈可以重復執行些許不同的代碼，因為我們有計數器

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

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

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

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

3 while回圈

while陳述句的語法結構如下：

while (條件運算式) {
// 回圈體代碼
}

執行思路：

• 1 先執行條件運算式，如果結果為 true，則執行回圈體代碼；如果為 false，則退出回圈，執行后面代碼

• 2 執行回圈體代碼

• 3 回圈體代碼執行完畢后，程式會繼續判斷執行條件運算式，如條件仍為true，則會繼續執行回圈體，直到回圈條件為 false 時，整個回圈程序才會結束

注意：

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

4 do-while回圈

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

do {
// 回圈體代碼 - 條件運算式為 true 時重復執行回圈體代碼
} while(條件運算式);

執行思路

• 1 先執行一次回圈體代碼

• 2 再執行條件運算式，如果結果為 true，則繼續執行回圈體代碼，如果為 false，則退出回圈，繼續執行后面代碼

  注意：先再執行回圈體，再判斷，do…while回圈陳述句至少會執行一次回圈體代碼

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 + '個玉米呢');
   }

運行結果：

3.代碼規范

1 識別符號命名規范

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

• 變數的名稱一般用名詞

• 函式的名稱一般用動詞

2 運算子規范

// 運算子的左右兩側各保留一個空格
for (var i = 1; i <= 5; i++) {

   if (i == 3) {
       break; // 直接退出整個 for 回圈，跳到整個for回圈下面的陳述句

   }
   console.log('我正在吃第' + i + '個玉米呢');
}

3.單行注釋規范

for (var i = 1; i <= 5; i++) {

   if (i == 3) {

       break; // 單行注釋前面注意有個空格
   }

   console.log('我正在吃第' + i + '個玉米呢');
}

4 其他規范

關鍵詞、運算子之間后加空格