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

What are the wrong styles of JavaScript? in view of this question, this article introduces in detail the corresponding analysis and solutions, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

How many times have you opened an old project and found messy code that crashed easily when you added something new? We've all been there.

To reduce the number of hard-to-read javascript, I provide the following example. These are all mistakes I have made in the past.

Use array deconstruction for functions with multiple return values

Suppose we have a function that returns multiple values. One possible implementation is to use array deconstruction, as follows:

Const func = () = > {const a = 1; const b = 2; const c = 3; const d = 4; return [a dagger breco c penny d];} const [a recorder breco c recorder d] = func (); console.log (arech breco cpene d); / / 1 dagger 2pje 3pl 4

Although the above method is easy to use, it does introduce some complexity.

When we call the function and assign the value to a _ mai _ b _ r _ c _ d, we need to notice the order in which the data is returned. A small mistake here can become a debugging nightmare.

In addition, there is no way to specify exactly which values we want to get from the function. What if all we need is c and d?

Instead, we can use object deconstruction.

Const func = () = > {const a = 1; const b = 2; const c = 3; const d = 4; return {a Leng BLI d};} const {c c d} = func ()

Now, we can easily select the data we need from the function, which also provides future security for our code, allowing us to add additional return variables without breaking things.

Do not use object decomposition for function parameters

Suppose we have a function that takes an object as a parameter and performs some operations on the properties of that object. A childish approach may look like this:

/ / function getDaysRemaining (subscription) {const startDate = subscription.startDate; const endDate = subscription.endDate; return endDate-startDate;} is not recommended

The above method works as expected, but we create two unnecessary temporary references startDate and endDate.

A better implementation is to use object deconstruction on the subscription object to get startDate and endDate in a row.

/ / recommend function getDaysRemaining (subscription) {const {startDate, endDate} = subscription; return startDate-endDate;}

We can go a step further and perform object destructing directly on the parameters.

/ / better function getDaysRemaining ({startDate, endDate}) {return startDate-endDate;}

More elegant, isn't it?

Copy an array without using the extension operator

Using for to loop through an array and copy its elements to a new array is lengthy and quite ugly.

You can use extension operators to achieve the same effect in a concise and straightforward manner.

Const stuff = [1 stuff.length; 2 and 3]; / / not recommended const stuffCopyBad = [] for (let I = 0; I < stuff.length; iTunes +) {stuffCopyBad [I] = stuff [I];} / / recommended const stuffCopyGood = [. Stuff]

Use var

Use const to ensure that variables cannot be reassigned. This reduces errors in our code and makes it easier to understand.

/ / var x = "badX" is not recommended; var y = "baxY"; / / const x = "goodX" is recommended; const y = "goodX"

If you do need to reassign variables, always choose let instead of var.

This is because let is block-scoped and var is functional-scoped.

The block scope tells us that variables can only be accessed inside the block of code in which it is defined, and that trying to access variables outside the block provides us with ReferenceError.

For (let I = 0; I < 10; iTunes +) {/ / something} print (I) / / ReferenceError: i is not defined

The function scope tells us that variables can only be accessed within the function in which they are defined.

For (var I = 0; I < 10; iTunes +) {/ / something} console.log (I) / / 10

Both let and const are block-scoped.

Do not use template literals

Concatenating strings together manually is cumbersome and can cause confusion when typing. This is an example:

/ / function printStartAndEndDate ({startDate, endDate}) {console.log ('StartDate:' + startDate +', EndDate:' + endDate)} is not recommended

Template text provides us with a readable and concise syntax that supports string interpolation.

/ / recommend function printStartAndEndDate ({startDate, endDate}) {console.log (`StartDate: ${startDate}, EndDate: ${endDate} `)}

Template text also provides an easy way to embed new lines. All you need to do is press the Enter key on the keyboard as usual.

/ / two-line print function printStartAndEndDate ({startDate, endDate}) {console.log (`StartDate: ${startDate} EndDate: ${endDate} `)} questions about the wrong style of JavaScript are shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

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.