你可能不需要在JavaScript使用switch語句
沒有 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
以上就是你可能不需要在JavaScript使用switch語句的詳細內容,更多關於JavaScript switch語句的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- Vue項目中token驗證登錄(前端部分)
- vue獲取token實現token登錄的示例代碼
- Vue-Element-Admin集成自己的接口實現登錄跳轉
- React各種狀態管理器的解讀及使用方法
- React Redux使用配置詳解