Several practical JavaScript optimization tips worth knowing

How to quickly get started with VUE3.0: Enter the learning

"Difficulty:?" " Recommended reading time: 5 min "

The main video

reduces if...else noodle code.

• Once we write more than two if...else functions, we should Think about whether there is a better optimization method.
• For example, now we need to calculate the price of food in Mai Lao based on the name, you may do this.

• This way of writing will make the function body have a lot of conditional judgment statements. When we want to add a product next time, we need to modify the logic in the function and add an if...else statement. This also violates the opening and closing to a certain extent. The principle is that when we need to add a logic, we should try to solve the change in requirements by extending the software entity instead of modifying the existing code to complete the change.
• This is a very classic optimization method. We can use a data structure similar to Map to save all products. Here we directly create an object to store it.

• In this way, we don't need to change the logic of getPrice when we need to add another product next time. Of course, more people here actually like to use foodMap directly where it is used. I just gave a simple example to express this idea.
• Then some students will ask at this time, what if I don't want to use only strings for key ? Then you can use new Map . The idea is similar, and an additional entity is extended to store changes.

Pipeline operations replace redundant loops.

• There is such a food list of Mai Moulao

• If you want to find the food that belongs to Set 1, how would you find it?
• The above is a method we often used before. Obviously, our replacement with filter and map instead of for loop can not only make the code more streamlined, but also make the semantics clearer. In this way, we can see at a glance that the array is过滤first and then重组.

Find replaces the redundant loop

• or the above example. If we want to find a specific food according to the attribute value in this food object array, the use of find comes out.

includes replaces redundant loops

• . Similar to the above two details, these are all existing functions, that is, built-in functions that do not need to be rewritten by us. Using them skillfully will save a lot of time.
• As we all know, a bowl of Kang Fu Lao Tan pickled beef noodles consists of sauerkraut , noodles , beef cubes , cigarette butts and foot skin . So we want to use a function to verify whether there is foot skin in this noodle. How can we write it more concisely?

• Similarly, not only Kang Fu's sauerkraut and beef noodles can be played like this, but all similar operations of finding specific elements in an array can be called using the includes function.

result return value

• When we write some functions with return values, we often struggle with naming the return value variable. Even for some long functions, we do not use variables but directly return . This habit is actually bad. Because we need to clarify the logic again when we refer to this code next time.
• Usually, in a small function, we can use result as the return value.

Early return

• However, using result as the return value above does not apply to all situations. Sometimes we need to end the function body early to prevent subsequent colleagues from reading redundant programs.

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

To keep the object intact

• , often when we get the data returned by the backend through a request, it will be processed according to some of the attributes. If there are few attributes that need to be processed, many students will be accustomed to using the first method.
• But in fact, this habit is bad, because when you are not sure whether this function needs to add dependency attributes in the future, you should keep the integrity of the object. As I mentioned in my last article, learn to embrace changes . If getDocDetail is not limited to To use icon and content , there may be attributes such as title and date in the future, so we might as well pass in the complete object directly, which will not only shorten the parameter list but also make the code more readable.

Clever use of operators

• When we need to create a new variable, and sometimes we need to check whether the variable referenced by its value is null or undefined, we can use simple writing.

At the end of the writing

• , first of all, I would like to thank you all for reading this. I will share this article here and summarize some very basic optimization methods. I hope it can help everyone.

[Recommended related video tutorials: web front-end]

The above are the details of several practical JavaScript optimization tips worth knowing. For more, please pay attention to other related articles on the PHP Chinese website!