JavaScript switch 語句

switch 語句評估一個(gè)表達(dá)式，將表達(dá)式的值與case子句匹配，并執(zhí)行與該情況相關(guān)聯(lián)的語句?！?MDN

switch 是另一種控制流程的方式，根據(jù)條件執(zhí)行不同的代碼塊。

能用 switch 實(shí)現(xiàn)的都可以用 if 實(shí)現(xiàn)。

1. 基本語法

  switch (表達(dá)式) {
    case 表達(dá)式結(jié)果為值1的時(shí)候:
      做的事情;
      break;
    case 表達(dá)式結(jié)果為值2的時(shí)候:
      做的事情;
      break;
    case ...:
      做的事情;
      break;
    case 表達(dá)式結(jié)果為值n的時(shí)候:
      做的事情;
      break;
    default:
      上面一個(gè)情況都沒中的時(shí)候做的事情;
  }

switch 語句在執(zhí)行的時(shí)候會(huì)先接受一個(gè)表達(dá)式，最后根據(jù)表達(dá)式的結(jié)果進(jìn)行條件的匹配，即 case 后面的值。

var num = 3;

switch (num + 1) {
  case 2:
    console.log('case的值是2');
    break;
  case 3:
    console.log('case的值是3');
    break;
  case 4:
    console.log('case的值是4');
  case 5:
    console.log('case的值是5');
  default:
    console.log('沒有匹配到值');
}

num 為 3 ，所以加上 1 之后為 4 ，case 匹配到的就是 4 ，所以輸出了case的值是4，但是緊接著后面的case的值是5與沒有匹配到值也被輸出了。
這是因?yàn)榉种?nèi)碰到 break 才會(huì)中斷執(zhí)行，如果不中斷，即便后面的條件不匹配了，里面的代碼塊還是會(huì)被繼續(xù)執(zhí)行。

需要注意的是 case 后面的值與表達(dá)式的結(jié)果在比較的時(shí)候是使用嚴(yán)格相等(===)的。

2. default 的位置可以不固定

default 不一定要寫在末尾，但通常推薦寫在末尾。

switch (1 > 2) {
  default:
    console.log('我是default');
  case true:
    console.log('1 不可能大于 2，肯定是代碼寫錯(cuò)了');
    break;
}

在所有case都不匹配的時(shí)候，就會(huì)回去走 default 。

需要注意的是，default 語句塊里也需要加 break ，不然會(huì)繼續(xù)往下執(zhí)行，直至碰到 break ，大部分情況下只有末尾的分支不需要加 break ，因?yàn)橐呀?jīng)是最后一個(gè)分支了。

3. 靈活使用 break

switch 語句與 break 的特性結(jié)合可以很靈活。

如以下場景：

• 服務(wù)端返回了用戶信息，當(dāng)用戶的 VIP 等級為 1、2、3 的時(shí)候，顯示初級VIP，VIP 等級為 4、5 的時(shí)候，顯示中級 VIP，當(dāng) VIP 等級為 6 的時(shí)候，顯示高級 VIP，否則顯示普通會(huì)員。

var user = { vip: 1 };

switch (user.vip) {
  case 1:
  case 2:
  case 3:
    console.log('初級vip');
    break;
  case 4:
  case 5:
    console.log('中級vip');
    break;
  case 6:
    console.log('高級vip');
    break;
  default:
    console.log('普通會(huì)員');
}

// 輸出："初級vip"

利用沒有 break 就會(huì)往下執(zhí)行的特點(diǎn)，可以給條件歸類。相比 if 語句，使用 switch 有更強(qiáng)的表現(xiàn)力。

• 頁面中有一排圖片，共 4 張，當(dāng)用戶選擇了某一張后，隱藏這張圖片前面的所有圖片，取消選擇后顯示所有圖片。

function showImage(index) {
  console.log('顯示第' + index + '圖片');
}

function hideAllImage() {
  console.log('先隱藏所有圖片');
}

// 點(diǎn)擊事件
function event(e) {
  var selected = e.index; // 0表示沒有選擇 1表示選擇第一張 以此類推

  hideAllImage();

  switch (selected) {
    default:
    case 1:
      showImage(1);
    case 2:
      showImage(2);
    case 3:
      showImage(3);
    case 4:
      showImage(4);
  }
}

event({ index: 0 });

其實(shí)這個(gè)需求，使用 switch 并不是最適合的場景，假如圖片一多，上百上千張，這種方式就顯得有些愚蠢了。

這提供這種實(shí)現(xiàn)方式不是為了顯示他有多好，而是為了能在思考問題的時(shí)候，可以想到有這樣的方案，來評判是不是更適合現(xiàn)有業(yè)務(wù)場景。

沒有最好的方案，只有最適合的方案。

4. 小結(jié)

switch 語句可以做到的，if 語句都可以做到，實(shí)際開發(fā)應(yīng)結(jié)合具體業(yè)務(wù)做選擇。

依據(jù) switch 的 break 和 default 特性，常?？梢院芊奖愕膶?shí)現(xiàn)其他方式需要大量額外代碼的需求。