你可能不須要在 JavaScript 使用 switch 語句！

做者：Valentino Gagliardi
譯者：前端小智
來源：valentinog

點贊再看，微信搜索 【大遷世界】 關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

沒有 switch 就沒有複雜的代碼塊

switch很方便：給定一個表達式，咱們能夠檢查它是否與一堆case子句中的其餘表達式匹配。 考慮如下示例：

const name = "Juliana";

switch (name) {
  case "Juliana":
    console.log("She's Juliana");
    break;
  case "Tom":
    console.log("She's not Juliana");
    break;
}

當 name 爲「Juliana」時，咱們將打印一條消息，並當即中斷退出該塊。 在switch函數內部時，直接在 case 塊使用 return，就能夠省略break。

當沒有匹配項時，能夠使用 default 選項：

const name = "Kris";

switch (name) {
  case "Juliana":
    console.log("She's Juliana");
    break;
  case "Tom":
    console.log("She's not Juliana");
    break;
  default:
    console.log("Sorry, no match");
}

switch在 Redux reducers 中也大量使用（儘管Redux Toolkit簡化了樣板），以免產生大量的if。 考慮如下示例：

const LOGIN_SUCCESS = "LOGIN_SUCCESS";
const LOGIN_FAILED = "LOGIN_FAILED";

const authState = {
  token: "",
  error: "",
};

function authReducer(state = authState, action) {
  switch (action.type) {
    case LOGIN_SUCCESS:
      return { ...state, token: action.payload };
    case LOGIN_FAILED:
      return { ...state, error: action.payload };
    default:
      return state;
  }
}

這有什麼問題嗎?幾乎沒有。可是有沒有更好的選擇呢？

從 Python 得到的啓示

來自 Telmo 的這條 Tweet引發了個人注意。 他展現了兩種「switch」風格，其中一種很是接近Python中的模式。

Python 沒有開關，它給咱們一個更好的替代方法。 首先讓咱們將代碼從 JavaScript 移植到Python：

LOGIN_SUCCESS = "LOGIN_SUCCESS"
LOGIN_FAILED = "LOGIN_FAILED"

auth_state = {"token": "", "error": ""}


def auth_reducer(state=auth_state, action={}):
    mapping = {
        LOGIN_SUCCESS: {**state, "token": action["payload"]},
        LOGIN_FAILED: {**state, "error": action["payload"]},
    }

    return mapping.get(action["type"], state)

在 Python 中，咱們能夠使用字典來模擬switch 。 dict.get() 能夠用來表示 switch 的 default 語句。

當訪問不存在的key時，Python 會觸發一個 KeyError 錯誤：

>>> my_dict = {
    "name": "John", 
    "city": "Rome", 
    "age": 44
    }

>>> my_dict["not_here"]

# Output: KeyError: 'not_here'

.get()方法是一種更安全方法，由於它不會引起錯誤，而且能夠爲不存在的key指定默認值：

>>> my_dict = {
    "name": "John", 
    "city": "Rome", 
    "age": 44
    }

>>> my_dict.get("not_here", "not found")

# Output: 'not found'

所以，Pytho n中的這一行：

return mapping.get(action["type"], state)

等價於 JavaScript中的：

function authReducer(state = authState, action) {
  ...
    default:
      return state;
  ...
}

使用字典的方式替換 switch

再次思考前面的示例：

const LOGIN_SUCCESS = "LOGIN_SUCCESS";
const LOGIN_FAILED = "LOGIN_FAILED";

const authState = {
  token: "",
  error: "",
};

function authReducer(state = authState, action) {
  switch (action.type) {
    case LOGIN_SUCCESS:
      return { ...state, token: action.payload };
    case LOGIN_FAILED:
      return { ...state, error: action.payload };
    default:
      return state;
  }
}

若是不使用 switch 咱們能夠這樣作：

function authReducer(state = authState, action) {
  const mapping = {
    [LOGIN_SUCCESS]: { ...state, token: action.payload },
    [LOGIN_FAILED]: { ...state, error: action.payload }
  };

  return mapping[action.type] || state;
}

這裏咱們使用 ES6 中的計算屬性，此處，mapping的屬性是根據兩個常量即時計算的：LOGIN_SUCCESS 和 LOGIN_FAILED。
屬性對應的值，咱們這裏使用的是對象解構，這裏 ES9((ECMAScript 2018)) 出來的。

const mapping = {
  [LOGIN_SUCCESS]: { ...state, token: action.payload },
  [LOGIN_FAILED]: { ...state, error: action.payload }
}

你如何看待這種方法？它對 switch 來講可能還能一些限制，但對於 reducer 來講多是一種更好的方案。

可是，此代碼的性能如何？

性能怎麼樣？

switch 的性能優於字典的寫法。咱們能夠使用下面的事例測試一下：

console.time("sample");
for (let i = 0; i < 2000000; i++) {
  const nextState = authReducer(authState, {
    type: LOGIN_SUCCESS,
    payload: "some_token"
  });
}
console.timeEnd("sample");

測量它們十次左右,

for t in {1..10}; do node switch.js >> switch.txt;done
for t in {1..10}; do node map.js >> map.txt;done

人才們的 【三連】 就是小智不斷分享的最大動力，若是本篇博客有任何錯誤和建議，歡迎人才們留言，最後，謝謝你們的觀看。

---

原文：https://codeburst.io/alternat...

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

---

交流

文章每週持續更新，能夠微信搜索 【大遷世界 】 第一時間閱讀，回覆 【福利】 有多份前端視頻等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，歡迎Star。