箭頭函式

箭頭函式功能與一般函式的用法大致差不多，不過寫法卻比一般函式還要簡潔的多。
這裡就直接來時做如何把一般函式改成箭頭函式，如此會比較好理解兩者之間的差異。

EX1:

//原函式
function sum(a,b){
return a+b;
}

//改成箭頭函式
var sum = (a,b)=> a+b;

1.可以省掉 function 關鍵字
2.加上箭頭
3.單一行陳述不需要 {} ，而且在沒有 {} 情況下就算沒寫 return 會預設 return
4.//如果只有一個參數 () 也可以省略

EX2:

//原函式
function sayHi(){
console.log('Hi!!');
}
//改成箭頭函式
var sayHi = ()=>console.log('Hi!!')

EX3:

//原函式
document.addEventListener('click',function(){
console.log('clicked!');
})
//改成箭頭函式
document.addEventListener('click',()=>console.log('clicked!'));

箭頭函式需要注意之處

1.沒有arguements

一般函式:

const abc = function() {
  console.log(arguments); 
}
abc('a', 'b', 'c');
//VM1203:2 Arguments(3) ['a', 'b', 'c', callee: ƒ, Symbol(Symbol.iterator): ƒ]

就會顯示出arguements這樣的類陣列

箭頭函式:

const abc = () => {
  console.log(arguments); 
}
abc('a', 'b', 'c');//VM1133:2 Uncaught ReferenceError: arguments is not defined

2.箭頭函式綁定的this不同

一般函式:

var person={
name: 'Lisa',
call:function(){
console.log(this.name);
}
}
person.call()//Lisa

箭頭函式:

var person={
name: 'Lisa',
call:()=>console.log(this.name)
}
person.call()//undifined

因為這個函式指的是window 所以才得到undifined

W3school JavaScript Arrow Function
鐵人賽：箭頭函式 (Arrow functions)