Template string
This is one of the characteristics of ES6 that I like very much. It reflects the relationship between variables and strings very intuitively. In ES5, if we want to add variables to strings, we need to use the following writing method:
animate(box, 'translate(-' + itemWidth * num + 'px,0)', 1000, function () { box.style.transitionDuration = ''; box.style.transform = 'translate(-800px,0)'; flag = true;});Now using ES6 template strings, 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 it very intuitive and convenient? From the two simple examples above, it is obvious that in ES6, strings are marked with backticks (``), which needs to be known.
There is another feature. The template string can output a folded string, which is impossible in traditional ES5 strings. It must be used (/n) and cannot be written to enter the carriage return when writing. However, in the ES6 string template, it can be directly written to enter the carriage return, space, and then output directly when the string is output, which is very convenient.
let myString=`abcdeffff fas`;console.log(myString);/*Output abcdeffff fas*/
Extension of functions
1. Set default values for the function
In the extension of the function, a function is added to set default values for the function, which can be said to be very good. Do you remember how we set default values for functions 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 effect until one day, we pass a=0 in. At this time, it is wrong for us to write this way. For the program, 0 is false, so a will take the default value of 10, thus failing to achieve the expected effect. But ES6 provides us with a very good way to set default values. The above code can be rewritten as follows:
function test(a=10,b=15,c=20){ console.log(a+b+c);}2. Arrow function
Students who understand Cofficscript should be clear that the power of Cofficescript is its ubiquitous arrow function, which is very pleasant to write. Now, ES6 has officially introduced arrow function, so that our program can be simplified, for example:
//The writing method of ES5 var test = function (a,b){ return a+b;}//The arrow function of ES6 var test2 = test(a,b)=>a+b;When writing carousels, you need to move the mouse to the following small dots in the array object of the small dots, so that the graph can move to the correct position. In ES5, we need to add attributes to the current object, which is more cumbersome to write, and the writing method is 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 this.index attribute is the index of the element placed on the current mouse, and then the current element is obtained based on this index. But in ES6, we can directly 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);}ThisIndex obtained by the above code is the index placed on the current mouse. Here I understand the parameter n in the arrow function. After passing in the parameter n, it will traverse the object in the array, so as to find the object equal to this, and then return its index. Array.from() is used here. This is a new method added to the array in ES6, which can convert the class array into an array.
ES6's for…of loop
The above JS code loop uses for, but in fact, it can be replaced by the for…of loop in ES6, which makes the writing more concise. Do you remember the for…in loop in JS. This loop can loop the keys in key-value pairs, but cannot loop the values. The emergence of for…of is to make up for its shortcomings. The ranges that can be used by the for…of loop include arrays, Set and Map structures, some array-like objects (such as arguments objects, DOM NodeList objects), Generator objects, and strings. So we can use this loop to replace the for loop, but here we should note that if you use the for...of loop directly, an error will be reported under chrome49. The official has confirmed that this is a bug of chrome49 and will be fixed in chrome51 . So when I was writing, I used Array.from() to convert the NodeList object into an array, so that I can operate with confidence. 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);}Summarize
The above is all the content of this article. Isn’t it very concise? Through this article, I feel that just these things have already made me feel the charm of ES6. I hope it will be helpful to everyone to learn ES6.