ES6入門:箭頭函數(shù)

在 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)秀的選擇常遂。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末纳令,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌平绩,老刑警劉巖圈匆,帶你破解...
    沈念sama閱讀 216,402評(píng)論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異捏雌,居然都是意外死亡跃赚,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門性湿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來纬傲,“玉大人,你說我怎么就攤上這事肤频√纠ǎ” “怎么了?”我有些...
    開封第一講書人閱讀 162,483評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵着裹,是天一觀的道長领猾。 經(jīng)常有香客問我,道長骇扇,這世上最難降的妖魔是什么摔竿? 我笑而不...
    開封第一講書人閱讀 58,165評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮少孝,結(jié)果婚禮上继低,老公的妹妹穿的比我還像新娘。我一直安慰自己稍走,他們只是感情好袁翁,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評(píng)論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著婿脸,像睡著了一般粱胜。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上狐树,一...
    開封第一講書人閱讀 51,146評(píng)論 1 297
  • 那天焙压,我揣著相機(jī)與錄音,去河邊找鬼抑钟。 笑死涯曲,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的在塔。 我是一名探鬼主播幻件,決...
    沈念sama閱讀 40,032評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼蛔溃!你這毒婦竟也來了绰沥?” 一聲冷哼從身側(cè)響起篱蝇,我...
    開封第一講書人閱讀 38,896評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎揪利,沒想到半個(gè)月后态兴,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體狠持,經(jīng)...
    沈念sama閱讀 45,311評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡疟位,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了喘垂。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片甜刻。...
    茶點(diǎn)故事閱讀 39,696評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖正勒,靈堂內(nèi)的尸體忽然破棺而出得院,到底是詐尸還是另有隱情,我是刑警寧澤章贞,帶...
    沈念sama閱讀 35,413評(píng)論 5 343
  • 正文 年R本政府宣布祥绞,位于F島的核電站,受9級(jí)特大地震影響鸭限,放射性物質(zhì)發(fā)生泄漏蜕径。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評(píng)論 3 325
  • 文/蒙蒙 一败京、第九天 我趴在偏房一處隱蔽的房頂上張望兜喻。 院中可真熱鬧,春花似錦赡麦、人聲如沸朴皆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽遂铡。三九已至,卻和暖如春晶姊,著一層夾襖步出監(jiān)牢的瞬間扒接,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評(píng)論 1 269
  • 我被黑心中介騙來泰國打工帽借, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留珠增,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,698評(píng)論 2 368
  • 正文 我出身青樓砍艾,卻偏偏與公主長得像蒂教,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子脆荷,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • ES6允許使用“箭頭”(=>)定義函數(shù)凝垛。 使用注意點(diǎn)箭頭函數(shù)有幾個(gè)使用注意點(diǎn)懊悯。 (1)函數(shù)體內(nèi)的this對(duì)象,就是...
    LuckyS007閱讀 858評(píng)論 0 1
  • 函數(shù)參數(shù)的默認(rèn)值 基本用法 在ES6之前梦皮,不能直接為函數(shù)的參數(shù)指定默認(rèn)值炭分,只能采用變通的方法。 上面代碼檢查函數(shù)l...
    呼呼哥閱讀 3,382評(píng)論 0 1
  • { "Unterminated string literal.": "未終止的字符串文本剑肯。", "Identifi...
    一粒沙隨風(fēng)飄搖閱讀 10,555評(píng)論 0 3
  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對(duì)象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,233評(píng)論 0 4
  • 每個(gè)生過孩子的女人让网,多少都有點(diǎn)月子病呀忧。月子病是一個(gè)很寬泛的概念,統(tǒng)稱因生孩子月子沒做好而產(chǎn)生的身體病痛溃睹。具體來說而账,...
    梅子的日志閱讀 30,407評(píng)論 9 9