Commonly used ES6 summaries

1.var let const

var

(1). When using var in JS, variable promotion will occur. That is, when the script starts to run, the variable already exists, but there is no value, so undefined will be output.

let

Let does not have variable promotion, which means that the variable does not exist before it is declared, and an error will be thrown if it is used.

(2). Var is function level scope, let is block level scope {} :

(3) Let does not allow multiple declarations of the same variable in the same scope

const

Once a read-only constant is declared, its value cannot be changed

(5) The const command declares a constant that is not promoted and can only be used after the declared position

(6) Const declarations, also like let can not be repeated

2. String template

It can be used as a normal string (‘ normal string ‘) or to define a multi-line string. In a template string, you can embed variables, JS expressions or functions that need to be written in ${}

3. Deconstruction and assignment of variables

Es6 allows you to extract values from arrays and objects and assign values to variables according to certain patterns. This is called destructuring assignment, which means that you liberate the attributes of an object as variables so that they can be used as variables in the future.

An array of

The array is automatically parsed into the corresponding variable that receives the value, and the array destruct assignment must be one-to-one, otherwise undefined

object

Objects, unlike arrays, do not need to correspond to each other, but variables must have the same name as their properties to get the correct value (for different names, assign the property name to the variable username:name).

4. Arrow function

In ES6, we provide a concise way to write a function called an arrow function. An arrow function is essentially an anonymous function. The property of an arrow function is that the this inside the arrow function is always the same as the this outside the arrow function, such as this:

There are three variations of the shorthand method:

Variant 1: If the arrow function has only one argument in the left parameter list, the left parenthesis can be omitted;
Variant 2: If there is only one line of code in the function body on the right, the {} on the right can be omitted.
Variant 3: If there is only one parameter to the left of the arrow function and only one line of code to the right, the () and {} on both sides can be omitted

Note: if we omit {} from the right side of the function, the default is to return the result of the arrow call.

5.Promise (www.cnblogs.com/qianguyihao…)

asynchronous

JavaScript’s execution environment is single threaded.

The so-called single thread, refers to the JS engine responsible for interpretation and execution of JavaScript code only one thread, that is, can only complete a task, this task can be executed after the next, it will “block” other tasks. This task is called the master thread.

Asynchronous mode allows you to perform multiple tasks together.

Common asynchronous modes are as follows:

The timer
Interface call
Event functions

How the interface is invoked

There are several common interface invocation methods in js:

Native ajax
Ajax based on jQuery
Fetch
Promise
axios

The advantages of the Promise

Promise is a solution to asynchronous programming

It is a good solution to the problem of callback hell (avoiding layers of nested callback functions).

Basic use of Promise

Promise’s common API: Instance Methods [Important]

The Promise API provides the following instance methods:

Promise.then () : Gets the normal result of the asynchronous task.
Promise.catch () : Gets the exception result of an asynchronous task.
Promise.finaly () : The asynchronous task is executed whether it succeeds or not.

Example code:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, Initial -scale=1.0" /> <title>Document</title> <body> <script> function queryData() {return new Promise((resolve, reject) => { setTimeout(function() { var data = { retCode: 0, msg: 'qianguyihao' }; If (data.retcode == 0) {// Call resolve(data) when the interface request is successful; } else {// Reject ({retCode: -1, MSG: 'network error'}); }}, 100); }); } queryData().then(data => {// get the normal result from resolve console.log(' interface request succeeded, go here '); console.log(data); }).catch(data => {// get the exception result from reject console.log(' when interface requests fail, go here '); console.log(data); }).finally(() => {console.log(' whether the interface request succeeds or not, it will go here '); }); </script> </body> </html>Copy the code

Promise API: Object methods

The Promise API provides the following object methods:

Promise.all() : Processes multiple asynchronous tasks concurrently. The result can be obtained only when all tasks are successfully executed.
Promise.race(): Process multiple asynchronous tasks concurrently and get results as long as one task succeeds.