ECMAScript6 The Practice knowledge summarization _javascript skill of the carousel map

Template string

This is one of the characteristics of the ES6 I like very much, very intuitive reaction to the relationship between the variable and the string, in ES5, if we want to add a variable in the string, we need to use the following wording:

Animate (box, ' Translate (-' + itemwidth * num + ' px,0 ') ', 1000, function () {
  box.style.transitionDuration = ';
  Box.style.transform = ' Translate ( -800px,0) ';
  Flag = true;
});

Now with the ES6 template string, you can directly combine strings and variables to make it easier to understand.

Animate (box, ' Translate (-${itemwidth*num}px,0) ', 1000, function () {
  box.style.transitionDuration = ';
  Box.style.transform = ' Translate (-${itemwidth* (item.length-2)}px,0) ';
  Flag = true;
});

is not very intuitive and convenient, as you can see from the two simple examples above, in ES6, the string is identified with an inverted quotation mark ('), which needs to be known.

There is also a feature that the template string can output a string of folded lines, this is not possible in the ES5 traditional string, it must be (\ n) and cannot be written to enter, but in the ES6 string template, it is convenient to write a carriage return, a space, and then directly output the string output.

Let mystring= ' abc
de
ffff 
FAs ';
Console.log (myString);
/* Output ABC
de
ffff 
fas*/

Extensions to functions

1. Set default values for functions

In the extension of a function, add a function to set the default value of the function, this function can be said to be very good. Do you remember how we set a default value for a function in ES5?

function test (a,b,c) {
  var a=a| | Ten;
  var a=b| | ;
  var c=c| | ;
  Console.log (a+b+c);
}

Here we set the default value, can achieve their desired effect, until one day, we put a=0 into, at this time, we write this is wrong, for the program, 0 is false, so a will take the default value of 10, so as not to achieve our expected effect. But ES6 provides us with a very good way to set the default value. The above code can be rewritten as follows:

function test (a=10,b=15,c=20) {
  console.log (a+b+c);
}

2. Arrow function

Know Coffescript students should be clear, Cofficescript is strong in its ubiquitous arrow function, write very cool, now, ES6 formally introduced the arrow function, so that our program can be simplified, for example:

ES5 's writing
var test = function (a,b) {return
  a+b;
}
ES6 arrow function
var test2 = Test (a,b) =>a+b;

In the write carousel, you need to move the mouse to the following dot in the small dot class array object is the first few, so that the graph movement to the correct position, in the ES5, we need to add attributes to the current object, write more cumbersome, written as follows:

var lilist = document.queryselectorall (' li ');
for (Var i=0;i<lilist.length;i++) {
  lilist[i].index=i;
  Lilist[i].addeventlistener (' MouseEnter ', function () {
    console.log (this.index);
  },false);

The This.index property is the index of the current mouse-placed element, and then the current element is derived from the index. But in ES6, we can find the index of the current active element directly using the arrow function and the newly introduced FindIndex in the array, the code is as follows:

Let lilist = Document.queryselectorall (' li ');
Let Arraylilist=array.form (lilist);
for (Var i=0;i<lilist.length;i++) {
  lilist[i].index=i;
  Lilist[i].addeventlistener (' MouseEnter ', function () {let
    thisindex = Arraylilist.findindex ((n) => n = = this); C19/>},false);
}

The above code gets the Thisindex is the current mouse to put up the index, here my understanding of the arrow function n this argument is that, pass in the parameter n will walk through the array of objects, so as to find the same object with this, and then return its index, where the Array.from () , this is a new method in an array of ES6 that converts an array of classes to a group.

The For...of cycle of ES6

The above JS code loop used for, in fact, can use the ES6 in the For...of cycle to replace, so the writing is more concise. Do you remember the for...in loop in JS, this loop can loop key-value pairs, but not the loop value, and For...of is to make up for its shortcomings, For...of loop can be used in the scope of the array, set and map structure, Some objects that resemble arrays (such as arguments objects, DOM nodelist objects), generator objects, and strings. So we can use the loop instead of the For loop, but note here that if you use the For...of loop directly, the chrome49 will make an error, the official has confirmed that this is a chrome49 bug that will be repaired in chrome51 , so I wrote it, Use Array.from () to convert the NodeList object to an array, which can be safely manipulated with the following code:

Let lilist = Document.queryselectorall (' li ');
Let Arraylilist=array.form (lilist);
For (Let Li-lilist) {
  li.addeventlistener (' MouseEnter '), function () {let
    thisindex = Arraylilist.findindex (n ) => n = = this);
  },false);

Summarize

Above is the entire content of this article, is not very concise, through this article feel just these have let me feel the charm of ES6, hope to learn ES6 can help.