乐趣区

关于javascript:你可能不需要在-JavaScript-使用-switch-语句

jiezi

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

退出移动版