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

This article mainly shows you the "practical JavaScript optimization tips what are", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what are the practical JavaScript optimization tips" this article.

Reduce if...else Noodle Code

Once we write more than two if...else functions, we should think about whether there is a better optimization method. [related recommendation: javascript Learning tutorial]

For example, now you need to let us calculate the food price of McGrady according to the name, and you might do so.

This way of writing will allow the function body to have a lot of conditional judgment statements, and the next time we want to add a commodity, we need to modify the logic in the function to add an if...else statement, which to a certain extent violates the opening and closing principle, when we need to add a logic, we should try our best to expand the software entity to solve the requirement change, rather than by modifying the existing code to complete the change.

This is a classic optimization method, we can use a Map-like mechanism to store all the goods, here we directly create an object to store.

In this way, we do not need to change the logic of getPrice when we need to add another item next time. Of course, here more people like to use foodMap directly where they use it. I just give a simple example to illustrate this idea.

So at this time, some students will ask, if I don't want key to only use strings, then you can use new Map, the idea is similar, expand an additional entity to store changes.

Pipeline operation replaces redundant cycle

There is such a list of McLaugh's food.

If you want to find out the food that belongs to package 1, how will you find it?

Obviously, using filter and map instead of the for loop can not only make the code more concise, but also make the semantics more clear, so we can see that the array is filtered and then reorganized.

Find replaces redundant loops

Again, in the above example, find is useful if we want to find a specific food by attribute value in this array of food objects.

Includes replaces redundant loops

Similar to the above two details, these are existing functions, that is, we do not need to rewrite the built-in function, clever use of it will save a lot of time.

As we all know, a bowl of Kang Fu Laotan beef noodles is composed of sauerkraut, noodles, beef, cigarette butts and foot skin, so we want to use a function to prove whether there is foot skin in this noodle. How can we write it more succinctly?

Similarly, it's not just Kang's sauerkraut beef noodles that can be played this way, but all similar operations that find specific elements in the array can be called using the includes function.

Result return value

We usually struggle with the naming of return value variables when we write some functions with return values, and even for some long functions, we don't use variables but return directly, which is actually a bad habit, because we need to re-clarify the logic next time we refer to this code.

Typically, in a small function, we can use result as the return value.

Return ahead of time

However, the above use of result as the return value is not suitable for all cases, and there are often times when we need to end the function body in advance to prevent later colleagues from reading redundant programs.

In the following example, we should return immediately when selectedKey does not exist, so that we do not have to continue to read the following code, otherwise it will increase a lot of reading costs when faced with more complex functions.

Keep the object intact

Often when we get the data returned by the backend through the request, it will be processed according to some of these attributes, and if there are few attributes to deal with, many students will be used to using the first method.

But in fact, this habit is not good, because when you are not sure whether this function needs to increase the dependency properties in the future, you should keep the object intact, as I mentioned in the last article, learn to embrace changes, if getDocDetail not only need to use icon and content, but there may be attributes such as title,date in the future, so we might as well directly pass in the complete object, which will not only increase and shorten the parameter list but also make the code easier to read.

Skillful use of operators

When we need to create a new variable, we sometimes need to check whether the variable referenced for its value is null or undefined.

These are all the contents of this article entitled "what are the practical tips for JavaScript optimization?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.