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

In this issue, the editor will bring you about how to make the function simple and clear in JavaScript refactoring skills. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

This article is reproduced from the official account "Da Qian World" of Wechat. If you reprint this article, please contact the official account of "Da Qian World".

JavaScript is an easy-to-learn programming language, and it's easy to write programs that run and perform certain operations. However, it is difficult to write a clean piece of JavaScript code.

Use deconstruction for object parameters

If we want the function to take a lot of parameters, then we should use objects. On this basis, we can use deconstruction syntax to extract the parameters we need.

For example, for object parameters, we might use:

Const greet = (obj) = > {return `${obj.greeting}, ${obj.firstName} ${obj.lastName}`;}

With the above syntax, we can use deconstruction to be more elegant:

Const greet = ({greeting, firstName, lastName}) = > {return `${greeting}, ${firstName} ${lastName}`;}

In this way, we can write a lot less repetitive things, and the naming will be clearer.

Named callback function

Good naming makes it easier to read the code, and so is the naming of callback functions, such as the following bad naming methods:

Const arr = [1,2,3] .map (a = > a * 2)

We can name it separately like this:

Const double = a = > a * 2; if (score = 100 | | remainingPlayers = 1 | | remainingPlayers = 0) {quitGame ();} const arr = [1,2,3] .map (double)

Now we know that our callback function is actually used to double each element of the original array.

Make conditional sentences descriptive

By writing conditional expressions in the conditional statements of your own functions, you can make conditional statements more descriptive.

For complex conditional judgments, we can use functions alone to express them, which makes conditional statements more descriptive, such as the following code:

If (score = 100 | | remainingPlayers = 1 | | remainingPlayers = 0) {quitGame ();}

When there are many conditions, we can use functions to express:

Const winnerExists = () = > {return score = 100 | | remainingPlayers = 1 | | remainingPlayers = 0} if (winnerExists ()) {quitGame ();}

In this way, we know that these conditions are conditions to check whether there is a winner in the game code.

In the first example, we have a long expression in parentheses, and most people probably don't know what it's judging. But in the second example, once we put it in a named function, we know what it's probably judging.

Having a named function in a conditional statement is much clearer than having a bunch of Boolean expressions.

Replace switch statements with Map or Object

Because the switch statement is very long, it is easy to make mistakes. So, if possible, we should replace them with shorter code. Many switch statements can be replaced with map or object. For example, if we have the following switch statement:

Const getValue = (prop) = > {switch (prop) {case'asides: {return 1;} case'baked: {return 2;} case'cages: {return 3;} const val = getValue ('a')

We can replace it with object or map, as follows:

Const obj = {a: 1, b: 2, c: 3} const val = obj ['a']

As we can see, the switch syntax is very long. We need to nest multiple blocks with multiple return statements just to get the return value of a given propl value.

Instead of using objects, we only need one object:

Const obj = {a: 1, b: 2, c: 3}

Another advantage of using objects is that they do not have to be valid identifiers for keys, which adds more flexibility.

We can also replace objects with map, as follows:

Const map = new Map ([['asides, 1], [' baked, 2], ['clocked, 3]]) const val = map.get (' a')

As we can see, the code is also much shorter when using Map. By passing an array, each item in the array contains keys and values. Then, we only use the get method of the Map instance to get the value from the key.

One of the advantages of Map over objects is that we can use other values such as numbers, Boolean values, or objects as keys. An object can only have a string or symbol as a key.

Use deconstruction syntax to make object parameters clearer and shorter. In this way, you can optionally access properties as variables.

You can make a conditional expression more descriptive by putting it in its own named function. Similarly, we should name the callback function to make it easier to read the code.

Finally, you should replace switch statements with Map and Object whenever possible.

This is how to make the function simple and clear in the JavaScript refactoring skills shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, 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.