JS knowledge points-01

var  let  const difference

1. var      Declaration upgrade （ Assignment does not raise ）, The scope is within the function where the statement is located , Variables with the same name can be declared repeatedly ;
2. let      There is no claim to promote , The scope is within the code block where the statement is located , Variables with the same name cannot be declared repeatedly , Modifiable variable value ;
3. const There is no claim to promote , The scope is within the code block where the statement is located , Variables with the same name cannot be declared repeatedly , The value of the variable cannot be modified ;  

Variable Promotion ：

 
Scope ：

Determine whether it's an array or an object

Object.prototype.toString.call(a)

a instanceof xxx ( Return value ： Boolean value )   You can determine whether it is an array , But you can't judge whether it's an array or an object ：

typeof a ( Return value ： character string )  , It is also impossible to judge whether it is an array or an object ：

 Array.isArray(a) You can determine whether it is an array ：

Closure

Functions that can read internal variables of other functions . in other words , Function as a Inner function of b By the function a When an external variable is referenced , You create a closure .

characteristic ：

1. Make it possible for external access to function internal variables ;

2. Local variables are resident in memory ;

3. You can avoid using global variables , Prevent contamination of global variables ;

4. Memory leaks can occur （ There's a block of memory that's been occupied for a long time , Without being released ）

  //  As return value 
  function create () {
    var a  = 100
    return function fn () {
      console.log(a)
    }
  }
  var a = 200
  create()() // 100


  //  As a parameter 
  function create2 (fn) {
    var a = 100
    return fn()
  }
  var a = 200
  function fn () {
    console.log(a)
  }
  create2(fn) // 200

Closures and garbage collection mechanisms - Shepherd Wolf - Blog Garden Closure means having access   Of local variables in the scope of other functions A function stay JS in , The scope of a variable belongs to the scope of a function , The scope will be cleaned up after the function is executed 、 Memory is also reclaimed , But because the closure is based on the sub function inside a function , because https://www.cnblogs.com/edwardwzw/p/11754101.html

hasOwnProperty

hasOwnProperty() Used to detect whether the attribute is the object's own attribute , return true/false

let obj = {
    name:'edward',
    age:18,
    eat:{
        eatname:' meat ',
        water:{
            watername:' Nutrition Express '
        }
    }
}
console.log(obj.eat.hasOwnProperty('watername'))  //false
console.log(obj.eat.water.hasOwnProperty('watername'))  //true

Deep copy

1. JSON.parse(JSON.stringify(obj))
2. 

  function deepClone (source) {
    const targetObj = source.constructor === Array ? [] : {}
    for (let key in source) {
      if (source.hasOwnProperty(key)) {
        if (source[key] && typeof source[key] === 'object') { //  Reference data type 
          targetObj[key] = deepClone(source[key])
        } else { //  Basic data type 
          targetObj[key] = source[key]
        }
      }
    }
    return targetObj
  }

apply  call  bind

  var name = ' Xiao Wang ', age = 18
  var obj = {
    name: ' Xiao Ming ',
    objAge: this.age,
    myFun: function (a,b) {
      console.log(this.name, this.age, a, b)
    }
  }
  var obj1 = {
    name: 'xiao li',
    age: 6
  }
  var obj2 = {
    name: 'edward',
    age: 9
  }
  obj.myFun.apply(obj1, ['aaa', 'bbb']) // xiao li 6 aaa bbb
  obj.myFun.call(obj2, 'aaa', 'bbb')    // edward 9 aaa bbb
  obj.myFun.bind(obj1, 'ccc', 'ddd')()  // xiao li 6 ccc ddd

The event loop （Event Loop）

js It's a single threaded scripting language , At the same time , Can only do the same thing , To coordinate events 、 User interaction 、 Script 、UI Rendering and network processing , Prevent the main thread from blocking ,Event Loop The plan came into being ...

js When the engine compiles the code ：

When encountering synchronous code, it is directly put into the execution stack ,
Encountered an asynchronous code , It will not wait for the return result of asynchronous code , Instead, it hangs in the task queue

When all synchronization tasks in the execution stack are completed , The main thread is idle , You will find out whether there are tasks in the task queue . If there is , Then the main thread will take out the events in the first place , And put the callback corresponding to this event into the execution stack , then ： When encountering synchronization code ... When asynchronous code is encountered ...

So again and again , This creates an infinite cycle . This is the process called “ The event loop （Event Loop）” Why .

In each round, micro tasks are performed first , Then execute the macro task .（ If a round of micro tasks contains macro tasks , Put the macro task at the end of the current macro task list ）

Asynchronous task It is divided into Macro task （macrotask） And Micro task (microtask)

Micro task ：Promise  async/await  process.nextTick
Macro task ：setTimeout  setInterval  Dom event   Ajax request
Execution order ： Micro task -> Dom Rendering -> Macro task

If we use alert The incident interrupted js, Will find ：alert('promise then') Time page dom Did not start rendering , Turn off the alert after ,dom Render completed , then alert('setTimeout')

JS The event loop - Simple books In depth understanding of javascript The cycle of events in （1）JS Why is it designed as a single thread js The design of single thread is related to its purpose Just imagine If js Designed for multithreading Then modify and delete the same dom Browse ...https://www.jianshu.com/p/184988903562

Draw a triangle

<!DOCTYPE html>
<html lang="en">
<head>
  <title> triangle （ Arrow right ）</title>
  <style>
    .t1 {
      width: 0;
      height: 0;
      border-left: 20px solid red;
      border-right: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-top: 20px solid transparent;
    }
  </style>
</head>
<body>
  <div class="t1"></div>
</body>
</html>