ECMAScript6輪播圖實踐知識總結，ecmascript6輪播圖

ECMAScript6輪播圖實踐知識總結，ecmascript6輪播圖

模板字串

這是我非常喜歡的ES6的特點之一，非常直觀的反應出變數和字串之間的關係，在ES5中，如果我們想在字串中添加變數，需要用如下寫法：

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

現在用ES6的模板字串，可以直接把字串和變數相結合，更加易懂。

animate(box, `translate(-${itemWidth*num}px,0)`, 1000, function() {  box.style.transitionDuration = '';  box.style.transform = `translate(-${itemWidth*(item.length-2)}px,0)`;  flag = true;});

是不是非常直觀方便，從上面的兩個簡單樣本中可以看出，在ES6中，字串用反引號（``）標識，這一點需要知道。

還有一個特點，模板字串可以輸出折行的字串，這在ES5傳統字串中是無法做到的，必須藉助（\n），且不能在書寫時候寫入斷行符號，但是在ES6的字串模板中，可以直接寫入斷行符號，空格，然後在字串輸出時候直接輸出，非常方便。

let myString=`abcdeffff fas`;console.log(myString);/*輸出abcdeffff fas*/

對函數的擴充

1.給函數設定預設值

在對函數的擴充中，添加了一項給函數設定預設值的功能，這個功能可以說是非常贊的。是否記得我們在ES5中是怎麼給函數設定預設值？

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

這裡我們設定預設值，可以達到自己的預期效果，直到有一天，我們把a=0傳入，這時候，我們這麼寫就不對了，對於程式來說，0就是false，所以a會取預設值10，從而達不到我們預期的效果。但是ES6為我們提供非常好的設定預設值的方式。上面的代碼可以改寫成下面的這樣：

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

2.箭頭函數

瞭解Coffescript的同學應該清楚，Cofficescript的強大之處在於它的無處不在的箭頭函數，寫起來非常爽，現在，ES6正式引入箭頭函數，讓我們的程式可以得到簡化，例如：

//ES5的寫法var test = function (a,b){  return a+b;}//ES6的箭頭函數var test2 = test(a,b)=>a+b;

在寫輪播時候，需要滑鼠移動到下面的這個小圓點在小圓點類數組對象中是第幾個，從而才能讓圖運動到正確位置，在ES5的時候，我們需要給當前這個對象添加屬性，寫起來比較繁瑣，寫法如下：

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屬性就是當前的滑鼠放上去的元素的索引，然後根據這個索引去得到當前的元素。但是在ES6中，我們可以直接使用箭頭函數以及在數組中新引入的findIndex來找到當前的使用中的元素的索引，代碼如下：

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就是當前滑鼠放上去的索引，這裡我對箭頭函數中n這個參數的理解是，傳入參數n後會遍曆數組中的對象，從而找到與this相等的那個對象，然後返回它的索引，這裡用到Array.from()，這是一個ES6中數組中新增的方法，可以將類數群組轉換成數組。

ES6的for…of迴圈

上面的JS代碼迴圈用了for，其實可以用ES6中的for…of迴圈去代替，這樣寫法更加簡潔。是否記得JS中的for…in迴圈，這個迴圈可以迴圈索引值對中的鍵，但是無法迴圈值，而for…of的出現正是為了彌補它的不足，for…of迴圈可以使用的範圍包括數組、Set和Map結構、某些類似數組的對象（比如arguments對象、DOM NodeList對象）、Generator對象，以及字串。所以我們可以利用該迴圈替代for迴圈，但是這裡要注意一點如果直接用for…of迴圈，在chrome49下會報錯，官方已證實這是chrome49的BUG，將會在chrome51中修複，所以我在寫的時候，利用Array.from()將NodeList對象轉換為數組，這樣可以放心操作，代碼如下：

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);}

總結

以上就是本文的全部內容，是不是非常簡潔，通過這篇文章感覺僅僅只是這些就已經讓我感受到ES6的魅力了，希望對大家學習ES6能有所協助。