作者：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;donefor 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。