箭頭函數

箭頭函數是ES6新規範，旨在將method裡面呼叫的functions做出字面上的簡化，例如

window.addEventListener('keydown', function(e){
 console.log(e.keyCode);
})

上面這段程式碼表示在畫面上按下任何一個按鍵，會回傳該按鍵的keyCode
經過箭頭函式簡化後，可以變成這樣

window.addEventListener('keydown', e=>console.log(e.keyCode));

簡化後，他跟第一版程式具有一樣的功能

簡化進程詳解

首先，箭頭函式其實只是把function拿掉，並在()與{}之間加了一個箭頭=>以代表他其實是一個函式而已

window.addEventListener('keydown', (e)=>{console.log(e.keyCode);})

但是，()裡面只有一個參數而已，{}裡面也只有一行程式，實在沒有框起來的必要
所以當()的參數只有一位時可以省略括弧
而當{}的程式只有一行時，也能省略大括弧

window.addEventListener('keydown', e=>console.log(e.keyCode));

經過最終進化後成了超簡明版本

與陣列的關係

箭頭函數經常跟陣列相關的method搭配使用，例如nodeList的新式迴圈forEach()、陣列計算的reduce()、陣列整形的map()

forEach() 範例

forEach()可以代替jQuery的$()簡便的抓取nodeList並且做出迴圈處理

ul
 li apple
 li grape
 li banana

const mylist=document.querySelectorAll('ul li');
mylist.forEach(item => console.log(item.textContent))

//apple
//grape
//banana

reduce() 範例

const arr=[1,3,5,7,9];
arr.reduce((total,number)=>{
 return total+=number;
},0)

map() 範例

const arr=['apple', 'grape', 'banana'];
arr.map(item=>`GOOD ${item}`);
//(3) ["GOOD apple", "GOOD grape", "GOOD banana"]

綁定多種事件時的做法

畫面上有3個按鈕，每個按鈕都要各榜click與mouseover事件，一樣可以用同一個forEach()寫，各個事件之間用分號;隔開

button click
button click
button click

const btns=document.querySelectorAll("button");
btns.forEach((btn, n) => {
  btn.addEventListener("click", function(){
   console.log(`you clicked btn ${n+1}`);
 });
  btn.addEventListener("mousemove", function(){
   console.log(`you touched btn ${n+1}`);
 })
})