By Orkhan Jafarov

Click “like” and then look, wechat search [Big Move the world] pay attention to this person without dACHang background, but with a positive attitude upward. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

1. Generate numbers in a specified range

In some cases, we create an array between two numbers. Suppose we want to determine if someone’s birthday falls within a certain range of years, then here’s a very simple way to do it 😎

let start = 1900, end = 2000; [...new Array(end + 1).keys()].slice(start); Array.from({length: end-start + 1}, (_, I) => start + I);Copy the code

2. Use an array of values as arguments to the function

In some cases, we need to collect the value into an array and pass it as a parameter to the function. With ES6, you can use extended operators (…) 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"]Copy the code

3. Use the value as an argument to the Math method

When we need to use math. Max or math.min in an array to find a maximum or minimum value, we can do something like this:

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

4. Merge/flatten arrays within arrays

Array has a nice method called array. flat, which requires a depth argument to indicate how deep the Array is nested. The default value is 1. However, if we don’t know the depth, we need to flatten it all out, just using Infinity as the argument 😎

const arrays = [[10], 50, [100, [2000, 3000, [40000]]]]

arrays.flat(Infinity)
// [ 10, 50, 100, 2000, 3000, 40000 ]
Copy the code

5. Prevent code crashes

Unpredictable behavior in your code is bad, but if you have it, you need to deal with it.

For example, the common TypeError is reported when trying to get attributes such as undefined/null.

const found = [{ name: "Alex" }].find(i => i.name === 'Jim')

console.log(found.name)
// TypeError: Cannot read property 'name' of undefined
Copy the code

We can avoid it by:

const found = [{ name: "Alex" }].find(i => i.name === 'Jim') || {}

console.log(found.name)
// undefined
Copy the code

6. A good way to pass parameters

A good use case for this method is styled- Components. In ES6, we can pass template characters as parameters to functions without using square brackets. This is a good technique if you want to format/convert 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
Copy the code

7. Swap variables

Using the destruct assignment syntax, we can easily swap variables using the destruct assignment syntax 😬:

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

8. Sort in alphabetical order

In cross-international projects, some special languages may have problems with dictionary sorting, as shown below 😨

["a", "z", "a"]. Sort ((a, b) => a-b); / / / 'a', 'z', 'a'] / / right thing [" a ", "z", "a"]. Sort ((a, b) = > a. ocaleCompare (b)); // ['a', 'a', 'z']Copy the code

LocaleCompare () : Compares two strings in a locally specific order.

9. Hide your privacy

The final tip is to mask strings. If you need to mask any variable (other than passwords), this will help you quickly:

const password = "hackme";
password.substr(-3).padStart(password.length, "*");
// ***kme
Copy the code

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: dev. To/gigantz / 9 – j…

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.