The difference between front and back is even smaller--about ES (ECMASCRIPT) 6

ES6 officially released in June 2015. More than a year's time, the browser also to support the ES6 made a great improvement, so students do not have to worry about the browser you write code do not know ~

So long things must have been the great God analysis, today we take a back-end rookie's perspective to re-read the new grammar ES6 added.

First of all, ES6 's support for Class (class) has risen to a new height, allowing for construction and inheritance, as the new syntax looks like:

Inherit class Parent {    Constructor (PAR) {this        . Name = par;        Console.log (' [Parent class ' constructor method ' + this. Name + '] ');    }    SayHello () {        Console.log (' SayHello method of the parent class Hello ' + this. Name);}    } Class Child extends Parent {    Constructor (name) {        super (' [subclass called ' Construct of parent class ' + name + '] ');    }    Saygoodbye () {        Console.log (' Saygoobbue method of the subclass GoodBye ' + this. Name);}    }

Call
var a = new parent (' ES6 ');
A.sayhello ();
var b = new Child (' Max ');
B.sayhello ();
B.saygoodbyr ();

have you ever been amazed? (This is really a JS file), the effect after the run is this:

as with the backend, the subclass inherits the parent class using the keyword extends, which, after inheritance, can use the keyword super to invoke the parent class property.

And I found here that this is also included in the quilt after being inherited, that is to say: the scope of this will be passed down. (refer to the last line of the run result.) ）

Above is the class (class) inheritance, with the inheritance, we build the JS code, we will get more powerful ability (extensible, easy to maintain, easy to read, etc.).

Some students may have said: I am not used to this writing, feel like JS ah Hello!

It doesn't matter, how can ES6 forget our object literal? Inheritance, of course, also appears in the application of object literals:

var es6parent = {    cons (mess) {        Console.log (' Es6parent method of prototype cons ' + mess);}    } var es6child = {    //Set prototype to Es6parent, equivalent to inherit    __proto__: es6parent, Work    () {        Console.log (' The work method of the lower Es6child I\ ' m very busy! ');}    }

Call

Es6parent.cons (' prototype Cons method ');

Es6child.cons (' method of lower-level invocation of upper-level prototypes ');

Es6child.work ();

The results of the operation are as follows:

The way to set up is also super simple: Use the keyword ' __proto__ ' to set up a prototype (just to change the name of the prototype chain)

Here are some simple and useful syntax sugars, first of all convenient parameter settings:

var Name = ' Max '; Console.log (' I am a very handy tilde with parameter ${name} ');

The focus is ${}, which can be directly in the string into the parameters (stitching is convenient for a lot of wood), but need and the wave character (') to use in order to be effective oh ~

Next is ... The syntax, when it appears in the formal parameter list, represents a non-quantitative parameter:

Function Show (... all) {    All.foreach (function (i, v) {        console.log (' value of non-quantitative parameter: ${v} ');    }

Call
Show (1,2,3,4,5,6);

The results of the operation are as follows:

Is it much less labor-saving when defining? There are better uses, when ... Appears in the argument list, it will allow you to pass in the array directly (instead of using apply):

function Sayhi (name, age, Sex) {    console.log (' Hello everyone, I am ${name}, this year ${age}, I am ${sex} born. `);} Call var arr = [' xiaoming ', 18, ' Male '];sayhi (... arr.);

The results of the operation are as follows:

When the SAYHI function is defined, 3 parameters are written, and the call is used ... When an array is passed in, it starts from the 0 subscript and sequentially matches the parameter.

In our work, we often use callback functions to do certain things, but each callback has to write a complete funciton (troublesome to say), ES6 introduced a lambda expression, greatly optimized this operation:

function CallBack (back) {back    ();} The two methods of invocation contrast callback (function () {    console.log (' I am the old calling method ');}); CallBack (() =>console.log (' I am the lambda invocation method ');

The results of the operation are as follows:

Is it more elegant to pass in a function that uses lambda? If you compare Moe, then one more object literal version:

var show_msg = (name, job) = {    Console.log (' Hello, my Name ${name}, is a ${job} ')};//call show_msg (' Twilight ', ' Software Siege lion ');

The results of the operation are as follows:

Now everyone should be very clear: () = Syntax,=> is the argument list, followed by the method body. You can see a similar grammar later.

There are a lot of grammatical sugars, I say so much first, because the following is more important: the new data type and the implementation of monitoring.

ES6 new Map,set, as well as Weakmap, Weakset four types.

What difference do they have? Let's start by saying that Map:map is stored in a key-value manner, and that all keys within the map are unique and look at the result after the for-in traversal:

var par1 = ' key_1 '; var par2 = ' key_2 '; var testmap = new Map (); Testmap.set (PAR1, ' first value '); Testmap.set (Par2, ' second value '); TestMap. Set (PAR1, ' third value '); for (I of TestMap) {    console.log (i);}

You can see that the third value replaces the first value instead of coexistence, because the first value is the same as the third value key.

The difference between set and map is that it is stored as value and does not allow duplicate values to appear:

var par11 = ' value_1 '; var par22 = ' value_2 '; var testset = new Set (); Testset.add (PAR11); Testset.add (PAR22); Testset.add ( PAR11); for (I of Testset) {    console.log (i);}

As for Weakmap and Weakset, they all work the same way, except that both types of keys use weak references, that is, objects that are property keys are automatically reclaimed (automatically freed) if they are not elsewhere referenced.

There's not much to explain here, but I recommend you use Weakmap and Weakset.

Now we're finally talking about the listener (the listener is the play)

The listener is a very interesting thing, it gives us great convenience, which is especially important when implementing the MVVM model, and the listener in ES6 looks like this:

object being monitored var ob = {name: ' Max ', like: ' Women '};//trigger listener program var pro = {    set:function (cagobj, Cagkey, Cagvalue) {        C Onsole.log (' ${cagobj[cagkey]} changed to ${cagvalue} ');        Cagobj[cagkey] = Cagvalue;    }} OB = new Proxy (ob, pro); ob.like = ' man ';

The function defined within the set will be triggered automatically when the listener changes, and the 3 values in the parameter list are defined by default, in order: the modified object, the object's key, and the object's value.

It is important to note that if you trigger a listener for an element, its original modification process will be blocked (if you do not take this step), so we need to explicitly modify it.

The results are as follows:

With these features, it has become a lot easier for us to write a data frame similar to Vue.

In addition, ES6 also updated many of the functions under the namespace (e.g. math), which are not listed here (not enough to write and a lot of online).

Finally, the introduction of ES6 let me intuitively feel the gap between the front and back to further reduce, I hope that one day JS can not use the backend to complete data interaction ~ (Do not spit groove I study late)

The difference between front and back is even smaller--about ES (ECMASCRIPT) 6