作者：ValentinoGagliardi译者：前端小智来源：valentinog点赞阅读，微信搜索【走向世界的大招】关注这个没有大厂背景，但心态积极的人.本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。没有switch就没有复杂的代码块switch很方便：给定一个表达式，我们可以检查它是否与一堆case子句中的其他表达式匹配。考虑以下示例：constname="Juliana";switch(name){case"Juliana":console.log("She'sJuliana");休息;case"Tom":console.log("她不是朱莉安娜");break;}当name是“Juliana”时，我们将打印一条消息并立即跳出块。在switch函数内部，直接在case块中使用return来省略break。当没有匹配时，可以使用默认选项：constname="Kris";switch(name){case"Juliana":console.log("She'sJuliana");休息;case"Tom":console.log("她不是朱莉安娜");休息;default:console.log("Sorry,nomatch");}switch在Reduxreducers中也大量使用（尽管ReduxToolkit简化了样板文件）以避免很多ifs。考虑以下示例：constLOGIN_SUCCESS="LOGIN_SUCCESS";constLOGIN_FAILED="LOGIN_FAILED";constauthState={令牌：“”，错误：“”，};functionauthReducer(state=authState,action){switch(action.type){caseLOGIN_SUCCESS:return{...state,token:action.payload};案例LOGIN_FAILED:return{...state,error:action.payload};默认值：返回状态；这有什么问题吗？几乎没有。但是有更好的选择吗？来自Python的灵感Telmo的这条推文引起了我的注意。他展示了两种“开关”样式，其中一种非常接近Python中的模式。Python没有开关，它给了我们一个更好的选择。首先让我们将代码从JavaScript移植到Python：mapping={LOGIN_SUCCESS:{**state,"token":action["payload"]},LOGIN_FAILED:{**state,"error":action["payload"]},}returnmapping.get(action[”type"],state)在Python中，我们可以使用字典来模拟开关。dict.get()可以用来表示switch的默认语句。Python在访问不存在的键时会引发KeyError：>>>my_dict={"name":"John","city":"Rome","age":44}>>>my_dict["not_here"]#输出：KeyError：'not_here'。get()方法是一种更安全的方法，因为它不会引发错误并且可以为不存在的键指定默认值：>>>my_dict={"name":"John","city":"Rome","age":44}>>>my_dict.get("not_here","notfound")#Output:'notfound'因此，Python中的这一行：returnmapping.get(action["type"],state)等效于JavaScript：functionauthReducer(state=authState,action){...default:returnstate;...}再次使用字典替换switch考虑前面的示例：constLOGIN_SUCCESS="LOGIN_SUCCESS";constLOGIN_FAILED="LOGIN_FAILED";constauthState={令牌：“”，错误：“”，};functionauthReducer(state=authState,action){switch(action.type){caseLOGIN_SUCCESS:return{...state,token:action.payload};案例LOGIN_FAILED:return{...state,error:action.payload};默认值：返回状态；如果我们不使用switch我们可以这样做：functionauthReducer(state=authState,action){constmapping={[LOGIN_SUCCESS]:{...state,token:action.payload},[LOGIN_FAILED]:{...state,error:action.payload}};返回映射[action.type]||state;}这里我们使用ES6中的计算属性。在这里，映射属性是根据两个常量即时计算的：LOGIN_SUCCESS和LOGIN_FAILED属性对应的值，我们这里使用的是对象解构，这里ES9（（ECMAScript2018））就出来了。constmapping={[LOGIN_SUCCESS]:{...state,token:action.payload},[LOGIN_FAILED]:{...state,error:action.payload}}您如何看待这种方法？它可能对switch有点限制，但它可能是reducer的更好解决方案。但是这段代码的性能如何？表现如何？switch的性能优于dictionary。我们可以用下面的例子来测试：console.time("sample");for(leti=0;i<2000000;i++){constnextState=authReducer(authState,{type:LOGIN_SUCCESS,payload:"some_token"});}console.timeEnd("示例");测量它们大约十次，因为tin{1..10}；donodeswitch.js>>switch.txt;donefortin{1..10};donodemap.js>>map.txt;done达人的【三通】是小智持续分享的最大动力。本博客如有错误或建议，欢迎达人留言。最后谢谢大家的观看。原文：https://codeburst.io/alternat...无法实时获知代码部署后可能出现的bug。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便给大家推荐一款好用的BUG监控工具Fundebug。交流文章每周更新一次。可以微信搜索【大千世界】立即阅读，回复【福利】还有很多前端视频等着你。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，欢迎Star。
