Shulou(Shulou.com)06/03 Report--

This article shows you why you don't need to use switch statements in JavaScript! The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Without switch, there would be no complex code blocks.

Switch is handy: given an expression, we can check whether it matches other expressions in a bunch of case clauses. Consider the following example:

Const name = "Juliana"; switch (name) {case "Juliana": console.log ("She's Juliana"); break; case "Tom": console.log ("She's not Juliana"); break;}

When name is * * "Juliana" * *, we will print a message and immediately interrupt to exit the block. When you use return directly in the case block inside the switch function, you can omit break.

When there is no match, you can use the default option:

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 is also heavily used in Redux reducers (although Redux Toolkit simplifies the template) to avoid generating a large amount of if. Consider the following example:

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;}}

Is there a problem with that? Hardly any. But is there a better choice?

Inspiration from Python

This Tweet from Telmo caught my attention. He shows two "switch" styles, one of which is very close to the pattern in Python.

Python doesn't have a switch, so it gives us a better alternative. First, let's port the code from JavaScript to 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)

In Python, we can use dictionaries to simulate switch. Dict.get () can be used to represent the default statement of switch.

When accessing a key that does not exist, Python triggers a KeyError error:

> > my_dict = {"name": "John", "city": "Rome", "age": 44} > my_dict ["not_here"] # Output: KeyError: 'not_here'

The .get () method is a more secure method because it does not raise an error and you can specify a default value for a key that does not exist:

> my_dict = {"name": "John", "city": "Rome", "age": 44} > my_dict.get ("not_here", "not found") # Output: 'not found'

So, this line in Pytho n:

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

Equivalent to: in JavaScript:

Function authReducer (state = authState, action) {... Default: return state;...}

Replace switch with a dictionary

Think again about the previous example:

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;}}

If we don't use switch, we can do this:

Function authReducer (state = authState, action) {const mapping = {[LOGIN_SUCCESS]: {... state, token: action.payload}, [LOGIN_FAILED]: {... state, error: action.payload}}; return mapping [action.type] | | state;}

Here we use the calculation properties in ES6, where the properties of mapping are calculated instantly based on two constants: LOGIN_SUCCESS and LOGIN_FAILED. Property, we are using object deconstruction here, which is derived from ES9 ((ECMAScript 2018)).

Const mapping = {[LOGIN_SUCCESS]: {... state, token: action.payload}, [LOGIN_FAILED]: {... state, error: action.payload}}

What do you think of this method? It may have some limitations for switch, but it may be a better solution for reducer.

But how does this code perform?

How's the performance?

The performance of switch is better than that of dictionary. We can test it with the following example:

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 the above is why you don't need to use switch statements in JavaScript! Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.