JavaScript箭頭函數是ECMAScript 6中引入的編寫函數表達式的一種簡便方法。通常,在JavaScript中,可以通過兩種方式創建函數:
函數語句。 函數表達式。可以如下所示創建函數語句:
function add(num1, num2) {var res = num1 + num2;return res;}var sum = add(7, 2);console.log(sum);也可以創建相同功能的函數表達式,如下所示:
var add = function (num1, num2) {var res = num1 + num2;return res;}var sum = add(7, 2);console.log(sum);ECMA 2015(或ECMA Script 6)引入了更短的語法來編寫函數表達式,稱為箭頭函數。使用箭頭函數,你可以將上面的函數表達式編寫為:
var add = (num1, num2) => { return num1 + num2; };
正如你所看到的,使用箭頭函數編寫的函數表達式更短。
箭頭函數的基本語法規則
首先,參數應該在小括號中傳遞。你可以創建有兩個參數的箭頭函數,如下所示:
ar add = (num1, num2) => { return num1 + num2; };
如果只要傳遞一個參數,那么括號是可選的,可以選擇忽略。你可以創建一個參數的箭頭函數,如下所示:
var add = num => { return num * 10; };
如果沒有參數,那么你必須要有一個空括號——不能沒有。所以對于沒有參數的函數,箭頭函數是這樣寫的:
var add = () => { console.log("hey foo") };
如果函數中有單個表達式或語句:
在主體中使用括號是可選的。 使用return語句是可選的。你可以重寫add函數,而不使用函數體中的括號和return語句,如下所示:
var add = (num1, num2) => num1 + num2;
你也可以使用控制臺語句編寫不帶參數的函數,如下所示:
var add = () => console.log("hey");
返回對象字面量
JavaScript箭頭函數也可以返回對象字面量。唯一的要求是你需要把返回對象裝入小括號中,如下所示:
var foo = (name, age) => ({name: name,age: age})var r = foo("my cat", 22);console.log(r);正如你所看到的那樣,要返回的對象被放在了小括號內。如果你不這樣做,那么JavaScript將無法區分對象字面量和函數體。
箭頭函數支持rest參數
JavaScript箭頭函數支持另一個ES6功能:rest參數。你可以在箭頭函數中使用rest參數,如下面的代碼所示:
var add = (num1, num2, ...restparam) => {console.log(restparam.length);var result = num1 + num2;return result;}var r = add(67, 8, 90, 23);console.log(r);在這個例子中,當你使用帶有rest參數的箭頭函數時,輸出會是2和75,因為傳遞的額外參數的數量是2,num1和num2的總和是75。
新聞熱點
疑難解答
圖片精選