本節大綱

• 控制語法
• 函式的基本概念介紹

控制語法

在這裡要分享一些很常使用的控制語法。

if 指令

通常使用 if 指令的情境是用在，二擇一的情況。另外，if 指令的意思是「若 ... 就 ...，否則就 ...」，然後依照給予的條件為true或false來執行不同的程式區塊。

• if 指令

if (條件式) {
  條件式為 true 時執行此指令區塊
} else {
  條件式為 flase 時執行此指令區塊
}

• 範例如下

var x = 20;
if (x > 15) {
  console.log('變數 x 大於 15')
} else {
  console.log('變數 x 小於 15')
}

• else if 的多條件基本語法

if (條件式 1) {
  條件式 1 為 true 時執行此指令區塊
} else if (條件式 2) {
  條件式 2 為 true 時執行此指令區塊
}
...
} else {
  所有條件皆為 false 時執行此指令區塊
}

• 範例如下

var config = local
if (process.env.application_environment === 'DEVELOP') {
  config = dev
} else if (process.env.application_environment === 'UAT') {
  config = uat
} else if (process.env.application_environment === 'PROD') {
  config = prod
}

要特別注意的是，符合多個條件時，也只會執行第一個符合條件的程式區塊。所以，使用 else if 做條件判斷時，要特別注意條件的順序。

switch 指令

switch 指令現在是我很常使用的指令，主要是因為當使用 else if 指令時，會造成整個程式過於龐大以及增加不好的可讀性，因此，就會採用 switch 指令，來簡化整個判斷的程式以及增加可讀性。

• switch 指令

switch (條件式) {
  case 1:
    符合「條件式 = 值 1」時要執行的指令 (區塊)
  case 2:
    符合「條件式 = 值 2」時要執行的指令 (區塊)
  ...
  default:
    條件式不符合上列所有值時要執行的指令 (區塊)
}

• 要特別說明 switch 指令的處理流程。

  • 首先計算最前面的條件式。
  • 執行比較結果為 true 的 case 區塊。
  • 若是都沒有符合的 case，則呼叫最後的 default。
  • switch 中 case 值是以「===」運算子比較而不是「==」運算子。

• 範例如下。

const exportExcel = useCallback(() => {
  overlayWrapCallback(fetchExportOptions).then((response) => {
    const { message_code = '', result = {} } = response

      switch (message_code) {
        case 'DIRECTLY_DOWNLOAD':
          window.open(result.pre_signed_url)
          break
        case 'EMAIL_REPORT':
          SweetAlert.success({
            title: 'The Export Send Your Email!',
          })
          break
        case 'EXCEED_ROWS_LIMIT':
          SweetAlert.error({
            title: 'Shipments record is over 5000,please contact your account manager!',
          })
          break
        default:
          SweetAlert.error({
            title: 'Something Wrong!'
          })
          break
      }
    }).catch((error) => {
      SweetAlert.error({
        title: 'Something Wrong!', text: error
      })
    })
}, [fetchExportOptions, overlayWrapCallback])

函式的基本概念介紹

function 指令

function 函式名稱 (參數, ...) {
  ... 任意處理程序 ...
  return 回傳值
}

• 要注意的是函式的名稱不可亂取，最好的狀態是，透過該函式的名稱，就可以知道這個函式的作用。
• 通常都是採用 camelCase 的格式命名函式，意思是第一個單字小寫，之後的單字字首皆以大寫表示。
• 回傳值是該函式處裡完成的結果，一般都是寫在該函式的末端 return 指令，用以回傳回傳值。哪 ... 如果是在函式處理的中間先寫了 return 指令，哪會造成之後的程式無法被執行，這點也是要注意的，好佳在我們使用 Visual Studio Code 編輯器，有安裝基本的檢查，故現在發生此問題的機率，已降低許多。