New Features of ES6: deconstruct, parameters, modules, and Mark usage examples; New Features of es6

New Features of ES6: deconstruct, parameters, modules, and Mark usage examples; New Features of es6

This article describes the deconstruct, parameters, modules, and tag usage of the new features of es6. We will share this with you for your reference. The details are as follows:

I. deconstruct

Deconstruct provides a convenient way to extract data from objects or arrays. 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 a time. A good additional use is to exchange variable values easily:

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

Deconstruct can also be used for objects. Note that the corresponding key 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 mode is to simulate multiple return values:

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

Deconstruct can be used to assign default values to parameter objects. You can simulate the name parameters by using the object literal volume:

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

Ii. Parameters

1. Default Value

In ES6, you can define the default value of the function parameter. Syntax:

Function doSomething () {return x * y;} doSomething (5); // 10 doSomethinf (5, undefined); // 10 doSomething (5, 3 ); // 15 <br> // assign the default value to the parameter in ES5 <br> function doSomething (x, y) {<br> y = undefined? 2: y; <br> return x * y; <br>}

The default value is used when undefined or no parameter is passed.

2. REST Parameters

We have learned the ellipsis operator before. The remainder parameter is similar to it. It also uses the '...' syntax, allowing you to save the end parameter in the array:

funtion doSomething(x,...remaining){  return x*rremaining.length;}dodSomething(5,0,0,0);//15

Iii. Modules

In the module Syntax of ES6, the module is designed around the export and import keywords. Now let's look at an example that contains 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 can be multiple export declarations, each of which must explicitly indicate the output value type. In this example, the import declaration uses a syntax to clearly define the imported content. You can use the * wildcard character and the as keyword to provide a local name for the module and take the module as a whole for 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. You only need to provide a local name to import this default value:

//lib/my-fn.jsexport default function(){  console.log('echo echo);}//app.jsimport doSomething from 'lib/my-fn,js';doSomething();

Note that the import declaration is synchronous, but the module code will run only after all dependencies are loaded.

Iv. Category

Class creation is centered around the keywords of calss and constructor. The following is a brief 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 class definition is not a general object. Therefore, there is no comma between the class members. When creating a class object, you need to use the new keyword. When inheriting a base class, use extends:

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 the parent class, you can use super from any constructor or method to obtain its base class: use super () to call the parent class constructor; call other members.

5. Mark

A mark is a new type of native data. Like Number and String, you can use a mark to create a unique identifier for an object attribute or create a unique constant. 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 mark cannot pass through the Object. getOwnPorpertyNames (), obtained in... in traversal, Object. key (), JSON. stringify () is invisible, which is opposite to the string-based key. You can use Object. getOenPropertySymbols () obtains an array of object tokens. It is appropriate to combine the mark with const because they all have unchangeable features.

Translation

At present, the browser does not support ES6 widely, and different browsers are also different. The code you write may not be completely parsed in the user's browser, this is why we need to convert the code into an old version of Javascript (ES5) that is good luck in any current browser. This conversion is usually called translation, and we must do so, all browsers that we want to be compatible can run es6. There are many translation methods, including Bable, Traceur, and Typescript.

I hope this article will help you design the ECMAscript program.