你可能不需要在 JavaScript 使用 switch 语句!

开发 前端
switch很方便:给定一个表达式,我们可以检查它是否与一堆case子句中的其他表达式匹配。

本文转载自微信公众号「大迁世界」,转载本文请联系大迁世界公众号。

没有 switch 就没有复杂的代码块

[[335252]]

switch很方便:给定一个表达式,我们可以检查它是否与一堆case子句中的其他表达式匹配。考虑以下示例:

  1. const name = "Juliana"
  2.  
  3. switch (name) { 
  4.   case "Juliana": 
  5.     console.log("She's Juliana"); 
  6.     break; 
  7.   case "Tom": 
  8.     console.log("She's not Juliana"); 
  9.     break; 

当 name 为**“Juliana”**时,我们将打印一条消息,并立即中断退出该块。在switch函数内部时,直接在 case 块使用 return,就可以省略break。

当没有匹配项时,可以使用 default 选项:

  1. const name = "Kris"
  2.  
  3. switch (name) { 
  4.   case "Juliana": 
  5.     console.log("She's Juliana"); 
  6.     break; 
  7.   case "Tom": 
  8.     console.log("She's not Juliana"); 
  9.     break; 
  10.   default: 
  11.     console.log("Sorry, no match"); 

switch在 Redux reducers 中也大量使用(尽管Redux Toolkit简化了样板),以避免产生大量的if。考虑以下示例:

  1. const LOGIN_SUCCESS = "LOGIN_SUCCESS"
  2. const LOGIN_FAILED = "LOGIN_FAILED"
  3.  
  4. const authState = { 
  5.   token: "", 
  6.   error: "", 
  7. }; 
  8.  
  9. function authReducer(state = authState, action) { 
  10.   switch (action.type) { 
  11.     case LOGIN_SUCCESS: 
  12.       return { ...state, token: action.payload }; 
  13.     case LOGIN_FAILED: 
  14.       return { ...state, error: action.payload }; 
  15.     default: 
  16.       return state; 
  17.   } 

这有什么问题吗?几乎没有。但是有没有更好的选择呢?

从 Python 获得的启示

来自 Telmo 的这条 Tweet引起了我的注意。他展示了两种“switch”风格,其中一种非常接近Python中的模式。

Python 没有开关,它给我们一个更好的替代方法。首先让我们将代码从 JavaScript 移植到Python:

  1. LOGIN_SUCCESS = "LOGIN_SUCCESS" 
  2. LOGIN_FAILED = "LOGIN_FAILED" 
  3.  
  4. auth_state = {"token": "", "error": ""} 
  5.  
  6.  
  7. def auth_reducer(state=auth_stateaction={}): 
  8.     mapping = { 
  9.         LOGIN_SUCCESS: {**state, "token": action["payload"]}, 
  10.         LOGIN_FAILED: {**state, "error": action["payload"]}, 
  11.     } 
  12.  
  13.     return mapping.get(action["type"], state) 

在 Python 中,我们可以使用字典来模拟switch 。dict.get() 可以用来表示 switch的 default 语句。

当访问不存在的key时,Python 会触发一个 KeyError 错误:

  1. >>> my_dict = { 
  2.     "name": "John",  
  3.     "city": "Rome",  
  4.     "age": 44 
  5.     } 
  6.  
  7. >>> my_dict["not_here"] 
  8.  
  9. # Output: KeyError: 'not_here' 

.get()方法是一种更安全方法,因为它不会引发错误,并且可以为不存在的key指定默认值:

  1. >>> my_dict = { 
  2.     "name": "John",  
  3.     "city": "Rome",  
  4.     "age": 44 
  5.     } 
  6.  
  7. >>> my_dict.get("not_here", "not found") 
  8.  
  9. # Output: 'not found' 

因此,Pytho n中的这一行:

  1. return mapping.get(action["type"], state) 

等价于 JavaScript中的:

  1. function authReducer(state = authState, action) { 
  2.   ... 
  3.     default: 
  4.       return state; 
  5.   ... 

使用字典的方式替换 switch

再次思考前面的示例:

  1. const LOGIN_SUCCESS = "LOGIN_SUCCESS"
  2. const LOGIN_FAILED = "LOGIN_FAILED"
  3.  
  4. const authState = { 
  5.   token: "", 
  6.   error: "", 
  7. }; 
  8.  
  9. function authReducer(state = authState, action) { 
  10.   switch (action.type) { 
  11.     case LOGIN_SUCCESS: 
  12.       return { ...state, token: action.payload }; 
  13.     case LOGIN_FAILED: 
  14.       return { ...state, error: action.payload }; 
  15.     default: 
  16.       return state; 
  17.   } 

如果不使用 switch 我们可以这样做:

  1. function authReducer(state = authState, action) { 
  2.   const mapping = { 
  3.     [LOGIN_SUCCESS]: { ...state, token: action.payload }, 
  4.     [LOGIN_FAILED]: { ...state, error: action.payload } 
  5.   }; 
  6.  
  7.   return mapping[action.type] || state; 

这里我们使用 ES6 中的计算属性,此处,mapping的属性是根据两个常量即时计算的:LOGIN_SUCCESS 和 LOGIN_FAILED。属性对应的值,我们这里使用的是对象解构,这里 ES9((ECMAScript 2018)) 出来的。

  1. const mapping = { 
  2.   [LOGIN_SUCCESS]: { ...state, token: action.payload }, 
  3.   [LOGIN_FAILED]: { ...state, error: action.payload } 

你如何看待这种方法?它对 switch 来说可能还能一些限制,但对于 reducer 来说可能是一种更好的方案。

但是,此代码的性能如何?

性能怎么样?

switch 的性能优于字典的写法。我们可以使用下面的事例测试一下:

  1. console.time("sample"); 
  2. for (let i = 0; i < 2000000; i++) { 
  3.   const nextState = authReducer(authState, { 
  4.     type: LOGIN_SUCCESS, 
  5.     payload: "some_token" 
  6.   }); 
  7. console.timeEnd("sample"); 

测量它们十次左右,

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

 

责任编辑:赵宁宁 来源: 大迁世界
相关推荐

2019-12-31 13:12:14

5G智能手机操作系统

2022-04-21 08:01:34

React框架action

2022-09-27 15:03:43

Java测试工具

2014-09-30 16:03:35

iStick容量iPhone

2022-03-31 06:18:21

WiFi 6EWiFi 6

2018-01-29 13:18:42

前端JavaScript

2017-10-30 10:43:20

CTO技术职业

2012-08-23 09:50:07

测试测试人员软件测试

2014-09-24 09:31:31

Dockersshd

2010-11-23 10:55:47

跳槽

2022-06-07 17:01:31

UI框架前端

2020-07-29 19:40:36

Vue 3.0Vue前端

2021-05-26 10:19:01

jreJava应用程序

2024-01-26 11:19:36

CIOIT领导者企业

2019-07-15 08:00:00

AI人工智能

2021-05-07 15:18:26

比特币禁令监管

2017-03-13 13:54:40

戴尔

2024-03-01 11:32:22

Vue3APIVue.js

2020-09-18 14:01:21

vue3.0

2009-11-23 12:45:22

点赞
收藏

51CTO技术栈公众号