卡卡網(wǎng)

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

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

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

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

() => {  }

例如：

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

輸出：

OK

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

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

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

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

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

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

(para) => { }

請(qǐng)注意，你可以省略括號(hào)，如下所示：

para => { }

下面的示例使用箭頭函數(shù)將map()字符串?dāng)?shù)組轉(zhuǎn)換為字符串長(zhǎng)度數(shù)組。

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

console.log(lengths);

輸出：

[ 4, 3, 5 ]

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

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

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

以下表達(dá)式：

=> expression

等同于：

=> { return expression; }

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

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

輸出：

[6,4,2]

代碼使用箭頭函數(shù)語(yǔ)法更簡(jiǎn)潔：

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

輸出：

[6,4,2]

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

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

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

(a,b) => b - a

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

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

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

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

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

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

輸出：

30

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

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

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

輸出：

30

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

但是，如果使用塊語(yǔ)法，則需要指定return關(guān)鍵字：

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

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

console.log(typeof add);

輸出：

function

總結(jié)

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

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

相關(guān)文章

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

標(biāo)簽: 箭頭函數(shù)