Deconstruction, parameters, modules and markings

Source: Internet
Author: User

Deconstruction, parameters, modules and markings (cont.)

Vi. Deconstruction

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

1234567 //ES6let[x,y]=[1,2];//x=1,y=2 //ES5var arr=[1,2];var x=arr[0];vary=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:

123 letx=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:

12345 letobj={x:1,y:2}; let {x,y}=obj;//a=1,b=1或者let{x:a,y:b}=obj;//a=1,b=2

Another interesting pattern is to simulate multiple return values:

12345 functiondoSomething(){     return [1,2];} 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:

1234 functiondoSomething({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:

1234567 functiondoSomething(){      return x*y;}doSomething(5);//10doSomethinf(5,undefined);//10doSomething(5,3);//15<br><br>//ES5中给参数赋默认值<br>function doSomething(x,y){<br>  y=y===undefined?2:y;<br>  return x*y;<br>}

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:

12345 funtion doSomething(x,...remaining){    returnx*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:

123456789101112 //lib/ath.jsexport function sum(x,y){    return x+y}; export var pi=3.14; //app.js import{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:

1234 //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:

12345678910 //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 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:

123456789101112131415 classVehicle{     constructor(name){         this.name=name;         this.kind=‘‘Vehicle";     }         getName(){         returnthis.name;    }}; //Create an instanceletmyVehicle=newVehicle(‘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:

123456789101112 classCar extendsVehicle{     constructor(name){            super(name);            this.kind=‘car‘;     }}let myCar=newCar(‘bumpy‘);myCar.getName();//‘bumpy‘;myCar instanceofCar;//truemyCar instanceofVehicle;//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:

1234 const MY_CONSTANT=Symbol();letobj={};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 markings (continued) Sunny 2016-08-07 11:47 read: 80 comments: 0 ES6 new features-------arrays, math, and extension operators (continued) Sunny 2016-07-31 14:43 read: 31 Comments: 0

Deconstruction, parameters, modules and markings

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.