Overview of ECMAScript6 carousel chart practices, ecmascript6 carousel chart

Overview of ECMAScript6 carousel chart practices, ecmascript6 carousel chart

Template string

This is one of my favorite features of ES6. It intuitively reflects the relationship between variables and strings. In ES5, if we want to add variables to strings, We need to write the following code:

animate(box, 'translate(-' + itemWidth * num + 'px,0)', 1000, function () {  box.style.transitionDuration = '';  box.style.transform = 'translate(-800px,0)';  flag = true;});

Now we can use the ES6 template string to directly combine the string with the variable for better understanding.

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 it very intuitive and convenient? From the two simple examples above, we can see that in ES6, strings are marked with reverse quotation marks.

Another feature is that the template string can output a line string, which cannot be achieved in ES5 traditional strings. It must be used (\ n) and cannot be written as a carriage return during writing, however, in the string template of ES6, you can directly write the carriage return and space, and then directly output the string during output, which is very convenient.

Let myString = 'abcdefffas '; console. log (myString);/* output abcdeffff fas */

Function Extension

1. Set the default value for the function

In the extension of the function, a function is added to set the default value for the function. This function is very good. Do you remember how we set the default value for the function in ES5?

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

Here we set the default value to achieve our expected results, until one day, we passed a = 0. At this time, we did not write this, for the program, 0 is false, therefore, a will take the default value of 10, thus failing to achieve our expected results. 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 Functions

Those who know Coffescript should be clear that the power of Cofficescript lies in its ubiquitous arrow function, which is very easy to write. Now, ES6 officially introduces arrow function, so that our program can be simplified, for example:

// Write var test = function (a, B) {return a + B;} // The Arrow function var test2 = test (a, B) of ES6) => a + B;

When writing slideshow, you need to move the mouse to the following small dot in the small Dot Array object is the first few, in order to make the image to the correct position, in ES5, we need to add attributes to the current object, which is cumbersome to write 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);}

This. index attribute is the index of the element that is put on the current mouse, and then the current element is obtained based on this index. However, in ES6, we can use the arrow function and the newly introduced findIndex in the array to find the index of the current active element. 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);  },false);}

The thisIndex obtained by the code above is the index that is currently placed with the mouse. Here I understand the n parameter in the arrow function. After the n parameter is passed in, the object in the array will be traversed, so as to find the object equal to this and then return its index, which is used hereArray. from (), which is a new method in the ES6 Array and can be converted into an Array.

ES6... Of Loop

The JS Code above uses for cyclically. In fact, you can use for in ES6... Instead of loop, this method is more concise. Do you remember for… in JS... In loop, this loop can loop through the keys in the key-value pair, but not the loop value, and... To make up for its shortcomings,... Of loops can use an array, Set and Map structure, some objects similar to arrays (such as arguments objects, DOM NodeList objects), Generator objects, and strings. So we can use this loop to replace the for loop, but pay attention to this point.If you directly use... Of loop. An error will be reported in chrome49. The official website has confirmed that this is a BUG in chrome49 and will be fixed in chrome51.So when I write, I use Array. from () to convert the NodeList object to an Array, so that you can safely perform the operation. The Code is as follows:

let liList = document.querySelectorAll('li');let ArrayliList=Array.form(liList);for(let li of liList){  li.addEventListener('mouseenter',function(){    let thisIndex = ArrayliList.findIndex((n) => n == this);  },false);}

Summary

The above is all the content in this article. Isn't it very concise? through this article, I feel that only these are the charm of ES6, and I hope it will help you learn ES6.