Javascript 箭頭函數(shù)，基礎(chǔ)知識

創(chuàng)建函數(shù)還有另外一種非常簡單的語法，并且這種方法通常比函數(shù)表達式更好。

它被稱為“箭頭函數(shù)”，因為它看起來像這樣：

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

這里創(chuàng)建了一個函數(shù) func，它接受參數(shù) arg1..argN，然后使用參數(shù)對右側(cè)的 expression 求值并返回其結(jié)果。

換句話說，它是下面這段代碼的更短的版本：

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

讓我們來看一個具體的例子：

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

/* 這個箭頭函數(shù)是下面這個函數(shù)的更短的版本：

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

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

可以看到 (a, b) => a + b 表示一個函數(shù)接受兩個名為 a 和 b 的參數(shù)。在執(zhí)行時，它將對表達式 a + b 求值，并返回計算結(jié)果。

• 如果我們只有一個參數(shù)，還可以省略掉參數(shù)外的圓括號，使代碼更短。

例如：

let double = n => n * 2;
// 差不多等同于：let double = function(n) { return n * 2 }

alert( double(3) ); // 6

• 如果沒有參數(shù)，括號則是空的（但括號必須保留）：

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

sayHi();

箭頭函數(shù)可以像函數(shù)表達式一樣使用。

例如，動態(tài)創(chuàng)建一個函數(shù)：

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

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

welcome();

一開始，箭頭函數(shù)可能看起來并不熟悉，也不容易讀懂，但一旦我們看習(xí)慣了之后，這種情況很快就會改變。

箭頭函數(shù)對于簡單的單行行為（action）來說非常方便，尤其是當(dāng)我們懶得打太多字的時候。

多行的箭頭函數(shù)

到目前為止，我們看到的箭頭函數(shù)非常簡單。它們從 => 的左側(cè)獲取參數(shù)，計算并返回右側(cè)表達式的計算結(jié)果。

有時我們需要更復(fù)雜一點的函數(shù)，比如帶有多行的表達式或語句。在這種情況下，我們可以使用花括號將它們括起來。主要區(qū)別在于，用花括號括起來之后，需要包含 return 才能返回值（就像常規(guī)函數(shù)一樣）。

就像這樣：

let sum = (a, b) => {  // 花括號表示開始一個多行函數(shù)
  let result = a + b;
  return result; // 如果我們使用了花括號，那么我們需要一個顯式的 “return”
};

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

更多內(nèi)容

在這里，我們贊揚了箭頭函數(shù)的簡潔性。但還不止這些！

箭頭函數(shù)還有其他有趣的特性。

為了更深入地學(xué)習(xí)它們，我們首先需要了解一些 JavaScript 其他方面的知識，因此我們將在后面的 深入理解箭頭函數(shù) 一章中再繼續(xù)研究箭頭函數(shù)。

現(xiàn)在，我們已經(jīng)可以用箭頭函數(shù)進行單行行為和回調(diào)了。

總結(jié)

箭頭函數(shù)對于簡單的操作很方便，特別是對于單行的函數(shù)。它具體有兩種形式：

1. 不帶花括號：?(...args) => expression? —— 右側(cè)是一個表達式：函數(shù)計算表達式并返回其結(jié)果。如果只有一個參數(shù)，則可以省略括號，例如 ?n => n*2?。
2. 帶花括號：?(...args) => { body }? —— 花括號允許我們在函數(shù)中編寫多個語句，但是我們需要顯式地 ?return ?來返回一些內(nèi)容。

任務(wù)

用箭頭函數(shù)重寫

用箭頭函數(shù)重寫下面的函數(shù)表達式：

function ask(question, yes, no) {
  if (confirm(question)) yes();
  else no();
}

ask(
  "Do you agree?",
  function() { alert("You agreed."); },
  function() { alert("You canceled the execution."); }
);

解決方案

function ask(question, yes, no) {
  if (confirm(question)) yes();
  else no();
}

ask(
  "Do you agree?",
  () => alert("You agreed."),
  () => alert("You canceled the execution.")
);

是不是看起來精簡多了？