iT邦幫忙

2022 iThome 鐵人賽

DAY 15
0

前言
這個章節將會介紹到,在 ES6 新增的箭頭函式使用方法,因為在撰寫 React 程式時,已經都是使用 ES6 的模式再撰寫,所以,對於如何了解箭頭函式使用方法的是很重要的,接著就讓我們介紹它的特性及使用方法。

箭頭函式 (Arrow Function)
一句話簡單清楚的說,箭頭函式 (Arrow Function) 它是一種函式精簡的寫法。箭頭函式的基本語法如下:

範例一
箭頭函式中不會寫到 function 這個關鍵字,反而使用的是精簡清楚的 => (箭頭) 來連接與函式本體。

透過範例一箭頭函式的基本語法說明,這樣的寫法已經十分精簡了,但依據在實際以下的實際撰寫程式時的不同狀況,我們還可以再簡化。請看以下範例說明。

範例二
如果改用箭頭函式就可以直接以箭頭來替代 function 這個關鍵字,如下所示。

範例三
箭頭函式 (Arrow Function) 簡寫的規則
此外,如果該函式只有單一行敘述時,我們可以再將該函式省略大括號 {} 與 return 指令,如下所示。

範例四
最後,箭頭函式如果只有一個參數,可以不用加括號以及沒有參數的時候,哪就必須要保留加上括號,如下所示。

範例五
結論
除了上面所提到的語法結構差異之外,箭頭函式並沒有固定 this 的功能,這點會在日後提到在 React 的 Component 章節講到。


上一篇
Day 14 | var、let、const 學習心得
下一篇
Day 16 | import & export 模組學習心得
系列文
一步一腳印,我的前端工程師修煉30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言