卡卡網(wǎng)

與函數(shù)表達式相比，箭頭函數(shù)提供了一種編寫更短語法的替代方法。

箭頭函數(shù)有多參數(shù)、單參數(shù)和無參數(shù)幾種寫法，本文將通過具體實例演示箭頭函數(shù)的無參數(shù)、單參數(shù)、多參數(shù)用法。

無參數(shù)的箭頭函數(shù)

如果箭頭函數(shù)沒有參數(shù)，則需要使用括號，如下所示：

() => {  }

例如：

logTest = () => { console.log("OK"); }
logTest();

輸出：

OK

該箭頭函數(shù)等同于傳統(tǒng)函數(shù)：

function logTest(){
    console.log("OK");
}

該箭頭函數(shù)體可以去掉大括號，直接寫成這樣：

logTest = () => console.log("OK");

單參數(shù)的箭頭函數(shù)

如果箭頭函數(shù)采用單個參數(shù)，則使用以下語法：

(para) => { }

請注意，你可以省略括號，如下所示：

para => { }

下面的示例使用箭頭函數(shù)將map()字符串數(shù)組轉換為字符串長度數(shù)組。

let names = ['John', 'Mac', 'Peter'];
let lengths = names.map(name => name.length);

console.log(lengths);

輸出：

[ 4, 3, 5 ]

多參數(shù)的箭頭函數(shù)

如果箭頭函數(shù)有兩個或更多參數(shù)，則使用以下語法：

(p1, p2, ..., pn) => expression;

以下表達式：

=> expression

等同于：

=> { return expression; }

例如，要按降序?qū)?shù)字數(shù)組進行排序，可以使用數(shù)組對象的方法sort()，如下所示：

let numbers = [4,2,6];
numbers.sort(function(a,b){ 
    return b - a; 
});
console.log(numbers);

輸出：

[6,4,2]

代碼使用箭頭函數(shù)語法更簡潔：

let numbers = [4,2,6];
numbers.sort((a,b) => b - a);
console.log(numbers);

輸出：

[6,4,2]

對比上面兩個傳統(tǒng)函數(shù)和箭頭函數(shù)，可以清楚的看到，如下傳統(tǒng)函數(shù)：

function(a,b){
     return b - a;
}

等同于如下箭頭函數(shù)：

(a,b) => b - a

這正是多參數(shù)箭頭函數(shù)的語法特征。

更多箭頭函數(shù)實例介紹

與函數(shù)表達式相比，箭頭函數(shù)提供了一種編寫更短語法的替代方法。

下面的例子定義了一個函數(shù)表達式，它返回兩個數(shù)字的和：

let add = function (x, y) {
    return x + y;
};

console.log(add(10, 20));

輸出：

30

以下示例等效于上述add()函數(shù)表達式，但使用了箭頭函數(shù)：

let add = (x, y) => x + y;

console.log(add(10, 20));

輸出：

30

在這個例子中，箭頭函數(shù)有一個表達式x + y，所以它返回表達式的結果。

但是，如果使用塊語法，則需要指定return關鍵字：

let add = (x, y) => { return x + y; };

typeof運算符返回指示箭頭函數(shù)的function類型。

console.log(typeof add);

輸出：

function

總結

本文通過多個具體實例，演示了無參數(shù)、單參數(shù)、多參數(shù)的箭頭函數(shù)用法，可以概況為：

• 使用()=>{ }定義無參數(shù)箭頭函數(shù)。
• 使用(arg) => expression;定義單參數(shù)箭頭函數(shù)。
• 使用(...args) => { statements }定義具有多個語句的箭頭函數(shù)。

相關文章

• 實例詳解JS箭頭函數(shù)=>與傳統(tǒng)匿名函數(shù)處理this的不同方法

標簽: 箭頭函數(shù)