共计 3279 个字符,预计需要花费 9 分钟才能阅读完成。
作者: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;done | |
for 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。