Write in front: here are some summaries and notes about ES6 common syntax, as well as some important concepts to strengthen memory

Temporary dead zone

The variable is not available until the let command declares it. ES6 states that if there are const and let commands in a block, the block will be closed to variables created by those commands and will report an error if used before declaration. Let is the block-level scope, which is the scope contained in a pair of {}. Var is the local scope, which is the scope wrapped in a function body.

Variable ascension

Variables created by the var command are created in advance at compile time, with the value undefined, and assigned later.

The Map type

The subscript of a map can be defined by a name. Generally, the key in a key-value pair of an object is a string, but the key of a Map can be of other character types, such as number. Methods are:

1. The Map. The size (length),
2. The Map. The get (get),
3. The Map. The set (add),
4. The Map from the (judgment),
5. The Map. The delete (delete),
6. The Map. The clear (empty),
7. Map.keys(all keys),
8. Map.values(all values),
9. The Map. The forEach (traverse)

Traversal methods

A for of loop is similar to a for in loop. For (item,index) of itemList.

Arror.from()

Turn array-like objects (NodeList) and traversable objects (Set, Map) into real arrays. Extension operators can also turn array-like objects into arrays.

Find and findIndex

The find() and findIndex() methods of arrays are used to find values and subscripts, as well as, for example, indexOf(); The argument is a callback function that can take three arguments, the current value, the current position, and the current array.

[1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; / / 2})

Implicit type conversion

Let int = “15”; int = +int; (int:15);

The unary operator + can also convert numeric strings to numeric values: + “42”; / / 42

String and Boolean conversions: +true(1); +false(0);

The second argument to parseint can set the conversion base:

parseInt("0x10"); // 16 parseInt("11", 2); / / 3Copy the code

Integer value, can use math methods, rounded up or down, you can also use 23.9 | 0 (23), 23.9 | 0 (23) –

Using bitwise or operators, positive numbers are rounded down and negative numbers are rounded up.

Intercept method

Slice (start,end): trim, do not change the original data data = 123456789; Slice (0, data.length-3) // 123456 Slice (0, data.length-3) // 123456 Splice (start,num,new) Join method: join(","), join array, join to string; Split () splits the string into an array one by one;Copy the code

Event loop (Evenloop)

Macro tasks: timers, circulators, I/O, and scripts; Jobs: such as Promise, process.nexttick in object.observe node; Message queue: first in, first out. Mechanism: Main thread executes code.Copy the code

1. Synchronous code is preferentially executed and joins message queue when encountering asynchronous request, which is divided into macro task queue and micro task queue.

2. The synchronization code is complete, and the message queue request is executed. Priority: micro task > macro task. All microtasks are executed first. If there are new microtasks or macro tasks during the execution of microtasks, they are still added to the message queue. If no new micro task is added after the first micro task is executed, the macro task will be executed; otherwise, the micro task will continue to be executed, and this operation will be repeated until there are no micro task and macro task in the message queue. <br> 5. The synchronization code and the microtask are completed, and the macro task starts to execute. If the macro task contains the microtask, the next loop will execute the microtask first, and then execute the macro task. <br>Copy the code

Prototype and prototype chain

Because each object has a Proto attribute, and each instance’s ProTO points to its constructor’s prototype, there is a prototype chain.

Class Class

Class creates an instance where all methods are registered on the prototype of the instance. Constructor denotes the default method and return this(default object).

Static method

Declare that none of the methods in it are registered with the stereotype. So it won’t be inherited by the instance.

Extends enables inheritance from class to class

Super method

Subclasses must call the super method from the constructor method, otherwise using this will report an error. This is because the subclass’s this object must be molded by the parent’s constructor to get the same instance attributes and methods as the parent, and then processed to add the subclass’s instance attributes and methods. If you don’t call super, your subclasses don’t get this.

Super represents the constructor of superclass A, but returns an instance of subclass B, i.e. this inside super refers to an instance of B. So super () is equivalent to Amy polumbo rototype here. The constructor. Call (this), so the super point to is A prototype object (A prototype)

Super can be called both as a function and as an object – as a function representing the constructor of the parent class – as an object representing the prototype object of the parent class rather than the parent class itself, and can only be called to properties and methods in the constructor.

You can listen for storing values through getters and setters

Static methods and static properties

Static methods can have the same name as non-static methods

Superclass static methods can be inherited by subclasses, but not by instances. Super refers to the superclass in static methods, and to the superclass’s prototype object in normal methods. B inherits from A and needs to call super() to use this

AST Tree structure

AST tree structure, is the JS code according to specific rules, into a special object, so that when changing JS logic, in fact, is to modify the AST object attribute value, and then into JS source code, conversion rules can be customized, can also use community specifications

Promise and async await

Promise: If the value is not returned, then is undefined; if the value is returned, then is the parameter of the next function; if the value is returned, then is the parameter of the next function; if the value is returned, then is the parameter of the next function Resolve () returns a successful Promise,reject () rejects promise.all (), waits for all to end, and if there is a failure, it is considered a failure Promise.race(), waiting for the fastest result to return, what is the fastest,race is what promise.finally (), indicating that the function will be executed regardless of the resultCopy the code

Async await: preceded by async to indicate that the function is an asynchronous function, and await inside the function means to wait for the result of execution before executing the codeCopy the code

closure

Closures:

Closures allow one function to access variables in another function without reclaiming them when the function completes. Child functions can access variables in the parent function directly, and vice versa. This is called a scope chain.

Actual cases:

Anti-shake throttling function, modular,

Common. Js and ES6 Module

Common.js is modular, and each module is a separate scope

Use the require method to read the module.export exported object. But because require is synchronous and script tags are inherently asynchronous, a processing scheme is required

AMD plan:

Asynchronous module definition, with require.js to solve the dependency of multiple JS files, as well as the browser will stop running when JS loading two problems (asynchronous loading, solve the browser stuck, specify the callback function, the first bit is not loaded will not load the second bit, solve the dependency of multiple files).

CMD plan:

Generic module definitions, with the help of sea-.js, advocate one file per module.

Relationships and distinctions

Both solve the same problem, but the method is slightly different,AMD advocates the dependency front, define the time to declare, CMD advocates the nearest dependency, when used to load AMD user experience is good, because there is no delay, dependency module is executed in advance, CMD performance is good, because only when the user needs to execute

2. ES6 Modules

Is the syntax of js, is a declarative code set (set in which the variables can be exported and exported data memory address)

Relationship and distinction

Writing method:

// import common.js: module.export ES6 :let a = require() ES6 :import {a} from "./index.js Export default or export const mode = {};Copy the code

• ES6 is executed before the code is actually run (compile phase), whereas CommonJS must be executed at run time
• Es6 is usually in a browser environment, common.js is usually in a Node environment

End