[JS] Switch Case 的使用

keywords: 流程控制

Switch Statement @ MDN

const action = 'say_hello';
switch (action) {
  case 'say_hello': {
    // 是去判斷 action === 'say_hello'
    let message = 'hello';
    console.log('message', message);
    break; // 如果這裡沒有 break，則會繼續跑後面的 statement（不需要判斷有沒有符合條件）
  }
  case 'say_hi': {
    // 是去判斷 action === 'say_hi'
    let message = 'hi';
    console.log('message', message);
    break;
  }
  default: {
    break;
  }
}

• Switch statement 做的事是把帶入 switch(action) 中的參數 action ，去和 case 'say_hello' 後面的 expression 用 strict comparison（===）的方式來判斷，如果兩個相等，就會進到 case 後面的 statement。
• 一旦進入某一個 case 後的 statement，就需要使用 break 進行終止，沒有使用 break 的話，符合該條件後面的所有 statement（不論有沒有符合條件）也都會被執行到
• default 一般會放在做後，但這不是硬性規定

函式直接回傳

const COLLECT_ISSUE_SEVERITY = {
  low: 1,
  medium: 2,
  high: 3,
};

const getCollectIssueSeverity = (severityCode) => {
  switch (severityCode) {
    case COLLECT_ISSUE_SEVERITY.low:
      return 'Low';
    case COLLECT_ISSUE_SEVERITY.medium:
      return 'Medium';
    case COLLECT_ISSUE_SEVERITY.high:
      return 'High';
    default:
      return 'Indeterminate';
  }
};

如果會在 case 中使用 let 或 const 定義變數的話，需要在 case 後加上搭括號 {}，參考：Block-scope variables within switch statements @ MDN

不用 Switch 的方式

const STATUS = {
  indeterminate: 0,
  success: 1,
  partialSuccess: 2,
  fail: 3,
  default: 0,
};

function getSuccessStatus(statusCode) {
  const statusSupplement = {
    [STATUS.indeterminate]: {
      title: 'Indeterminate',
      color: 'blue',
    },
    [STATUS.success]: {
      title: 'Success',
      color: 'green',
    },
    [STATUS.partialSuccess]: {
      title: 'Partial Success',
      color: 'yellow',
    },
    [STATUS.fail]: {
      title: 'Fail',
      color: 'red',
    },
    default: {
      title: 'Default Value',
      color: 'gray',
    },
  };

  return statusSupplement[statusCode] || statusSupplement.default;
}

getSuccessStatus(5);

Why I prefer objects over switch statements

switch 和 if 在各情況下的效能比較

Switch statement for greater-than/less-than @ StackOverflow

一般來說 if 的效能都比 switch 好：

if (val < 1000) { /*do something */ } else

switch immediate 的效能次好：

switch (Math.floor(val/1000)) {
  case 0: /* do something */ break;
  case 1: /* do something */ break;
  ...
}

千萬不要用 switch(true) 這樣的寫法：

switch (true) {
  case (0 <= val &&  val < 1000): /* do something */ break;
  ...
}