在 JavaScript 中使用箭頭函數(shù)
返回基本類型
許多現(xiàn)代編程語言都支持箭頭函數(shù)的語法,例如 C#蟹肘、Swift词疼,而 ES6 也將箭頭函數(shù)加入到 JavaScript 的語法中。我們?cè)谠?JS 中已經(jīng)擁有了匿名函數(shù)疆前,但一個(gè)更為簡(jiǎn)潔的表達(dá)式不僅方便書寫寒跳,且能更為直觀的表達(dá)語義。
當(dāng)僅有一個(gè)參數(shù)且返回結(jié)果是一個(gè)表達(dá)式時(shí)竹椒,語法如下所示:
[1,2,3].map( num => num*2 )
// <- [2,4,6]
如果我們用 ES5 ,他會(huì)是這樣的:
[1,2,3].map(function(num){
return num*2;
});
當(dāng)我們不需要參數(shù)米辐,或者要傳入兩個(gè)或者更多參數(shù)胸完,我們必須用()來包含這些參數(shù)(即使沒有):
[1,2,3,4].map((num,index) => num*2+index)
//<- [2,5,8,11]
當(dāng)然书释,更多情況下我們不僅僅返回單一的表達(dá)式,還會(huì)寫一些邏輯語句赊窥。這些語句爆惧,我們寫在 { } 中,如下:
[1,2,3,4].map(num => {
var multiplier = 2+num;
return multiplier*num;
})
//<-[3,8,15,24]
同樣適用于多個(gè)參數(shù)的情形:
[1,2,3,4].map((num,index) => {
var multiplier = 2+index;
return multiplier*num;
})
//<-[2,6,12,20]
返回對(duì)象
當(dāng)我們使用箭頭函數(shù)返回一個(gè)對(duì)象時(shí)锨能,我們需要使用()包含這個(gè)對(duì)象扯再,不然就會(huì)出現(xiàn)語法錯(cuò)誤。
例1中址遇,編譯器將 number: n 解析為函數(shù)中的語句(number 解析為標(biāo)簽熄阻,n 解析為表達(dá)式,而這其實(shí)是不合法的)倔约,但并沒有 return 語句秃殉,所以 map 的返回值為 undefined。
例2中浸剩,something: ' else ' 對(duì)編譯器來說并無任何含義钾军,所以拋出了語法錯(cuò)誤。
[1, 2, 3].map(n => { number: n })
// [undefined, undefined, undefined]
[1, 2, 3].map(n => { number: n, something: 'else' })
// <- SyntaxError
[1, 2, 3].map(n => ({ number: n }))
// <- [{ number: 1 }, { number: 2 }, { number: 3 }]
[1, 2, 3].map(n => ({ number: n, something: 'else' }))
/* <- [
{ number: 1, something: 'else' },
{ number: 2, something: 'else' },
{ number: 3, something: 'else' }]
*/
函數(shù)作用范圍
箭頭函數(shù)的作用范圍與其作用域綁定绢要,也就是說當(dāng)你在函數(shù)內(nèi)部深層嵌套函數(shù)時(shí)吏恭,不用通過 var self = this 或者 .bind(this) 來維持上下文
function Timer () {
this.seconds = 0
setInterval(() => this.seconds++, 1000)
}
var timer = new Timer()
setTimeout(() => console.log(timer.seconds), 3100)
// <- 3
值得注意的是,ES6的箭頭函數(shù)對(duì) this 進(jìn)行綁定重罪,意味著 .call 和 .apply 不再能改變函數(shù)的上下文樱哼。
結(jié)論
當(dāng)你需要一個(gè)匿名函數(shù)來返回某些表達(dá)式時(shí),箭頭函數(shù)是簡(jiǎn)潔的蛆封,并在某種程度上讓你的代碼更加的精簡(jiǎn)唇礁。
但并不是任何情況下,都適合使用箭頭函數(shù)惨篱。當(dāng)參數(shù)過多盏筐,函數(shù)體邏輯較復(fù)雜時(shí),命名函數(shù)使得你的程序更加可讀砸讳。
箭頭函數(shù)的優(yōu)越性體現(xiàn)在函數(shù)式編程的情形琢融,.map, .filter, 或者 .reduce。同樣簿寂,在異步流程控制中漾抬,箭頭函數(shù)消除了大量 callback 函數(shù)帶來的閱讀障礙,會(huì)是一個(gè)優(yōu)秀的選擇常遂。