☀ ️ preface

  • Hello everyone, I’m Lou. In our work, we can often improve the readability of the code through some small details, so that the code looks more elegant.
  • This time, I’m going to share with you some practical things that you can see at onceJavaScriptOptimize tips.
  • “Difficulty: 🌟” “Recommended reading length :5min“

😎 feature

Reduce the if… Else noodle code

  • Once we write more than twoif... elseYou should think about whether there is a better way to optimize.
  • For example, if you want us to calculate the price of food in McGraw by name, you might do this.

  • This leaves the body of the function with a lot of conditional statements, and the next time we want to add an item we need to modify the logic inside the function to add oneif... elseStatement, this also violates to some extentThe open closed principleWhen we need to add a logic, we should try to solve the requirement change by extending the software entity, rather than by modifying the existing code to accomplish the change.
  • This is a classic optimization approach, and we can use a similar oneMapOrganization data to hold all goods, here we directly create an object to store.

  • So we don’t have to change it the next time we need to add another itemgetPriceOf course, there are actually more people like to use directly in the place where it is usedfoodMapI’m just giving you a simple example of this idea.
  • And that’s when the students will ask, if I don’t want tokeyJust strings, that’s where you can use themnew MapThe idea is similar, extend an additional entity to store changes.

Pipeline operations replace redundant loops

  • There’s a list of McNuggets

  • If you wanted to find something that was set number one, how would you do it?
  • This is what we used to do all the time, so obviously we’re going to use it insteadfilterwithmapTo replaceforLooping not only makes the code leaner, but it also makes the semantics more explicit, so that we can see the array firstfilteragainrestructuring.

Find replaces redundant loops

  • Again, if we want to find a particular food in this array of food objects by attribute value,findThat’s where the usefulness comes in.

Includes replaces redundant loops

  • So these are all functions that are already there that we don’t have to rewrite as built-in functions, so it’s going to save us a lot of time.
  • As we all know, a bowl of Kang Fu Lao tan sauerkraut beef noodles has sauerkraut, noodles, beef grains, cigarette butts and foot skin composition, then we want to use the function to confirm whether there is a foot skin inside this surface how we write will be more concise?

  • Again, more than thatKang fu’s pickled cabbage beef noodlesYou can play around with that, and all the operations like finding a particular element in an array can workincludesFunction to call.

The result return value

  • We often struggle to name functions with return values, or even long functions without using variablesreturnThis is actually a bad habit, because the next time we refer to the code we will have to rethink the logic.
  • In general, in a small function, we can useresultAs the return value.

Return early

  • However, using result as the return value above is not suitable for all cases, and there are often times when we need to terminate the function body early to avoid later colleagues reading unnecessary programs.

  • In the following example, we should return immediately if the selectedKey does not exist, so that we do not have to continue reading the following code, which would add a lot of reading costs to more complex functions.

Keep objects intact

  • Often when we get the data back from the request end, we will process it according to some of the attributes. If there are few attributes to process, many students will be used to the first method.
  • But it’s actually a bad habit, because you should keep the object intact when you’re not sure if the function will need to add dependencies later. As I mentioned in my last article,Learn to embrace change, ifgetDocDetailNot just to useiconandcontentAnd there may be moretitle.date“, so we can just pass in the full object, not only adding the shortened argument list but also making the code more readable.

Use clever operators

  • When we need to create a new variable, we sometimes need to check that the variable referenced for its value isnullOr undefined, you can use the shorthand notation.

👋🏻 comes at the end

  • First of all, thank you very much to see here 😄, this article is shared here, summarized several very basic optimization methods, I hope to help you.
  • If you feel this article is helpful to your words as well 🍉🍉 attention + likes + favorites + comments + forwarding 🍉🍉 support yo ~~ 🍉 your support is the biggest power OF my update.
  • If you want to discuss with me and learn more about the front end you can join meFront-end communication learning group, we talk about the world ~~~

🌅 past wonderful

Three months after joining the Apifox R&D team, I learned 30 efficient development methods 🔥 504 👍🏻

“How the front-end should Gracefully Mock data 🏃” Tips every front-end should learn 582 👍🏻

What about 2021 for the man who couldn’t find a job a year ago? 429 👍 🏻

Be sure to accept these 10+ loading effects to make your project shine ⭐ 503 👍🏻