DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> ECMAScript6輪播圖實踐知識總結
ECMAScript6輪播圖實踐知識總結
編輯:關於JavaScript     

模板字符串

這是我非常喜歡的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=`abc
de
ffff 
fas`;
console.log(myString);
/*輸出abc
de
ffff 
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能有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved