前言
這個章節將會介紹到,在 ES6 新增的箭頭函式使用方法,因為在撰寫 React 程式時,已經都是使用 ES6 的模式再撰寫,所以,對於如何了解箭頭函式使用方法的是很重要的,接著就讓我們介紹它的特性及使用方法。
箭頭函式 (Arrow Function)
一句話簡單清楚的說,箭頭函式 (Arrow Function) 它是一種函式精簡的寫法。箭頭函式的基本語法如下:
範例一
箭頭函式中不會寫到 function 這個關鍵字,反而使用的是精簡清楚的 => (箭頭) 來連接與函式本體。
透過範例一箭頭函式的基本語法說明,這樣的寫法已經十分精簡了,但依據在實際以下的實際撰寫程式時的不同狀況,我們還可以再簡化。請看以下範例說明。
範例二
如果改用箭頭函式就可以直接以箭頭來替代 function 這個關鍵字,如下所示。
範例三
箭頭函式 (Arrow Function) 簡寫的規則
此外,如果該函式只有單一行敘述時,我們可以再將該函式省略大括號 {} 與 return 指令,如下所示。
範例四
最後,箭頭函式如果只有一個參數,可以不用加括號以及沒有參數的時候,哪就必須要保留加上括號,如下所示。
範例五
結論
除了上面所提到的語法結構差異之外,箭頭函式並沒有固定 this 的功能,這點會在日後提到在 React 的 Component 章節講到。