JS 筆記 - ES6：箭頭函式

箭頭函式是 ES6 新增的語法，分成兩大類：

• 語法糖：讓函式撰寫更精簡，但運作邏輯跟觀念跟傳統函式相同。
• 新方法：讀起來也更直觀、簡便，邏輯執行上會稍有不同。
  本篇來記錄如何將傳統函式改寫成箭頭函式。

箭頭函式基本認識與改寫

下方有一個函式：

const fnA = function (params) {
  return "字串" + params;
};
console.log(fnA("string"));

最常見到的改寫方式就是把函式這個關鍵字 function 用 => 代替，並移到參數後方。

const fnA = (params) => {
  return "字串" + params;
};
console.log(fnA("string"));

當程式碼為表達式時可縮寫

表達式就是會 return 一個值的就是表達式，以原本的程式碼繼續改寫就是 return 這行，當只有回傳一個值，沒有其他內容，就可以進行縮寫。

• 首先就先改成一行，並把大括號與 return 去掉。
• 拿掉大括號與 return 時，箭頭函式會自動 return 該結果。

const fnA = (params) => "字串" + params;
console.log(fnA("string"));

當只有一個參數時可縮寫

當表達式只有一個參數的時候，參數外的括號可以拿掉。

const fnA = (params) => "字串" + params;
console.log(fnA("string"));

當沒有參數時縮寫

上方提到只有一個參數可省略小括號，可是沒有參數時，括號不可省略，不然會跳錯。

記得後方參數的屬性也要拿掉。

const fnA = () => "字串";
console.log(fnA("string"));

當有兩個參數時縮寫

只有一個參數才能省略小括號，若參數有包含過兩個以上，就需要小括號。

const fnA = (a, b) => "字串" + a + b;
console.log(fnA("string", 1, 2));