PJCHENder 未整理筆記

[JS] Switch Case 的使用

2019-03-03

[JS] Switch Case 的使用

@(JavaScript)[JavaScript]

keywords: 流程控制

Switch Statement @ MDN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 一般會放在做後,但這不是硬性規定

函式直接回傳

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 中使用 letconst 定義變數的話,需要在 case 後加上搭括號 {},參考:Block-scope variables within switch statements @ MDN

不用 Switch 的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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 好:

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

switch immediate 的效能次好:

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

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

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

掃描二維條碼,分享此文章