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

更新时间：2021年04月27日 11:45:04 作者：浅笑·

这篇文章主要介绍了你可能不需要在JavaScript使用switch语句，对switch性能感兴趣的同学，可以参考下

没有 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

以上就是你可能不需要在JavaScript使用switch语句的详细内容，更多关于JavaScript switch语句的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

JS实现页面跳转参数不丢失的方法
这篇文章主要介绍了JS实现页面跳转参数不丢失的方法,结合实例形式对比分析了javascript URL加密函数escape()、encodeURI()与encodeURIComponent()的功能与相关使用技巧,需要的朋友可以参考下
2016-11-11
不用typsescript如何使用类型增强功能
这篇文章主要给大家介绍了关于不用typsescript如何使用类型增强功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
JS字符串统计操作示例【遍历,截取,输出,计算】
这篇文章主要介绍了JS字符串统计操作,结合实例形式分析了javascript字符串的遍历,截取,输出,计算等相关操作技巧与注意事项,需要的朋友可以参考下
2017-03-03
ES6代码转ES5详细教程(babel安装使用教程)
Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行，这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持，这篇文章主要介绍了ES6代码转ES5教程(babel安装使用教程),需要的朋友可以参考下
2023-01-01
CodeMirror实现代码对比功能(插件react vue)
这篇文章主要介绍了CodeMirror实现代码对比功能,用到的插件有vue或者react都需要这一步且同样的下载方式，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-05-05
js实现无缝轮播图插件封装
这篇文章主要为大家详细介绍了js实现无缝轮播图插件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-07-07
用最少的JS代码写出贪吃蛇游戏
本篇文章给大家分享了用嘴简单的JS代码来实现经典贪吃蛇游戏的全部内容，有兴趣的朋友参考学习下。
2018-01-01
localStorage的黑科技-js和css缓存机制
本文主要介绍了localStorage的黑科技-js和css缓存机制的相关知识，具有一定的参考价值，下面跟着小编一起来看下吧
2017-02-02
JavaScript利用el-table实现绘制热度表
这篇文章主要为大家详细介绍了JavaScript如何利用el-table实现绘制热度表，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
2023-03-03
使用Browserify来实现CommonJS的浏览器加载方法
下面小编就为大家带来一篇使用Browserify来实现CommonJS的浏览器加载方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05