ES6 new features-------deconstruction, parameters, modules and notations (cont.)

Vi. Deconstruction

Deconstruction provides a convenient way to extract data from an object or array, see the following example:

Es6let [X,y]=[1,2];//x=1,y=2//es5var Arr=[1,2];var X=arr[0];var y=arr[1];

With this syntax, you can assign values to multiple variables at once. A good addition is the ability to exchange variable values very simply:

Let x=1,y=2; [X,y]=[y,x];x=2 Y=1

Deconstruction can also be used with objects, paying attention to the corresponding keys that must exist in the object:

Let Obj={x:1,y:2};let {x,y}=obj;//a=1,b=1 or let {x:a,y:b}=obj;//a=1,b=2

Another interesting pattern is to simulate multiple return values:

function dosomething () {     return [];} let [x.y]=dosomething ();//x=1.y=2

Deconstruction can be used to assign a default value to a Parameter object. By object literals, you can simulate named parameters:

function dosomething ({y:1,z:0}) {      console.log (y,z);} DoSomething ({y:2})

Vii. parameters

1. Default value

In ES6, you can define the parameter default value for a function. The syntax is as follows:

function dosomething () {      return x*y;} DoSomething (5);//10dosomethinf (5,undefined);//10dosomething (5,3);//15

Assigning a default value to a parameter in ES5
function dosomething (x, y) {
Y=y===undefined?2:y;
return x*y;
}

Parameters are fired using default values when passed undefined or without arguments.

2. Rest parameters

We have learned the ellipsis operator earlier, and the remaining parameter is similar to it, and it also uses the ' ... ' syntax, which allows you to save the arguments at the end of the array:

Funtion dosomething (x,... remaining) {    return x*rremaining.length;} Dodsomething (5,0,0,0);//15

　

Eight, module

In the ES6 module syntax, the module is designed around the export and import keywords, now let's look at an example with two modules:

Lib/ath.jsexport function sum (x, y) {    return x+y};export var pi=3.14;//app.jsimport {sum,pi}form "lib/math.js"; Console.log (sum (PI,PI);

As you can see, there may be multiple export declarations, each explicitly indicating the type of output worth. In this example, the import declaration uses a syntax to clearly define what is being imported, you can use the * wildcard character, with the AS keyword to give the module a local name, the module as a whole import:

App.jsimport*as Math Form "Lib/math.js"; Console.lgo (Math.sum (MATH.PI,MATH.PI));

The module system has a default output, which can be a function that simply provides a local name to import this value:

Lib/my-fn.jsexport default function () {    console.log (' echo Echo);} App.jsimport dosomething from ' Lib/my-fn,js ';d osomething ();

Note that the import declaration is synchronous, but the module code needs to be run after all dependencies have been loaded

Ninth, class

Class is created around Calss and constructor keywords, here's a short example:

Class vehicle{     Constructor (name) {         this.name=name;         This.kind= ' Vehicle ';     }         GetName () {         return this.name;    }};/ /create an instancelet myvehicle=new Vehicle (' Rocky ');

Note that the definition of a class is not a generic object, so there is no comma between the members of the class. When you create an object of a class, you use extends when you inherit a base class by using the New keyword:

Class Car extends vehicle{     Constructor (name) {            super (name);            this.kind= ' car ';     }} Let Mycar=new Car (' bumpy '); Mycar.getname ();//' bumpy '; MyCar instanceof car;//truemycar instanceof vehicle;//true

From a derived class, you can use super from any constructor or method to get its base class: Use Super () to call the parent class constructor, and call the other members.

Ten, Mark

Notation is a new type of native data, like number and string, you can use tokens to create unique or unique constants for object properties. The creation method is as follows:

Const My_constant=symbol (); let Obj={};obj[my_constant]=1;

Note that the key-value pairs generated by the tokens cannot be obtained through object.getownporpertynames () and are not visible in the for...in traversal, Object.key (), json.stringify (), which is contrary to the string-based key, You can get an array of tokens for an object by Object.getoenpropertysymbols (). Symbols are appropriate for const mates because they all have immutable properties.

Translated

Now the browser support for ES6 is not extensive, and the browser is also different, perhaps you write code in the user's browser is not fully resolved, this is why we need to convert the code into a good run in any current browser in the old version of JavaScript (ES5), This conversion is often called translation, and we have to do this to know that all browsers we want to be compatible with can run ES6. There are many ways of translating, including Bable, Traceur, typescript and so on.

　　

ES6 new features-------deconstruction, parameters, modules and notations (cont.)