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

This article shows you 8 tips for writing JavaScript code, which are concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

You also need to keep the code clean when coding, pay attention to accumulating the skills you use when coding, and pay attention to the new features of JavaScript.

1. Generate numbers within a specified range

Sometimes you need to create an array within a range of numbers. For example, when choosing a birthday. The following is the easiest way to implement it.

Let start = 1900, end = 2000; [... new Array (end + 1). Keys ()] .slice (start); / / [1900, 1901,..., 2000] / / can also be the case, but the large-scale results are unstable Array.from ({length: end-start + 1}, (_, I) = > start + I)

two。 Take the value in the value array as the parameter of the function

Sometimes we need to put the value in an array and then pass it as an argument to the function. Using ES6 syntax, you can rely solely on the extension operator (...). You can extract the value from the array: [arg1,arg2] = > (arg1,arg2).

Const parts = {first: [0,2], second: [1,3],}; ["Hello", "World", "JS", "Tricks"] .slice (.parts.second); / / ["World", "JS", "Tricks"]

This technique applies to any function, please continue to see article 3.

3. Take the values in the value array as parameters of the Math method

When you need to find the maximum or minimum value of a number in an array, you can do something like this:

/ / find the value const elementsHeight = [... document.body.children] .map (el = > el.getBoundingClientRect () .y); Math.max (.elementsHeight); / / output the maximum value const numbers = [100,100,100,-1000, 2000,-3000, 40000]; Math.min (.. value); / /-3000

4. Flattening nested array

Array has a method called Array.flat, which requires a parameter representing depth to flatten the nested array (the default is 1). But if you don't know what to do with depth, you just need to take Infinity as a parameter. There is also a useful flatMap method.

Const arrays = [[10], 50, [100,100, [2000, 3000, [40000]; arrays.flat (Infinity); / / [10,50,100,2000, 3000, 40000]

5. Prevent code from crashing

If there is unpredictable behavior in the code, the consequences are unpredictable, so it needs to be dealt with.

For example, when the attribute you want to get is undefined or null, you will get a TypeError error.

If your project code does not support optional chaining, you can do this:

Const found = [{name: "Alex"}] .find (I = > i.name = 'Jim'); console.log (found.name); / / TypeError: Cannot read property' name' of undefined

Can be avoided in this way

Const found = [{name: "Alex"}] .find (I = > i.name = 'Jim') | {}; console.log (found.name); / / undefined

However, it depends, and there is nothing wrong with dealing with small-scale code. You don't need much code to deal with it.

6. A good way to pass parameters

You can think of template literals (Template literal) as arguments to functions without parentheses in ES6. This is very useful when formatting or converting text.

Const makeList = (raw) = > raw .join () .trim () .split ("\ n") .map ((s, I) = > `$ {I + 1}. ${s} `) .join ("\ n"); makeList`Hello, World Hello, World`; / / 1.Hello / / 2.World

7. Exchange the value of a variable as if by magic

By deconstructing the assignment syntax, variables can be easily exchanged.

Let a = "hello"; let b = "world"; / / error ❌ a = b / / {a: 'world', b:' world'} / / correct ✅ [a, b] = [b, a]; / / {a: 'world', b:' hello'}

8. Masking string

Sometimes we need to mask part of the string, not just with passwords. The following code gets the part of the string through substr (- 3), that is, the first three characters from the end of the string, and then fill the remaining positions with your favorite characters (for example, with *)

Const password = "hackme"; password.substr (- 3) .padStart (password.length, "*"); / / * kme these are the eight tips for writing JavaScript code. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are 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.