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

### 寫法
宣告變數、並賦予它函式，我們稱這段 code 為「 函式表達式 」，下方範例都屬於函式表達式。
在 ES6 函式表達式中我們可以將 `function` 關鍵字移除並在參數後加入箭頭 `=>` 將程式碼簡化，此時即為箭頭函式。

/* 傳統函式 */
let cat = function(name){
  return `我的貓貓叫 ${name}`;
};
console.log(cat('Miu'));       // "我的貓貓叫 Miu"


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

若是當 `{ }` 內程式碼只有一行時，則可以再簡化：

// 將 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
> ```

若是當只有一個參數時，我們可以再簡化，將參數旁的小括號 `()` 移除：

// 移除 () 
let arrowCat = name => `我的貓貓叫 ${name}`;
console.log (arrowCat('Miu'));  // "我的貓貓叫 Miu"

> **注意：**
> 若沒有參數，不能移除 `()`
> ```javascript=
> let sayHello = () => `Hello!`;
> sayHello(); // Hello!
> ```

問題
---
試著用箭頭函式寫寫看 forEach 吧！

let pokemon = ['呆呆獸','沼王','噴火龍','雷丘'];
pokemon.forEach(function(item, index) {
 console.log(`${index+1} : ${item}`);
})

## 回報流程

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


<!-- 解答：

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

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

-->

回報區
---

| Discord | CodePen / 答案 |
|:---------------------:|:----------------------------------------------------------------------------:|
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/NWoBPOa) |
| pinyi_9 | [CodePen](https://codepen.io/Wpypy/pen/VwgBYVL?editors=1111) |
| santu0868 | [CodePen](https://codepen.io/HatsumiSan/pen/bGzjNKR) |
|銀光菇|[CodePen](https://codepen.io/genesynthesis/pen/qBgyEYz)|
|Winnie|[CodePen](https://codepen.io/codepen-io-winnie/pen/mdvjyNR?editors=0011)|
| yuan! | [CodePen](https://codepen.io/townyuan/pen/KKJBpwx) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/zYeLGNO) |
| Alyce | [CodePen](https://codepen.io/alycehwy/pen/rNPrVva?editors=0010) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/QWYBjLX) |
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/OJdwyMd?editors=1112) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/GRzBpNw?editors=0011) |
|Moreene|[CodePen](https://codepen.io/Moreene/pen/xxMJwqX)|
|CPing|[CodePen](https://codepen.io/CPing/pen/NWoBGaW?editors=1112)|
|celinelinnn|[CodePen](https://codepen.io/celinephoebe/pen/qBgyOVx)|
|kuanju27|[CodePen](https://codepen.io/Eero-Chiao/pen/wvNxKPV)|
|ann6212|[CodePen](https://codepen.io/yqmegupa-the-styleful/pen/oNmMjMM?editors=1012)|
|stone4584|[CodePen](https://codepen.io/Royen0506/pen/WNPKQPw?editors=1111)|
|保羅|[CodePen](https://codepen.io/paul-1997/pen/WNPKrNG?editors=1011)|
| Eden |[Codepen](https://codepen.io/iseden/pen/bGzjENp)|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/gOqjPab?editors=0011) |
| Ching | [CodePen](https://codepen.io/tzuchingg/pen/xxMJVwx?editors=1011) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/ExrpKZx?editors=1112) |
| yuan2781 | [CodePen](https://codepen.io/ismebir/pen/VwgBaqz) |
| xin | [CodePen](https://codepen.io/Estherrrrrr999/pen/BaMPzyv) |
| claire | [CodePen](https://codepen.io/yi-wen-chen/pen/vYbaGod) |
| tanuki5863 | [CodePen](https://codepen.io/tanuki320/pen/xxMJOjp?editors=1011) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/zYeLoPx) |
| Rogan | [CodePen](https://codepen.io/RoganHsu/pen/rNPrmNR?editors=0011) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/WNPKjwJ) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/wvNxqwK) |
| lychee_kk | [CodePen](https://codepen.io/kakakala/pen/XWOBzxa?editors=1111) |
| Oria | [CodePen](https://codepen.io/kajing/pen/gOqjoaO?editors=1010) |
| dora | [CodePen](https://codepen.io/dorayu/pen/JjxBdxE) |
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/MWLBYmQ) |
|依依 | [CodePen](https://codepen.io/Rita-Yang/pen/zYeLMGB?editors=1011) |
| JUNEW | [CodePen](https://codepen.io/June-W/pen/abXjQeq) |
| 荷菓かのり| [CodePen](https://codepen.io/oogxwkvw-the-builder/pen/PoVBgVG?editors=1111) |
| Helen| [CodePen](https://codepen.io/milkteamonster/pen/JjxajGE?editors=0010) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/abXqjyX) |
| Peng | [CodePen](https://codepen.io/H-Peng/pen/LYqJRbg?editors=1010) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/OJdoRgV?editors=0011) |
| RX00 | [CodePen](https://codepen.io/llqzknqv-the-styleful/pen/XWOPjvy?editors=1011) |
| damon0323 | [CodePen](https://codepen.io/swk9eny2/pen/LYqJbaR?editors=0011) |
| macihuang | [CodePen](https://codepen.io/macy1215/pen/ExreZoZ) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/GRzXWxg?editors=1111) |
| hsu0921 | [CodePen](https://codepen.io/HSUANIN0327/pen/poGOqMd) |
| gebyman | [CodePen](https://codepen.io/gebyman/pen/PoVdrgV?editors=1011) |
| 郭芙蘭＃6374 | [CodePen](https://codepen.io/flora_Kuo/pen/abXRBRe?editors=1011) |
| Andy | [CodePen](https://codepen.io/andy31342/pen/OJdBOVz?editors=1112) |
| skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/vYbQNWZ?editors=0011) |
| 奔跑吧(GTR150) | [CodePen](https://codepen.io/Wer-Qwe/pen/YzBRqLP?editors=1112) |
| 歐陽龍龍#1061 | [CodePen](https://codepen.io/dizzydog-rgb/pen/qBggMxR) |
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/abXMojq?editors=1111) |
| NathanJames | [CodePen](https://codepen.io/ufo060204/pen/LYqaPmr) |
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/jOdJwJZ) |
| MY | [CodePen](https://codepen.io/ahmomoz/pen/mdvozZg?editors=1112) |
| ChrisSQR | [CodePen](https://codepen.io/ChrisSQR/pen/YzBMqPr) |
| Jerry | [CodePen]()
| Daylily | [CodePen](https://codepen.io/daylily/pen/vYPxmoN) |