創建函數還有另外壹種非常簡單的語法,並且這種方法通常比函數表達式更好。
它被稱爲“箭頭函數”,因爲它看起來像這樣:
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();
壹開始,箭頭函數可能看起來並不熟悉,也不容易讀懂,但壹旦我們看習慣了之後,這種情況很快就會改變。
箭頭函數對于簡單的單行行爲(action)來說非常方便,尤其是當我們懶得打太多字的時候。
到目前爲止,我們看到的箭頭函數非常簡單。它們從 =>
的左側獲取參數,計算並返回右側表達式的計算結果。
有時我們需要更複雜壹點的函數,比如帶有多行的表達式或語句。在這種情況下,我們可以使用花括號將它們括起來。主要區別在于,用花括號括起來之後,需要包含 return
才能返回值(就像常規函數壹樣)。
就像這樣:
let sum = (a, b) => { // 花括號表示開始壹個多行函數 let result = a + b; return result; // 如果我們使用了花括號,那麽我們需要壹個顯式的 “return” }; alert( sum(1, 2) ); // 3
更多內容
在這裏,我們贊揚了箭頭函數的簡潔性。但還不止這些!
箭頭函數還有其他有趣的特性。
爲了更深入地學習它們,我們首先需要了解壹些 JavaScript 其他方面的知識,因此我們將在後面的 深入理解箭頭函數 壹章中再繼續研究箭頭函數。
現在,我們已經可以用箭頭函數進行單行行爲和回調了。
箭頭函數對于簡單的操作很方便,特別是對于單行的函數。它具體有兩種形式:
不帶花括號:(...args) => expression
—— 右側是壹個表達式:函數計算表達式並返回其結果。如果只有壹個參數,則可以省略括號,例如 n => n*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.") );
是不是看起來精簡多了?