iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
自我挑戰組

JavaScript老學徒筆記—馬步篇系列 第 17

【Day16】箭頭函式

一般我們見到的函式長成這個樣子:

var fight = function(nameA, nameB) {
	return nameA + '打敗' + nameB;
}

fight('洪七公','歐陽鋒');  //洪七公打歐陽鋒

但是從ES6之後,增加了一種「箭頭函式表達式」(Arrow Function expression),可以使用它來簡化函式的表達,讓我們一步一步還簡化:

把function刪除,在()小括號後面加上= >,其他保持原樣。

var fight = (nameA, nameB) => {
	return nameA + '打敗' + nameB;
}

fight('洪七公','歐陽鋒');  //洪七公打歐陽鋒

跟著進一步簡化,把{}拿掉,也把return省略掉:

var fight = (nameA, nameB) =>  nameA + '打敗' + nameB;

fight('洪七公','歐陽鋒');  //洪七公打歐陽鋒

當函式只有一個參數的時候,小括號()可以省略:

var fight = nameA => console.log(nameA + '武功天下第一');

fight('洪七公');  //洪七公武功天下第一

但是沒有參數時,小括號()是不能省略的:

var fight = () => console.log('洪七公武功天下第一');

fight();  //洪七公武功天下第一

箭頭函式的精簡寫法在乍看之下讓人一頭霧水,但是拆解之後,卻是簡單又一目了然,這種寫法應該很多人會喜歡用。


上一篇
【Day15】公園跟你家院子—全域變數與區域變數的區別
下一篇
【Day17】期間限定:函式的參數
系列文
JavaScript老學徒筆記—馬步篇35

尚未有邦友留言

立即登入留言