Hello, I'm zero one. Today I'll bring you some cold knowledge of JavaScript. You may have heard of it, but it may surprise you. No more nonsense. Let's have a look!

1, Deconstruction tips

Usually, we need to use some attributes in a nested multi-layer object, which will be deconstructed for use

let obj = {
  part1: {
    name: 'zero or one',
    age: 23
  }
}

// deconstruction
const { part1: { name, age } } = obj
// use
console.log(name, age)  // Zero one 23

In this case, after you deconstruct the name and age from part1, you cannot use the part1 attribute in the variable obj, such as:

// ... omitted

const { part1: { name, age } } = obj
console.log(part1)   // Uncaught ReferenceError: part1 is not defined

In fact, you can deconstruct many times, such as:

// ... omitted

const { part1: { name, age }, part1 } = obj
console.log(part1)   // {name: "zero one", age: 23}

2, Number separator

Sometimes you define a numeric constant in a file

const myMoney = 1000000000000

So many 0, 1, 2... 6, 7... Are dizzy. What should I do?

The number separator is rounded up!

const myMoney = 1_000_000_000_000

console.log(myMoney)  // 1000000000000

It's no problem to write like this, and it's more intuitive after the numbers are separated!!

3, try... catch... finally who's good?

In normal function calls, return usually ends the execution of the function in advance

function demo () {
  return 1
  console.log('I'm zero one')
  return 2
}

console.log(demo())   // 1

In try...catch...finally, return will not end the execution ahead of time

function demo () {
  try {
    return 1
  } catch (err) {
    console.log(err)
    return 2
  } finally {
    return 3
  }
}

console.log(demo())   // Return what??

What will this program return? Think about it

Tow hours Later~

The answer is: 3

Finally, it comes to the conclusion that finally is more powerful

Then we can do some operations

function demo () {
  try {
    return 1
  } catch (err) {
    console.log(err)
    return 2
  } finally {
    try {
      return 3
    } finally {
      return 4
    }
  }
}

console.log(demo())  // Return 4

Four. Get the current call stack.

function firstFunction() { secondFunction(); } 
function secondFunction() { thridFunction(); } 
function thridFunction() { console.log(new Error().stack); } 

firstFunction();

//=> Error 
//  at thridFunction (:2:17) 
//  at secondFunction (:5:5) 
//  at firstFunction (:8:5) 
//  at :10:1

new Error().stack so that you can get the call stack information of the current code execution at any time, without losing a way to debug the code

5, One line of code generates a random string

When I first learned js, I wanted to implement a function that randomly generates strings. That's what I did

function hash () {
  let s = ''
  const strs = [
    'a', 'b', 'c', 'd', 'e', 'f', 'g', 
    'h', 'i', 'j', 'k', 'l', 'm', 'n', 
    'o', 'p', 'q', 'r', 's', 't', 'u', 
    'v', 'w', 'x', 'y', 'z', '0', '1', 
    '2', '3', '4', '5', '6', '7', '8',
    '9',
  ]
  for(let i = 0; i < 10; i++) {
    s += strs[Math.floor(Math.random() * strs.length)]
  }
  return s
}

hash()  // 'www7v2if9r'

What trouble! I just wrote 26 letters and 10 numbers for half a day (of course, it can also be realized in ASCII code, which will be more convenient)

Next, we introduce a method to realize the function of "randomly generating string" with only one line of ultra short code

const str = Math.random().toString(36).substr(2, 10);
console.log(str);   // 'w5jetivt7e'

We also get a 10 digit random string, which is cool????, It's not too cool compared with the one I wrote

First, the number of Math.random() generating [0, 1, that is, 0.123312, 0.982931, and so on, and then call number. toString Method to convert it to base 36. According to MDN, the base 36 conversion should include letters a~z and numbers 0 ~ 9, because the generated 0.89kjna21sa is similar, so we need to intercept the decimal part, that is, intercepting 10 characters from index 2 is the random string we want

Many open source libraries use this method to create random ID s for DOM elements.

6, The fastest way to get dom

Elements with ID attribute in HTML will be referenced by global variables with the same name

<div id="zero2one">div>

This is how you get the dom

const el = document.getElementById('zero2one')  
console.log(el)   // 

You can do this now

console.log(zero2one)   // 

Is it convenient^-^

I'm zero one, sharing technology, not just the front end. See you next time~