箭頭函式，基礎

有另一種非常簡單且簡潔的函式建立語法，通常比函式表達式更好。

它稱為「箭頭函式」，因為它看起來像這樣

let func = (arg1, arg2, ..., argN) => expression;

這會建立一個函式 func，接受引數 arg1..argN，然後評估右側的 expression 並傳回其結果。

換句話說，它是

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

讓我們看一個具體的範例

let sum = (a, b) => a + b;

/* This arrow function is a shorter form of:

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

如你所見，(a, b) => a + b 表示一個函式，接受兩個名為 a 和 b 的引數。執行時，它會評估表達式 a + b 並傳回結果。

• 如果我們只有一個引數，則可以省略引數周圍的括號，讓它更簡潔。

  例如

  let double = n => n * 2;
  // roughly the same as: let double = function(n) { return n * 2 }
  
  alert( double(3) ); // 6

• 如果沒有參數，括號是空的，但必須存在

  let sayHi = () => alert("Hello!");
  
  sayHi();

箭頭函式可以用於與函式表達式相同的方式。

例如，動態建立一個函式

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello!') :
  () => alert("Greetings!");

welcome();

箭頭函式一開始可能看起來不熟悉且不太好讀，但當眼睛習慣結構後，這種情況會快速改變。

當我們懶得寫很多字時，它們非常方便用於簡單的一行動作。

多行箭頭函式

到目前為止我們看到的箭頭函式非常簡單。它們從 => 的左側取得參數，評估並回傳右側的表達式。

有時我們需要一個更複雜的函式，包含多個表達式和陳述式。在這種情況下，我們可以用大括號將它們括起來。主要的區別是大括號需要在其中使用 return 才能回傳值（就像一般的函式一樣）。

像這樣

let sum = (a, b) => {  // the curly brace opens a multiline function
  let result = a + b;
  return result; // if we use curly braces, then we need an explicit "return"
};

alert( sum(1, 2) ); // 3

摘要

箭頭函式對於簡單的動作很方便，特別是對於一行動作。它們有兩種形式

1. 沒有大括號：(...args) => expression – 右側是一個表達式：函式評估它並回傳結果。如果只有一個參數，可以省略括號，例如 n => n*2。
2. 使用大括號：(...args) => { body } – 括號允許我們在函式內寫入多個陳述式，但我們需要一個明確的 return 來回傳一些東西。