---
# System prepended metadata

title: "\U0001F3C5 Day 36 - 箭頭函式"
tags: [JS 直播班 - 2022 秋季班]

---

---
tags: JS 直播班 - 2022 秋季班
---
# 🏅 Day 36 - 箭頭函式

### 寫法
宣告變數、並賦予它函式，我們稱這段 code 為「 函式表達式 」，下方範例都屬於函式表達式。
在 ES6 函式表達式中我們可以將 `function` 關鍵字移除並在參數後加入箭頭 `=>` 將程式碼簡化，此時即為箭頭函式。
```javascript=
/* 傳統函式 */
let cat = function(name){
  return `我的貓貓叫 ${name}`;
};
console.log(cat('Miu'));       // "我的貓貓叫 Miu"


/* 箭頭函式 */
let arrowCat = (name) => {     // function 改為 =>
  return `我的貓貓叫 ${name}`;
};
console.log(arrowCat('Miu'));  // "我的貓貓叫 Miu"
```

若是當 `{ }` 內程式碼只有一行時，則可以再簡化：
```javascript=
// 將 return 以及 {} 移除，簡化成一行，此時自動會有 return 的作用
let arrowCat = (name) => `我的貓貓叫 ${name}`;
console.log (arrowCat('Miu'));  // "我的貓貓叫 Miu"
```
> **注意：**
> 由於 `{}` 大括號內可以加入多行程式碼，所以寫成一行但沒有移除大括號時不會自動帶入 return：
> ```javascript=
> let calcPlus = (num) => num + 1;
> let calcPlusNoReturn = (num) => { num + 1 };  // 不會自動帶入 return
> 
> // 比較
> let calcPlusSum = calcPlus(3);
> let calcPlusNoReturnSum = calcPlusNoReturn(3);
> 
> console.log(calcPlusSum);          //  4
> console.log(calcPlusNoReturnSum);  //  undefined
> ```

若是當只有一個參數時，我們可以再簡化，將參數旁的小括號 `()` 移除：
```javascript=
// 移除 () 
let arrowCat = name => `我的貓貓叫 ${name}`;
console.log (arrowCat('Miu'));  // "我的貓貓叫 Miu"
```
> **注意：**
> 若沒有參數，不能移除 `()`
> ```javascript=
> let sayHello = () => `Hello!`;
> sayHello(); // Hello!
> ```


問題
---
試著用箭頭函式寫寫看 forEach 吧！
```javascript=
let pokemon = ['呆呆獸','沼王','噴火龍','雷丘'];
pokemon.forEach(function(item, index) {
 console.log(`${index+1} : ${item}`);
})
```



## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  

```javascript=
let pokemon = ['呆呆獸','沼王','噴火龍','雷丘'];

pokemon.forEach((item, index) => { 
  console.log(`${index+1} : ${item}`);
});
```
-->




回報區
---


|        Discord        |                                CodePen / 答案                                |
|:---------------------:|:----------------------------------------------------------------------------:|
|        YC#2522        |                [CodePen](https://codepen.io/YCLu/pen/PoaEapX)                |
|       yumy#1940       |              [CodePen](https://codepen.io/yumyyang/pen/jOKYKwO)              |
|      SASIMI#5099      |            [codepen](https://codepen.io/sashimi1327/pen/LYrerLO)             |
|     PayRoom#8328      |             [CodePen](https://codepen.io/water38198/pen/jOKYKGE)             |
|    shinyhung#3825     |       [CodePen](https://codepen.io/sean_1215/pen/XWYVYVM?editors=1011)       |
|     AuroraC#6539      |        [codepen](https://codepen.io/AuroraC/pen/JjZMZpO?editors=1012)        |
|       圈圈#4060       |         [codepen](https://codepen.io/wjejfczn-the-bold/pen/LYrerQQ)          |
|     kenki100#0068     |               [Codepen](https://codepen.io/ken100/pen/zYapajz)               |
|       RJRS#9430       |                [CodePen](https://codepen.io/RJRS/pen/YzvYvLO)                |
|      albee#9121       |      [Codepen](https://codepen.io/albee-chang/pen/BaVJVxg?editors=1011)      |
|       Peng#9811       |              [CodePen](https://codepen.io/peng-027/pen/mdKpKKa)              |
|      楓之聲#6945      |             [Codepen](https://codepen.io/sshane258/pen/RwJxJYE)              |
|     WEI_RIO#9342      |        [Codepen](https://codepen.io/wei_wu/pen/dyKJKQj?editors=1011)         |
|       大衛#4869       |       [Codepen](https://codepen.io/exnsrpjc/pen/poKpKxb?editors=0010)        |
|       Data#9297       |             [Codepen](https://codepen.io/kirakira72/pen/QWxaxZj)             |
|       威0#6919        |      [codepen](https://codepen.io/n0918679182/pen/LYrerze?editors=0011)      |
| 軟綿綿 (๑•ᴗ•๑) ♡#3627 |     [CodePen](https://codepen.io/Connie-Chien/pen/poKpZvR?editors=1010)      |
|      法希娜#3206      | [CodePen](https://codepen.io/yiiserpf-the-encoder/pen/WNydKRo?editors=1011)  |
|     mandylai#4055     |            [CodePen](https://codepen.io/mandy-lai-2/pen/poKpZRw)             |
|    LHchien33#6232     |             [CodePen](https://codepen.io/lin_chien/pen/jOKYpBB)              |
|   jacky010080#0880    |     [CodePen](https://codepen.io/Yen-Jung-Chen/pen/qBKpypv?editors=1011)     |
|      amy芳#1385       |             [CodePen](https://codepen.io/amy-chieng/pen/LYreBev)             |
|       kuku#3118       |            [Codepen](https://codepen.io/mengting-ku/pen/eYKyjVr)             |
|      yawun#0042       |             [CodePen](https://codepen.io/monicalin/pen/WNydKJj)              |
|       威爾#1694       |              [CodePen](https://codepen.io/WILL_Wu/pen/VwdyBBZ)               |
|       柔柔#1716       |        [Codepen](https://codepen.io/rouchen/pen/KKeZBxy?editors=1011)        |
|      Hilda#7085       |         [Codepen](https://codepen.io/vwquikad-the-vuer/pen/QWxaBXa)          |
|     banazita#5143     |       [CodePen](https://codepen.io/banazita/pen/RwJxJdv?editors=1111)        |
|      CofCat#9226      |       [CodePen](https://codepen.io/cofcat456/pen/bGKaxbo?editors=1011)       |
|    Ruby Chen#7452     |       [CodePen](https://codepen.io/ruby92429/pen/zYapJxX?editors=1011)       |
|      Kimi #9564       |              [CodePen](https://codepen.io/kimihu91/pen/mdKpjNE)              |
|      心幻羽#0056      |      [CodePen](https://codepen.io/linglingsyu/pen/JjZMmGW?editors=1111)      |
|      JackC#0411       |              [CodePen](https://codepen.io/key0329/pen/PoaEyzy)               |
|        Rr#2215        |            [Codepen](https://codepen.io/rufangcheng/pen/PoaEymX)             |
|    Yuna Huang#2692    |       [CodePen](https://codepen.io/Yuna1002/pen/gOKoBpj?editors=1111)        |
|      Winnie#1306      |    [Codepen](https://codepen.io/WinnieWuWinnie/pen/PoaEyXv?editors=1111)     |
|      黑白兔#0684      |             [Codepen](https://codepen.io/johnny329/pen/xxzpyeY)              |
|       m_m#5493        |             [CodePen](https://codepen.io/minnn7716/pen/RwJxeOv)              |
|      Clara#1275       |       [CodePen](https://codepen.io/bsupixqu/pen/WNydYwx?editors=0010)        |
|      k.sin#3115       |        [CodePen](https://codepen.io/sin588/pen/wvXpQxg?editors=0012)         |
|    masterYan#2480     |  [CodePen](https://codepen.io/htzwgoqt-the-looper/pen/BaVJGOQ?editors=1011)  |
|    jackson204#6363    |      [CodePen](https://codepen.io/jackson204/pen/YzvYRRP?editors=1111)       |
|       Tami#6742       |         [CodePen](https://codepen.io/wqsdqbjn-the-vuer/pen/rNKpQqZ)          |
|    Potatolee#7749     |      [CodePen](https://codepen.io/potatoleee/pen/RwJxqyN?editors=1011)       |
|      Arista#5802      |            [CodePen](https://codepen.io/arista-hsieh/pen/yLEpQmE)            |
|       小白#2406       |             [CodePen](https://codepen.io/gracewhite/pen/xxzpQNN)             |
|      粉蒸肉#6214      |       [Codepen](https://codepen.io/wrightyu/pen/eYKybWo?editors=1011)        |
|    jimmyFang#9575     |              [Codepen](https://codepen.io/pohxiqqo/pen/oNypmBo)              |
|     Hironaka#7367     |     [Codepen](https://codepen.io/Hironaka0815/pen/mdKpvwG?editors=1111)      |
|    勁辣雞腿寶#5817    |       [Codepen](https://codepen.io/orz311013/pen/vYrpbqb?editors=1111)       |
|     hannahTW#2224     |       [Codepen](https://codepen.io/hangineer/pen/LYreqor?editors=1112)       |
|       雷雷#7844       |      [Codepen](https://codepen.io/lei-yi-jie/pen/dyKJrGw?editors=0011)       |
|     beta lin#1445     |              [CodePen](https://codepen.io/linbeta/pen/GRGyeZV)               |
|     Amberhh#2465      |              [Codepen](https://codepen.io/Amberhh/pen/abKEKME)               |
|       無名#6427       |              [Codepen](https://codepen.io/Nomoney/pen/qBKpwKZ)               |
|    Sentiments#4883    |      [codepen](https://codepen.io/Sentiments/pen/gOKoyEv?editors=0011)       |
|    出事了阿伯#9923    |      [codepen](https://codepen.io/BradpittLai/pen/WNydBYb?editors=1011)      |
|      肉桂卷#0625      |        [codepen](https://codepen.io/ginnlee/pen/RwJxzdW?editors=0011)        |
|       mou#2215        |     [codepen](https://codepen.io/shihchiehlan/pen/xxzpvJw?editors=0010)      |
|      Loran#1105       |       [codepen](https://codepen.io/loranlin/pen/rNKJWPy?editors=1111)        |
|      azami#5986       |               [Codepen](https://codepen.io/azami/pen/gOKvgwV)                |
|      Benson#6763      |              [Codepen](https://codepen.io/kumashow/pen/PoaQWJw)              |
|       薯餅#3581       |           [Codepen](https://codepen.io/ColdingPoTaTo/pen/ExRQZrO)            |
|     KC_8685#9343      |             [Codepen](https://codepen.io/cathy7411/pen/KKeQaEy)              |
|      Lucie#3831       |              [Codepen](https://codepen.io/bisespei/pen/abKqJwe)              |
|   William Lai#0196    |             [Codepen](https://codepen.io/lai-weihan/pen/YzveEQg)             |
|      Cream#3449       |             [Codepen](https://codepen.io/lai-weihan/pen/YzveEQg)             |
|       yoyo#1003       |            [Codepen](https://codepen.io/pen/MWXQQdj?editors=1111)            |
|       Shuo#1596       |    [Codepen](https://codepen.io/chiangchungshuo/pen/NWzOgxa?editors=1010)    |
|      Cliff#4606       |       [Codepen](https://codepen.io/Cliff_hex/pen/QWxZJNO?editors=0011)       |
| charlottelee849#0366  |        [Codepen](https://codepen.io/char849/pen/xxzyMNm?editors=0012)        |
|    suihsilan#9485     |       [Codepen](https://codepen.io/suihsilan/pen/vYrQXJW?editors=0010)       |
|      Yishan#4902      | [Codepen](https://codepen.io/gdjrehhw-the-animator/pen/OJEdgNL?editors=0012) |
|       Paul#7426       |             [CodePen](https://codepen.io/paul-1997/pen/yLEjBpW)              |
|       狸貓#5863       |       [CodePen](https://codepen.io/tanuki320/pen/GRGeLRR?editors=1010)       |
|     Mia小福#4473      |              [CodePen](https://codepen.io/a0950271/pen/JjZVaEe)              |
|      hungya#0773      |       [CodePen](https://codepen.io/hungya777/pen/KKeYGax?editors=0011)       |
|       cbs#9007        |               [Codepen](https://codepen.io/wasdjk/pen/bGKPqKE)               |
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/oNyEppj)|
|蓁心#6229|[CodePen](https://codepen.io/tlorfrnl-the-typescripter/pen/eYjOGgG?editors=1011)|
|阿蘇#8531|[CodePen](https://codepen.io/susu3131/pen/KKBKray?editors=1011)|
|J_u_d_y#5993|[Codepen](https://codepen.io/J_u_d_y/pen/vYzJZyY?editors=1111)|
|Bingsu#2362|[Codepen](https://codepen.io/pmyfr/pen/poxJBoN?editors=1111)|

