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

發表於 2021-08-07 分類於 JavaScript

Google AD

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

Liker 讚賞

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

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

前言

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

箭頭函式簡介

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

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

const myName = function(name) {
  return 'myName is :' + name;
}

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

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

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

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

參考文獻

JavaScript 核心篇