---
# System prepended metadata

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

---

# 🏅 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 / 答案 |
| --- | ----- | ----- |
|  01   |   voke    | [CodePen](https://codepen.io/FiSi-the-lessful/pen/BaXvWdV) | 
|  02   |   毛巾    | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/bGXJZVJ) | 
|  03   |   david1819    | [CodePen](https://codepen.io/David-Lin-the-vuer/pen/OJKGqRq) | 
|  04   |   tim    | [CodePen](https://codepen.io/jskrtivy-the-animator/pen/xxveBzY?editors=0011) | 
| 05 | Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/XWvQQbE) | 
|06|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/wvVZZqo?editors=1111)|
|07|泊岸|[CodePen](https://codepen.io/qoq77416416/pen/OJKGGwW?editors=0012)|
|08|睿睿|[CodePen](https://codepen.io/uwmrsusb-the-solid/pen/PoMggpZ?editors=1111)|
|09|yuyuhunter_0509| [CodePen](https://codepen.io/KRcube/pen/dyxLLao?editors=0011) | 
|10|Hedwig| [CodePen](https://codepen.io/adirehfz-the-encoder/pen/gOVyJYW?editors=1111) | 
|11|mercury2508.| [CodePen](https://codepen.io/Mercury2508/pen/vYoMqga) |
|  12  |    Ariel   | [CodePen](https://codepen.io/ariel0510/pen/oNKOrwq?editors=1011) |
|  13   |   kun._c8_shake_it    | [CodePen](https://codepen.io/barry91205/pen/bGXJXZo?editors=1010) | 
|  14   |   610    | [CodePen](https://codepen.io/YI-LING-LIU/pen/poMmzzZ) | 
|15|.tsz_ying | [CodePen](https://codepen.io/bekgnohe-the-selector/pen/qBeGBWm?editors=0011) |
| 16 | Kaya | [CodePen](https://codepen.io/kayaribi/pen/PoMvoev) |
| 17 | 是在哈囉 | [CodePen](https://codepen.io/miyxdhem-the-solid/pen/MWNdWxm?editors=1111) |
| 18 | 嚼勁先生 | [CodePen](https://codepen.io/James520284/pen/rNXgabo) |
| 19 | GTR150 | [CodePen](https://codepen.io/pen/?editors=1111) |
| 20 |brucelee0629| [CodePen](https://codepen.io/xxhdklwi-the-decoder/pen/QWeRwMg?editors=0011) | 
| 21 | yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/aberNOe) |
| 22 | Sonia | [CodePen](https://codepen.io/YUJOU/pen/rNXgemE?editors=0011) |
| 23 | KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/zYgQEEO?editors=0012) |
| 24 | Mike | [CodePen](https://codepen.io/mike2049/pen/PoMvEqY?editors=0011) |
| 25 | joylu0902 | [CodePen](https://codepen.io/joylu0902/pen/OJKYGyL) |
| 26 | Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/LYwowQq) | 
| 27 | ycl325.etheddie | [CodePen](https://codepen.io/wdvikfuz-the-selector/pen/MWNMbQZ) |
|  28   |  JIA  | [CodePen](https://codepen.io/nzaicwlw-the-styleful/pen/eYqwWGx?editors=0011) | 
| 29 | 陳小廷 | [CodePen](https://codepen.io/ting1124/pen/ExqBEOW) |
| 30  |jerry_66983| [CodePen](https://codepen.io/Barry-C/pen/xxvozNG?editors=1111)| 
| 31 | Chun | [CodePen](https://codepen.io/pen/?editors=0011) | 
| 32 | ab567ab5 | [CodePen](https://codepen.io/WanTzu-Chiang/pen/rNXXLgL?editors=0011) | 
| 33 | 阿鼠   | [CodePen](https://codepen.io/wuasu/pen/MWNNbWO) | 
| 34 | Joannehu   | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/qBeejgj?editors=1011) | 
| 35 | Lotte   | [CodePen](https://codepen.io/hmkdoxuj-the-decoder/pen/xxvvLNa?editors=0011) |
| 36 | Nocab   | [CodePen](https://codepen.io/PeihanWang/pen/OPLLLGm?editors=0011) |
|   37  |   chris    | [CodePen](https://codepen.io/chris-chen-the-selector/pen/OPLLJVj?editors=0011) | 
|   38  |   蘑菇星星    | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/PwYYmYY?editors=1012) |
|   39  |   Seris    | [CodePen](https://codepen.io/Dale-Chien/pen/JoPPeqR) |
|   40  |   Jack    | [CodePen](https://codepen.io/kxbhixte-the-sasster/pen/OPLJxoM?editors=1011) |
|   41  |   charlottelee    | [CodePen](https://codepen.io/char849/pen/MYgWdPE) |
|  42   |   alec1203    | [CodePen](https://codepen.io/soloayaya/pen/yyByawy?editors=1012) | 
|  43   |   kaka_945    | [CodePen](https://codepen.io/kay945/pen/emOmEpa) |
|  44   |   jimmy.0706    | [CodePen](https://codepen.io/JimmyMao/pen/OPLyRrQ?editors=0011) | 
|  45   |   雪粒    | [CodePen](https://codepen.io/bzykdfhw-the-bashful/pen/mybexVo) |
|  46  |   Emma    | [CodePen](https://codepen.io/Emma0919/pen/JoPdgWj) | 


<!-- 可複製下方格式
|     |       | [CodePen]() | 
-->