沒(méi)有 switch 就沒(méi)有復(fù)雜的代碼塊

switch很方便：給定一個(gè)表達(dá)式，我們可以檢查它是否與一堆case子句中的其他表達(dá)式匹配。 考慮以下示例：

const name = "Juliana";

switch (name) {

 case "Juliana":

   console.log("She's Juliana");

   break;

 case "Tom":

   console.log("She's not Juliana");

   break;

}

當(dāng) name 為“Juliana”時(shí)，我們將打印一條消息，并立即中斷退出該塊。 在switch函數(shù)內(nèi)部時(shí)，直接在 case 塊使用 return，就可以省略break。

當(dāng)沒(méi)有匹配項(xiàng)時(shí)，可以使用 default 選項(xiàng)：

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簡(jiǎn)化了樣板），以避免產(chǎn)生大量的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;

 }

}

這有什么問(wèn)題嗎?幾乎沒(méi)有。但是有沒(méi)有更好的選擇呢？

從 Python 獲得的啟示

來(lái)自 Telmo 的這條 Tweet引起了我的注意。 他展示了兩種“switch”風(fēng)格，其中一種非常接近Python中的模式。

Python 沒(méi)有開(kāi)關(guān)，它給我們一個(gè)更好的替代方法。 首先讓我們將代碼從 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 中，我們可以使用字典來(lái)模擬switch 。 dict.get() 可以用來(lái)表示 switch 的 default 語(yǔ)句。

當(dāng)訪問(wèn)不存在的key時(shí)，Python 會(huì)觸發(fā)一個(gè) KeyError 錯(cuò)誤：

>>> my_dict = {

   "name": "John",

   "city": "Rome",

   "age": 44

   }

>>> my_dict["not_here"]

# Output: KeyError: 'not_here'

.get()方法是一種更安全方法，因?yàn)樗粫?huì)引發(fā)錯(cuò)誤，并且可以為不存在的key指定默認(rèn)值：

>>> 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)

等價(jià)于 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 中的計(jì)算屬性，此處，mapping的屬性是根據(jù)兩個(gè)常量即時(shí)計(jì)算的：LOGIN_SUCCESS 和 LOGIN_FAILED。

屬性對(duì)應(yīng)的值，我們這里使用的是對(duì)象解構(gòu)，這里 ES9((ECMAScript 2018)) 出來(lái)的。

const mapping = {

 [LOGIN_SUCCESS]: { ...state, token: action.payload },

 [LOGIN_FAILED]: { ...state, error: action.payload }

}

你如何看待這種方法？它對(duì) switch 來(lái)說(shuō)可能還能一些限制，但對(duì)于 reducer 來(lái)說(shuō)可能是一種更好的方案。

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

性能怎么樣？

switch 的性能優(yōu)于字典的寫(xiě)法。我們可以使用下面的事例測(cè)試一下：

console.time("sample");

for (let i = 0; i < 2000000; i++) {

 const nextState = authReducer(authState, {

   type: LOGIN_SUCCESS,

   payload: "some_token"

 });

}

console.timeEnd("sample");

測(cè)量它們十次左右,

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

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

clipboard.png

人才們的 【三連】 就是小智不斷分享的最大動(dòng)力，如果本篇博客有任何錯(cuò)誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。

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

代碼部署后可能存在的BUG沒(méi)法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)