現代 JavaScript 教程 — 箭頭函數基礎知識

箭頭函數，基礎知識

建立函數還有另一種很是簡單的語法，而且這種方法一般比函數表達式更好。

它被稱爲「箭頭函數」，由於它看起來像這樣：

let func = (arg1, arg2, ...argN) => expression
複製代碼

……這裏建立了一個函數 func，它接受參數 arg1..argN，而後使用參數對右側的 expression 求值並返回其結果。

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

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

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

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

/* 這個箭頭函數是下面這個函數的更短的版本： 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;
  // 差很少等同於：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) => {  // 花括號表示開始一個多行函數
  let result = a + b;
  return result; // 若是咱們使用了花括號，那麼咱們須要一個顯式的 「return」 
};

alert( sum(1, 2) ); // 3
複製代碼

---

更多內容

在這裏，咱們讚賞了箭頭功能的簡潔性。但還不止這些！

箭頭函數還有其餘有趣的特性。

爲了更深刻地學習它們，咱們首先須要瞭解一些 JavaScript 其餘方面的知識，所以咱們將在後面的 深刻研究箭頭函數 一章中再繼續研究箭頭函數。

如今，咱們已經能夠用箭頭函數進行單行操做和回調了。

---

總結

對於一行代碼的函數來講，箭頭函數是至關方便的。它具體有兩種：

1. 不帶花括號：(...args) => expression — 右側是一個表達式：函數計算表達式並返回其結果。
2. 帶花括號：(...args) => { body } — 花括號容許咱們在函數中編寫多個語句，可是咱們須要顯式地 return 來返回一些內容。

做業題

先本身作題目再看答案。

用箭頭函數重寫

重要程度：⭐️⭐️⭐️⭐️⭐️

用箭頭函數重寫下面的函數表達式：

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.")
);
複製代碼

是否是看起來精簡多了？

本文首發於在微信公衆號「技術漫談」，歡迎關注。

---

現代 JavaScript 教程：開源的現代 JavaScript 從入門到進階的優質教程。React 官方文檔推薦，與 MDN 並列的 JavaScript 學習教程。

在線免費閱讀：zh.javascript.info

---

掃描下方二維碼，關注微信公衆號「技術漫談」，訂閱更多精彩內容。