強型闖入DenoLand[5] - TS基礎系列之流程判斷與迴圈

在瞭解如何宣告變數之後，就來跟者讀者一起學習撰寫程式時會經常使用到的流程判斷以及迴圈功能吧!

流程判斷

If, else if, else

要做流程判斷，就必須瞭解條件語法這項酷東西。

條件語法的意思是 : 當條件成立時，就執行這些指令。

至於編譯器是如何判斷條件是否成立的呢?先前在變數宣告篇介紹的布林值 (boolean) 就派上用場啦!

情境題 : 假設小明今天想要在 Apple 直營門市購買全新的 Iphone 並且他將 Iphone 11 Pro 作為購買目標。

至於手機容量的大小呢 ? 就取決於荷包的厚度了。

let TwdIsPower: number = 36000; //新台幣就是力量
if(TwdIsPower>48400){
   console.log("就決定是你了! 512GB的Iphone!")
   }
else if(TwdIsPower>41400){
   console.log("就決定是你了! 256GB的Iphone!")
        }
else if(TwdIsPower>35900){
   console.log("就決定是你了! 64GB的Iphone!")     
        }
else{
   console.log("下個月再來吧! 窮鬼!") 
}

根據上面的範例，小明的荷包只有 36000 元，因此他會符合第三項條件，選擇購買 64GB 的 Iphone 。

如果今天的狀況更簡單，也就是非黑即白的狀況。

情境題 : 小明有 36000 元，不過他忘記帶錢了。

let mingHaveMoney: boolean = false; //小明有帶錢ㄇ? 沒有。
if(mingHaveMoney){
    console.log("就決定是你了! 64GB的Iphone!")   
}
else{
   console.log("回家拿錢再來吧! 冒失鬼!") 
}

當今天的條件不是 A 就是 B 時，我們也可以考慮使用更為精簡的寫法:

let mingHaveMoney: boolean = false; //小明有帶錢ㄇ? 沒有。
mingHaveMoney?(console.log("就決定是你了! 64GB的Iphone!")):(console.log("回家拿錢再來吧! 冒失鬼!"));

? 前的表達式為條件， ? 後的表達式為條件成立時執行的程式， : 後的則為條件不成立時執行的程式。

使用 switch

當今天有多個條件 (2個以上)，我們也可以考慮使用 switch 去撰寫條件式。

let TwdIsPower: number = 36000; //新台幣就是力量

switch ( TwdIsPower ){
  case 48400:
    console.log("就決定是你了! 512GB的Iphone!")
    break;
  case 41400:
    console.log("就決定是你了! 256GB的Iphone!")
    break;
  case 35900:
    console.log("就決定是你了! 64GB的Iphone!")
    break;
  default:
    console.log("下個月再來吧! 窮鬼!") 
}

• 當 case 後面的值等於輸入的值，便會執行 case 所包含的程式。
• case 內的程式在結束時都需要以 break 作為結尾，因為在 switch 中，並沒有使用大括號 {} 將不同條件區隔開來。
• 當所有 case 都沒有成立，便會執行 default 。

迴圈

迴圈是計算機科學運算領域的用語，也是一種常見的控制流程。迴圈是一段在程式中只出現一次，但可能會連續執行多次的程式碼。迴圈中的程式碼會執行特定的次數，或者是執行到特定條件成立時結束迴圈，或者是針對某一集合中的所有項目都執行一次。

在一些函式程式語言（例如 Haskell 和 Scheme）中會使用遞迴或不動點組合子來達到迴圈的效果，其中尾端遞迴是一種特別的遞迴，很容易轉換為疊代。

-- wikipedia

簡單來說: 如果我們今天希望能讓程式碼重複的執行某件事，其數值可能會依據重複的次數產生變化 (遞增 or 遞減)並且滿足迴圈跳脫的條件。

for 迴圈

for(初始值; 條件; 結束時變動){
    //do something...
}

情境題 : 半夜睡不著 ? 你應該考慮數羊而不是聽屋頂。

console.log(一隻);
console.log(兩隻);
console.log(三隻);
// ...

诶不是!這樣做好像有一點呆耶，那如果我們用迴圈呢?!

for(var i=1; i=<10; i++){
console.log(`${i}隻`);
}

• 知識點: 樣板字串

解釋 : i 的初始值為 1 ，當滿足 i<11 的條件便會執行 {} 的程式碼並且在該圈結束時對 i 的值加上 1 。

這樣一來，我們就能在終端機看到:

PS C:\Users\IAN\Desktop\ItIronMan2020-Hello-Deno\Example> deno run .\for.ts
Check file:///C:/Users/IAN/Desktop/ItIronMan2020-Hello-Deno/Example/for.ts
1隻
2隻
3隻
4隻
5隻
6隻
7隻
8隻
9隻
10隻

while 迴圈

var i = 0; //初始值
while(條件;){
    //do something...
    i++; //結束時變動
}

筆者將上面的範例使用 while 改寫看看:

var i = 1;
while(i<=10){
	console.log(`${i}隻`);
    i++;
      }

PS C:\Users\IAN\Desktop\ItIronMan2020-Hello-Deno\Example> deno run .\for.ts
Check file:///C:/Users/IAN/Desktop/ItIronMan2020-Hello-Deno/Example/for.ts
1隻
2隻
3隻
4隻
5隻
6隻
7隻
8隻
9隻
10隻

恩，就結果來看，同樣可行!

無窮迴圈

注意 ! 在使用迴圈時必須確保執行條件的正確性，否則會造成無窮迴圈的產生，像是:

while(true){
 console.log("爆炸啦!!!");
}

在上面的範例中，因為條件永遠成立 (True) ，因此，當程式執行時將會從命令列中不斷地噴出爆炸啦!!!。

如果讀者想要玩看看，歡迎服用 XD

此外，之前在學校開設的作業系統課程中，老師要我們測試看看自己的電腦是否是個狠腳色。

因此，要求我們使用 chrome 開啟指定網頁並紀錄電腦能夠同時開啟多少個視窗直到 chrome 崩潰。

如果你真的傻傻的把網頁一個一個打開來，那這份作業你恐怕會做到天亮 XDD

Hint: 這個時候，無窮迴圈就派上用場啦 : )

FuckOs

BTW: 該 Repo 中使用 setInterval() 下去實現，原因是迴圈的噴發速度太快，我的肉眼跟不上 console 噴發訊息的速度 XDDD

如果覺得這個作業很ㄎㄧㄤ，歡迎讀者發 PR 或是按下 star 灌爆我吧 !!!

break 以及 continue

• break 會讓編譯器直接跳過該迴圈
• continue 會讓編譯器跳過一次迴圈，然後繼續執行迴圈。

差別在哪呢? 如果筆者希望數羊數到 100 次，可以這樣做:

var i = 1;
while(i<=100;i++){
	console.log(`${i}隻`);
      }

或是利用 break ，讓它在 i = 100 時跳出迴圈:

var i = 1;
while (true) {
  console.log(`${i}隻`);
  if (i === 100) {
    break;
  }
  i++;
}

如果筆者突然很討厭某一隻羊，不希望牠被數出來呢?

等等，這舉例也太爛了吧 xDDD

那可以使用 continue 達到筆者的需求:

var i = 1;
while (i <= 10) {
  if (i === 3) {
    i++;
    continue;
  }
  console.log(`${i}隻`);
  i++;
}

注意 ! 使用 continue 時需要格外注意 ! 在上面的範例中 :

if (i === 3) {
    i++;
    continue;
  }

做了 i++ 的動作，其目的是為了讓此次迴圈在跳出之前將 i 變數的值增加，以避免下一輪迴圈還是在該區塊執行進而導致無窮迴圈的產生。

無窮迴圈產生了怎麼辦?

如果讀者因為程式構思不全而引發無窮迴圈的發生，只需要在執行程式的命令列按下 ctrl + c 便能解決，不需要太擔心。

當然，你也可以考慮讓電腦重新開機冷靜一下。

延伸閱讀

同樣的事情在不同人眼中可能會有不同的見解、看法。

在讀完本篇以後，筆者也強烈建議大家去看看以下文章，或許會對型別、變數宣告...等觀念有更深層的看法唷！

• 重新認識 JavaScript

  重新認識 JavaScript 是由台灣 Vue.js 社群的大大 - Kuro 所編寫，該系列將許多重要觀念羅列出來並且寫的淺顯易懂，十分牛逼。

  • 流程判斷與迴圈

  • 比較與自動轉型