沒有 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函式內部時

當沒有匹配項時，可以使用 default 選項：

const name = "Kris";

switch (name) {
  case "Juliana":
    console.log("She's Juliana");
    break;
  case "Tom":
    console.log("She's not Juliana");
    break;
  dehttp://www.cppcns.comfault:
    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.ty程式設計客棧pe) {
    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", 

    "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: "",action) {
  switch (action.type) {
    case LOGIN_SUCCESS:
      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)) 出http://www.cppcns.com來的。

const mapping = {
  [LOGIN_SUCCESS]: { ...state,token: action.payload },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

以上就是你可能不需要在JavaScript使用switch語句的詳細內容，更多關於JavaScript switch語句的資料請關注我們其它相關文章！