New syntax and features of ES6 (1) :

Add keyword: let const;

Let and const declarations form a block-level scope. Variables declared with let and const only work within the scope of the declaration.

let:

Let and var are similar in that they are used to declare variables. The difference is:

  • Variables declared by let are valid only at the block level;
  • Let does not have a “variable promotion” feature, but a “temporal dead zone” feature.

const:

Const commands, like let commands, declare variables whose scope is block-level. So const follows the same rule as let, except that,

  • Const is used to declare a constant variable.
  • If a constant variable is declared as const, it must be assigned at the same time; otherwise, an error is reported.

New arrow function:

Function A(name){console.log(name)} (name)=>{console.log(name)} {console.log(name) =>{console.log(name)}

New template string:

Let name = ‘world’; Want to output ‘Hello World! ‘This sentence; Log (‘hello ‘+ name + ‘! Console. log(hello ${name}!)

The new promise:

The Promise object is a constructor that generates a Promise instance. The following code creates an instance of Promise.

const promise = new Promise((resolve, reject) = >{

  if (/* Asynchronous operation succeeded */){
    resolve(value);
  } else{ reject(error); }});Copy the code

The Promise constructor takes a function as an argument, resolve and reject. They are two functions that are provided by the JavaScript engine and do not need to be deployed themselves.

The resolve function changes the state of the Promise object from “unfinished” to “successful” (that is, from pending to depressing). It will be called when the asynchronous operation succeeds and pass the result of the asynchronous operation as a parameter. The Reject function changes the state of the Promise object from “unfinished” to “failed” (i.e., from Pending to Rejected). It is called when the asynchronous operation fails and passes the error reported by the asynchronous operation as a parameter.

After the Promise instance is generated, you can use the THEN method to specify the resolved and Rejected state callback functions, respectively.

promise.then((value) = >{
  // success
  console.log(value)
}, (error) = > {
  // failure
  console.log(error)
});
Copy the code

The then method can take two callback functions as arguments. The first callback is called when the Promise object’s state changes to Resolved. The second callback is called when the Promise object’s state changes to Rejected. Both of these functions are optional and do not have to be provided. They all accept the value passed out from the Promise object as an argument. In general, do not define a Reject callback (the second argument to then) in the THEN () method. Always use the catch method.

The promise.prototype.catch () method is an alias for. Then (null, Rejection) or. Then (undefined, Rejection) that specifies the callback when an error occurs.

getJSON('/posts.json').then(function(posts) { // ... }).catch(function(error) {// Handle getJSON and the previous callback function running error console.log(' error! ', error); });Copy the code

In the code above, the getJSON() method returns a Promise object, and if the state becomes resolved, the callback specified by the then() method will be called; If an asynchronous operation throws an error, the status changes to Rejected, and the callback specified by the catch() method is called to handle the error. In addition, callbacks specified by the then() method are also caught by the catch() method if an error is thrown during execution.

p.then((val) => console.log('fulfilled:', val)) .catch((err) => console.log('rejected', err)); => console.log(' pity :', val)). Then (null, (err) => console.log("rejected:", err)); // This is a big pity.Copy the code

The finally() method is used to specify actions that will be performed regardless of the final state of the Promise object. This method was introduced as a standard in ES2018.

Promise. Then (result = > {...}). The catch (error = > {...}), finally (() = > {...});Copy the code

In the code above, regardless of the last state of the promise, the callback specified by the finally method is executed after the callback specified by then or catch.

New Destruct assignment:

ES6 allows you to extract values from arrays and objects and assign values to variables in a pattern called Destructuring.

Previously, to assign a value to a variable, you had to specify a value directly.

let a = 1;
let b = 2;
let c = 3;
Copy the code

ES6 allows you to write it like this.

let [a, b, c] = [1, 2, 3];
Copy the code

The above code shows that you can extract values from an array and assign values to variables in their respective locations.

Essentially, this is “pattern matching,” in which the variable on the left is assigned a corresponding value as long as the pattern on both sides of the equal sign is the same. Here are some examples of destructuring using nested arrays.

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
Copy the code

If the deconstruction fails, the value of the variable is equal to undefined.

let [foo] = [];
let [bar, foo] = [1];
Copy the code

In both cases, the deconstruction fails and the value of foo is equal to undefined.

Another case is incomplete deconstruction, where the pattern to the left of the equals sign matches only part of the array to the right of the equals sign. In this case, deconstruction can still succeed.

let [x, y] = [1, 2, 3];
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
Copy the code

The above two examples, both incomplete deconstruction, can be successful.

The parts of Promise and deconstruction assignment are extracted from Ruan Yifeng’s INTRODUCTION to ES6