Several practical JavaScript optimization tips worth knowing

In our work, we can often increase the readability of the code through some small details and make the code look more elegant. This article will share with you some practical JavaScript optimization tips that you can understand at a glance. I hope it will be helpful to you!

「Difficulty:?」「Recommended reading time: 5min」

正片

Reduce if...else noodle code

• Once we write more than twoif ...elsefunction, you should think about whether there is a better optimization method. [Related recommendations:javascript learning tutorial]
• For example, if we now need to calculate the price of Mai Lao’s food based on its name, you might do this.

• This way of writing will make the function body have a lot of conditional judgment statements, and when we want to add a product next time, we need to modify the function Adding anif...elsestatement to the internal logic also violates theopening and closing principleto a certain extent. When we need to add a logic, we should try our best to extend the software entity. Address changes in requirements rather than modifying existing code to accomplish changes.
• This is a very classic optimization method. We can use an organization's data similar toMapto save all products. Here we directly create an object for storage.

• In this way, we don’t need to change the logic ofgetPricenext time we need to add another product. Of course, here is actually More people like to usefoodMapdirectly where they are used. I just gave a simple example to express this idea.
• Then some classmates will ask, if I don’t want tokeyjust use strings, then you can usenew Map, idea It's almost the same, with an additional entity extended to store changes.

Pipeline operations replace redundant loops

• There is such a list of Mai Lao food

• If you want to find the food that belongs to Set 1, how will you find it?
• The above is the method we often used before. Obviously, if we replace it withfilterandmapinstead offorloop, it can not only make The code is more streamlined and the semantics can be made clearer, so that we can see at a glance that the array is firstfilteredand thenreorganized.

find replaces the redundant loop

• Still the above example, if we want to use this food object The use offindcomes into play when searching for specific food in an array based on attribute values.

includes replace redundant loops

• These are similar to the above two details. The function is a built-in function that we do not need to rewrite. Using it skillfully will save a lot of time.
• As we all know, a bowl ofKangfu Laotan pickled cabbage beef noodlescontainspickled cabbage,noodles,beef cubes,Cigarette ButtandFoot Skin, then we want to use a function to verify whether there is foot skin in this surface. How can we write it more concisely?

• Similarly, not onlyKang Fu’s Pickled Cabbage Beef Noodlescan be played like this, all similar ones can be found in the array Operations on specific elements can be called using theincludesfunction.

result return value

• We usually struggle with naming the return value variable when writing functions that have return values, or even For some long functions, we do not use variables but directlyreturn. This habit is actually bad, because we need to clarify the logic again when we refer to this code next time.
• Generally, in a small function, we can useresultas the return value.

Return early

• However, usingresultas the return value above does not apply to all situations. Sometimes we need to end early. Function body to prevent colleagues later from reading redundant programs.

• In the following example, when ourselectedKeydoes not exist, we shouldreturnimmediately, so that we don’t need to continue reading the following code, otherwise we will face For more complex functions, a lot of reading cost will be increased.

Keep the object intact

• Often when we get the data returned by the backend through the request The data will be processed according to some of the attributes. If there are few attributes 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 change, ifgetDocDetailnot only usesiconandcontent, but alsotitlein the future,dateand other attributes, so we might as well pass in the complete object directly, which not only shortens the parameter list but also makes the code more readable.

Smart use of operators

• When we need to create a new variable, sometimes we need to check it When the variable referenced by the value isnullor undefined, you can use the simple writing method.

Written at the end

• First of all, thank you all for reading this. This time, I will share the article here and summarize it. A few very basic optimization methods, I hope they can help everyone.

[Related video tutorial recommendations:web front-end]

The above is the detailed content of Several practical JavaScript optimization tips worth knowing. For more information, please follow other related articles on the PHP Chinese website!