1-4 箭頭函式（arrow functions）

箭頭函式（arrow functions）是在 ES6 中另一種更簡便來定義函式的語法。傳統上我們會這樣定義 JavaScript 的函式：

function showIphonePrice(currentPrice) {
return `The iPhone is ${currentPrice} now.`;
}
console.log(showIphonePrice(26900));
// The iPhone is 26900 now.
note

💡 ECMAScript 是什麼？ES6 又是什麼？ ECMAScript 可以視作 JavaScript 這套程式語言的規範，在這當中會定義所有與 JavaScript 相關的語法和規格，語法標準訂定後再由各瀏覽器去實作底層的功能。

ES6 的全名則是指 ECMAScript 6，它指的是第六版的 ECMAScript，而這個版本推出時擴增了 JavaScript 大量的語法，因此可以視作 JavaScript 非常重要的「威力加強版」，又因為它推出的時間是在 2015 年，因此又被稱作 ES2015（ECMAScript 2015）。

2015 年後雖然每年都有持續推出新版的 ECMAScript（例如， ES7、ES8、...），但多是小幅度的語法擴增或加強，因此有些開發者會以 ES6 來統稱 2015 年後的所有 JavaScript 新語法。

基本使用#

在 ES6 中則可以用箭頭函式讓它變得更精簡。箭頭函式的使用會把函式的參數放在前面的小括號 () 中，中間搭配 =>，原本函式執行的內容則放在最後的大括號 {} 中：

const showIphonePrice = (currentPrice) => {
return `The iPhone is ${currentPrice} now.`;
};
console.log(showIphonePrice(26900)); // The iPhone is 26900 now.

當函式只有一個參數時可以省略參數外的小括號#

箭頭函式的寫法有時會讓初學者感到困惑，因為在不同的情況下可以簡化語法，但實際上表達的是相同的意思。以上面的函式為例，當箭頭函式中的參數只有一個時，可以簡化外層的小括號，功能是一樣的，變成：

// 當函式參數只有一個時，可以省略小括號，因此這裡 currentPrice 外的小括號可以省略
const showIphonePrice = (currentPrice) => {
return `The iPhone is ${currentPrice} now.`;
};

當函式會直接回傳值時，可以省略箭頭後的大括號#

如果在箭頭函式中只會回傳一個值而不需要做其他操作的話，甚至可以直接在 => 後面加上回傳值，例如：

// 函式不需要做其他操作直接回傳時，可以省略 => 後的 { }
const showIphonePrice = (currentPrice) => `The iPhone is ${currentPrice} now.`;
console.log(showIphonePrice(26900)); // The iPhone is 26900 now.

有些時候開發者會透過箭頭函式直接回傳物件，這時候因為函式直接回傳值時可以省略 => 後的大括號，但因為物件本身的語法就是使用大括號，因此若想要直接回傳一個物件，物件外面必須包上小括號，讓 JavaScript 可以知道大括號內是一個物件，像是這樣：

// 若箭頭函式要直接回傳的是個物件，物件外圍需使用小括號包起來
const showIphonePrice = () => ({
deviceName: 'iPhone 11',
price: 24900,
brand: 'Apple',
merchants: ['apple store', 'pchome', 'momo', 'shoppe'],
});
console.log(showIphonePrice()); // { deviceName: 'Iphone 11', ... }
箭頭函式不單單只是精簡寫法的函式定義語法

許多人誤以為箭頭函式只是讓開發者可以用更簡潔的方式來定義函式，但有時錯用了箭頭函式會造成程式錯誤。這是因為在 JavaScript 中有一個關鍵字稱作 this，而箭頭函式會改變這個關鍵字 this 所指稱到的對象，造成使用原本函式語法和箭頭函式語法有不同的結果。因為多數的時候我們不會涉及到這樣的問題，且 this 的說明與本書的關聯較低，所以若有需要則可以到網路上尋找更多「箭頭函式與 this 間關聯」的說明。

Edit this page