JavaScript 核心觀念(64) - ES6 章節:箭頭函式 - 箭頭函式簡介

前言

接下來是一個新的章節,也就是箭頭函式。

箭頭函式簡介

箭頭函式又稱之為 Arrow Function,請注意箭頭函式是一個表達式,因此正確名稱是箭頭函式表達式(arrow function expression),而箭頭函式是 ES6 所新增的語法,基本上 ES6 語法滿多都是屬於語法糖的一種,什麼是語法糖呢?簡單來講就是跟糖果一樣甜,很方便你開發與撰寫,通常特色會是簡短、好用以及好閱讀不等,例如以往建議原型時必須寫一大推 prototype,但是 ES6 之後出了一個 class 語法方便使用,當然還有一些是屬於新的語法,而本篇並不著重於講這個,所以拉回箭頭函式。

那麼以下是一個基本的範例:

1
2
3
4
5
const myName = function(name) {
return 'myName is :' + name;
}

console.log(myName('Ray')); // myName is Ray

透過 ES6 的箭頭函式我們可以將上面程式碼改成以下:

1
2
3
4
5
const myName = (name) => {
return 'myName is :' + name;
}

console.log(myName('Ray')); // myName is Ray

而箭頭函式還具備縮寫能力,當裡面的程式碼內容是屬於表達式時,你就可以省略 return{ }

1
2
3
const myName = (name) => 'myName is :' + name;

console.log(myName('Ray')); // myName is Ray

除此之外當箭頭函式的參數只有一個時,可以連參數括號都省略:

1
2
3
const myName = name => 'myName is :' + name;

console.log(myName('Ray')); // myName is Ray

但是要注意如果沒有參數或者有兩個參數時,參數括號是無法省略的唷。

參考文獻

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你也可以考慮請我喝一杯咖啡

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ