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

This article shows you what the 9 JavaScript skills are, 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.

1. Generate a specified range of numbers

In some cases, we create an array between two numbers. If we want to determine whether someone's birthday is in a certain range of years, here is a very simple way to achieve it:

Let start = 1900, end = 2000; [... new Array (end + 1). Keys ()] .slice (start); / / [1900, 1901,..., 2000] / / there is this way, but it is not stable Array.from ({length: end-start + 1}, (_, I) = > start + I) for a very wide range.

two。 Use an array of values as an argument to a function

In some cases, we need to collect the value into an array and pass it as an argument to the function. With ES6, you can use the extension operator (...) And extract the array from [arg1, arg2] > (arg1, arg2):

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

3. Use a value as a parameter to the Math method

When we need to use Math.max or Math.min in an array to find the maximum or minimum value, we can do something like this:

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

4. Merge / flatten arrays in an array

Array has a good method, called Array.flat, which requires a depth parameter that represents the depth of array nesting, with a default value of 1. However, if we don't know what to do with depth, we need to flatten it all, just take Infinity as a parameter

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

5. Prevent code from crashing

It's not good to have unpredictable behavior in your code, but if you do, you need to deal with it.

For example, a common error TypeError, trying to get attributes such as undefined/null, will report this error.

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

We can avoid it like this:

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

6. A good way to pass parameters

A good use case for this approach is styled-components, where we can pass template characters as arguments to the function without using square brackets in ES6. This is a good technique if you want to implement the function of formatting / 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,World / / 2. World,World

7. Exchange variable

Using the deconstruction assignment syntax, we can easily exchange variables and use the deconstruction assignment syntax:

Let a = "hello" let b = "world" / / wrong way a = b = a / / {a: 'world', b:' world'} / / correct approach [a, b] = [b, a] / / {a: 'world', b:' hello'}

8. Sort alphabetically

In cross-international projects, some of the more special languages may have problems with sorting by dictionary, as follows:

/ / wrong practice ["a", "z", "ä"]. Sort ((a, b) = > a-b); / / ['a','z','ä'] / / the right approach ["a", "z", "ä"] .sort ((a, b) = > a.localeCompare (b)); / ['a','ä','z']

LocaleCompare (): compares two strings in a local specific order.

9. Hide privacy

The last trick is to mask strings. When you need to mask any variables (not passwords), the following can quickly help you do so:

Const password = "hackme"; password.substr (- 3) .padStart (password.length, "*"); / / * kme

What are the 9 JavaScript skills mentioned above? 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.