iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
自我挑戰組

網頁前端工程探討系列 第 28

JavaScript條件控制

  • 分享至 

  • xImage
  •  

程式的執行基本上是循序漸進的。程式的執行未必一定是由上到下,一行一行的執行。
有時內容會因為判斷,或是設定條件來執行不同的內容,也就是控制程式的流程。
根據關係運算或邏輯運算的條件式,來判斷程式執行的流程,依判斷的結果執行不同的程式區塊。
選擇結構是經常使用的一種控制結構,JavaScript提供了「if…else」以及「switch...case」兩種選擇
讓程式的執行有了更多的彈性和運用。

if…else條件敘述
如果條件運算式有兩種以上不同的選擇,則可以使用 if-else 敘述
格式如下

if (條件運算式) { 條件敘述; } else { 條件敘述; }:

if…else條件敘述主要是判斷條件是否成立。當if條件運算式的值成立(true)時,才執行if 程式敘述內的程式,並跳過 else 內的敘述;若是當 if 條件運算式的值不成立 (false),則執行 else 內的程式敘述。

switch...case 多項選擇條件敘述
switch是屬於一個多項選擇條件敘述,它會定義一個自訂變數,而每一個執行區塊會以case帶一個條件值為開頭。當該值等於switch所定義的變數時,即執行這個case中的程式區塊。
簡言之,想要根據變數或運算式的值來決定執行的程式時,就可以使用 switch...case 來敘述。

語法格式如下

switch (變數或運算式)
{
  case value1:
    程式敘述;
    break;
  case value2:
    程式敘述;****
    break;
    .
    .
  case valueN:
    程式敘述;
    break;
  default:
    程式敘述;
}


switch敘述中可以有任意數量的case敘述,value1-valueN是指用來比對的值。

在格式中有幾項要注意的:

  1. switch後的自訂變數與case後的條件值,資料形態要一致,才能用來比較。
  2. 在每一個case設定條件值該行最後要加上「:」。
  3. 每個程式區塊最後要以break指令結束,此時程式會自動跳到程式區塊的結構外繼續完成動作。

上一篇
JavaScript陣列
下一篇
JavaScript迴圈
系列文
網頁前端工程探討30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言