Javascript Key knowledge;

Main idea of this article: common ‘key’ error-prone ‘knowledge’ in javascript and some algorithms (de-repetition ~ sort)….. Updated continuously

Link is different from @import

1. Link is asynchronous operation GUI render page encounter link will open up a new HTTP thread to obtain resources GUI continue rendering page;
2. @import is a synchronized GUI rendering page that encounters @import and will wait for it to return with a new style

Window.onload differs from $(document).ready()

· Only one function can be bound – this is executed after all elements in the page, including images, have been loaded

$(document).ready() is implemented with the level 2 event binding listener DOMContentLoaded event, which can bind multiple functions: the page DOM structure is executed after rendering

So $(document).ready() executes faster than window.onload;

Array to heavy

   let ary=[35,"aa",56,"aa","35","56","23"]
Copy the code

1. Es6 data structure Set

let unique = new Set(ary);  
console.log(Array.from(unique));
Copy the code

2. Use the push ()

let ary1=[]; for(let i=0; i<ary.length; I++) {if (ary1. IndexOf (ary [I]) = = 1) {/ / if there is a will display the corresponding index No is 1 ary1. Push (ary [I]); }}; console.log(ary1);Copy the code

3. Use the splice ()

let len = ary.length;
for (let i = 0; i < len; i++) {
  for (let j = i + 1; j < len; j++) {
    if (ary[i] == ary[j]) {
      ary.splice(i, 1);
      len--;
      j--;
    }
  }
}
console.log(ary);
Copy the code

JS Synchronous and asynchronous

Single-threaded asynchronous operation 👇

Js is single threaded. It can only do one thing at a time, when we put asynchrony in the webAPI to listen, if it reaches the executable state, we put it in the microtask or macro task and the main thread continues to render the synchronous JS code

Priority of synchronous and asynchronous execution 👇

If an asynchronous task is ready to execute, it is not executed immediately. Instead, it is queued in an EventQueue for execution. Asynchronous tasks are executed only after the synchronous code has completed execution.

EventQueue · key 👇

After the synchronization task is complete, the main thread is idle and goes to the EventQueue to find asynchronous tasks that can be executed. It puts them in stack memory and lets the main thread execute them. Once the asynchrony is complete, go to the EventQueue to find the rest of the asynchrony tasks and execute them

Micro tasks macro tasks 👇

If there are asynchronous microtasks that can be executed, the microtasks are always executed first. When executable microtasks are gone, look for asynchronous macro tasks; The same level of the first to let in, the first to execute who;

What exactly did New do

• Create an instance object box
• Let this point to the power object
• Foo__proto__ = box, the prototype
• We can add attributes to Foo using box. Prototype

function box(name, age){ this.name = name; this.age = age; } box-prototype. baby = function (){box-prototype. baby = function (){box-prototype. baby = function (){box-prototype. baby = function (){box-prototype. baby = function (){box-prototype. baby = function (){box-prototype. baby = function (); } const foo = new box(' ha ha ',123); console.log(foo); => box {name: "ha ha ", age: 123} foo.baby(); = > haha console, log (foo. Name); = > ha haCopy the code

How do apply, call, bind change this🙄

Normal functions perform this to point to

See if the method you call is preceded by a dot (.). If the dot is preceded by this, this points to whoever it is. If the dot is not, this points to window. Arrow functions do not have this and prototype

The constructor points to this points to

This refers to the instance object that comes out of new

Apply, call, and bind

1. Apply, call, and bind are all used to redirect the function’s this object.
2. The first argument to apply, call, and bind is the object to which this refers, which is the context you want to specify
3. Apply, call, and bind can all pass arguments using subsequent parameters

The difference between apply, call and bind

1. Call (this, arg1, arg2); call(this, arg1, arg2); call(this, arg1, arg2);
2. Apply changes this to place the parameters in an array. For example: func.apply(this, [arg1, arg2]).
3. Bind changes this to point but does not return the corresponding function for later calls

Detection of data types

Typeof detection 😣

• Typeof [value]=> first, it is a string containing the corresponding data type;
• Limitations: Typeof detects object type values, which are “object” except when “function” can be detected by executable {function}.
• Typeof detects an undeclared variable and returns undefined without error, or a temporary dead zone based on the let declaration
• The particularity of NULL: Typeof detects data types according to the binary values stored at the bottom of the computer. He thinks that everything starting with ·000· is an object, but null happens to be all 0, so detecting NULL is actually a basic data type

Instanceof test 😌

• [value]instanceof[Ctor]=>true/false
• Instanceof is used temporarily to check data types. It is intended to check whether the current power belongs to this class.
• Benefits: Subdivide the object type value but just because the result is true does not mean it is a standard common object
• Disadvantages: Can not detect primitive values, only the primitive value of the object format instance prototype chain can be arbitrarily modified in ES6 syntax

function Fn(){
}
Fn.prototype=Array.prototype;
let f=new Fn;
console.log(f instanceof Array );  =>true
Copy the code

Let ary=[34,34] class Fn{static [symbol.hasinstance](obj){if(array.isarray (obj)) return true; } } console.log(ary instanceof Fn); =>trueCopy the code

• Prototype: __proto__ returns true if [Ctor] appears on the prototype chain, false if Object. Prototype does not appear

Object.prototype.toString.call([value]); 😀

• It is the only JS detection that does not detect any flaws in the data type;
• Return value: [object Number/Boolen/BigInt/String Array/Math…
• Most built-in classes have toString properties are generally converted into strings, but the Object. The prototype. ToString is testing data types, The return value contains information about the constructor it belongs to, so the String is used to detect the data type
• ([]).toString is the String inside the call array; Here String is converted to a String
• Object. The prototype. ToString. Change this point to call ()

Conclusion:

Thank you very much