iT邦幫忙

1

Javascript 進階 9-1 箭頭函式簡介

  • 分享至 

  • xImage
  •  

關於箭頭函式的介紹也是屬於 ES6 的範疇,跟上一個章節的 Let 以及 Const 一樣。

關於ES6 的新增語法

  1. 讓原有 JS 撰寫更為精簡 (語法糖)
  2. 讓 JS 撰寫觀念更為直覺、簡便(新方法) => Let,Const,Arrow Function

我們先來看看下列的程式吧~

const callName = function (someone) {
    return '我是' + someone;
}

console.log(callName('哈士奇'));

這個函式,很明顯就是將參數傳入 callName 的函式之後,會回傳 '我是' + 傳入的參數的字串。

那麼如果要改寫成箭頭函式的話該怎麼做呢?

  1. 移除 function 的字眼
  2. 在傳入參數的右邊補上 =>

修改完的結果就如下所示:

const callName = (someone) => {
    return '我是' + someone;
}

console.log(callName('哈士奇'));

顯示的結果也是會跟原本的一樣~

縮寫

箭頭函式在某些情況下可以進行進一步的程式碼精簡~

  1. 內容只有一行表達式的時候,可以去除大括號{}以及return的字樣,會自動 return 表達是的結果。
  2. 傳入的參數只有一個的時候,可以省略小括號()。但沒有參數或是兩個參數以上的時候不能省略!

所以就可以縮寫成下面這樣喔~

const callName = someone => '我是' + someone;

console.log(callName('哈士奇'));

好的,這篇文章就簡單介紹了如何撰寫箭頭函式以及如何縮寫箭頭函式的方法,沒有問題的話就往下一篇文章邁進吧!汪汪~


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Robin
iT邦新手 2 級 ‧ 2020-05-19 18:48:05

使用箭頭函示時也要注意綁定的this會不一樣哦
https://wcc723.github.io/javascript/2017/12/21/javascript-es6-arrow-function/
(之前碰過這個,提醒要注意一下

odinhusky iT邦新手 5 級 ‧ 2020-05-19 18:57:12 檢舉

沒錯!
非常感謝提醒~後續的文章會再特別說明~

我要留言

立即登入留言