---
# System prepended metadata

title: "\U0001F3C5 Day 14 - 箭頭函式"
tags: [Vue 直播班 - 2023 冬季班]

---

---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 Day 14 - 箭頭函式

參考文章: https://wcc723.github.io/javascript/2017/12/21/javascript-es6-arrow-function/

### 教學

箭頭函式的運用技巧如下：
```js=
// 傳統函式
function saySomething(string) {
  return '接招' + string; 
}

// 轉成箭頭函式
const saySomething = (string) => {
  return '接招 ' + string;
}
```
```js=
// 當只有單行表達式時，可同時省略 return 及 {}
// 省略後依然保有回傳的特質
const saySomething = (string) => '接招 ' + string;
console.log(saySomething('菜鳥!'));

// 不過要注意，如果有使用 {}，就需要自行加上 return
const saySomething = (string) => {'接招 ' + string};
console.log(saySomething('菜鳥!')); // 會回傳 undefined
```

```js=
// 只有一個參數可以不加括號 ()
const saySomething = string => '接招 ' + string;
console.log(saySomething('菜鳥!'));

// 沒有參數、參數有兩個以上都不能省略 ()
const saySomething = () => '接招 菜鳥!';
console.log(saySomething());
```

題目
---
請將以下程式碼簡化為箭頭函式 (不影響結果的情況下進行最大簡化)

```js=
// 題目一
function sum(a, b) {
  let c = a + b;
  return c;
}
console.log(sum(5, 6));

// 題目二
function square(num) {
  return num * num;
}
console.log(square(5))

// 題目三
setTimeout(function() {
  console.log('延遲 1 秒');
}, 1000);

// 題目四
let arr = [1, 2, 3];
let arrNew = arr.map(function(item, i) {
  return item * i;
});
console.log(arrNew);

// 題目五
let obj = {
  fn: function fn2(a) {
    return a * a;
  }
}
console.log(obj.fn(10));
```


## 回報流程

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

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

<!-- 解答：  
// 題目一
const sum = (a, b) => {
  let c = a + b;
  return c;
}
這題解答怪怪的，應該是↓　有錯麻煩糾正，謝謝。　by同學
const sum = (a, b) => a+b;
console.log(sum(5, 6));

// 題目二
let square = num => num * num;
console.log(square(5));

// 題目三
setTimeout(() => console.log('延遲 1 秒'), 1000);

// 題目四
let arr = [1, 2, 3];
let arrNew = arr.map((item, i) => item * i);
console.log(arrNew);

// 題目五
let obj = {
  fn: a => a * a
}
console.log(obj.fn(10));
-->




回報區
---


|     Discord     |                                CodePen / 答案                                |
|:---------------:|:----------------------------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/gOEPONw?editors=0010) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/BabjpaB?editors=1111) | 
| kj | [CodePen](https://codepen.io/Eero-Chiao/pen/XWGXpWe) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/oNVbBvM) | 
| py | [CodePen](https://codepen.io/Wpypy/pen/yLwegBV?editors=1011) | 
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/bGZEgBE?editors=0110) | 
| kawa | [CodePen](https://codepen.io/z83xji6/pen/oNVbBzQ?editors=0011) | 
| ryan.chou | [CodePen](https://codepen.io/csw8524/pen/QWoyddK) |
| Emily | [CodePen](https://codepen.io/Emily2089/pen/MWxKJrO) |
| Leo | [CodePen](https://codepen.io/Aruminiya/pen/eYXJgKM) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/vYPLxBN) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/oNVbZjN?editors=0012) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/QWoypGm) |
| KUN. | [CodePen](https://codepen.io/barry91205/pen/abMdJGz?editors=1111) |
| ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/ZEPQeeV?editors=1011) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/zYbrZRg) |
| hedy | [CodePen](https://codepen.io/Hedy_H/pen/VwRepyK?editors=0012) | 
| dora | [CodePen](https://codepen.io/dorayu/pen/rNROWLM?editors=1011) | 
| amaaaa | [CodePen](https://codepen.io/Alicia-Chu/pen/GReomqd) | 
| Helen | [CodePen](https://codepen.io/milkteamonster/pen/abMdWYW?editors=1010) |
| 依依| [CodePen](https://codepen.io/Rita-Yang/pen/ZEPQKKb?editors=0011) | 
|Moreene|[CodePen](https://codepen.io/Moreene/pen/ExMPmbZ)
| FangFang | [CodePen](https://codepen.io/FangFang09/pen/jOJWmzO) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/xxBZdaX) |
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/XWGXMbo) | 
|Wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/MWxKovv?editors=0012)|
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/jOJWwZm) | 
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/PoLZmgv?editors=0011) |
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/RwdrgXW?editors=1112) |
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/MWxKvgX?editors=1112) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/xxBZbyZ?editors=1111) | 
| Neil | [CodePen](https://codepen.io/Neil1024/pen/GReoMZd?editors=0012) |
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/qBvbPeo?editors=1011) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/PoLZOor) | 
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/rNRxYWY) | 
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/poYgdKr?editors=0111) | 
| MY | [CodePen](https://codepen.io/ahmomoz/pen/poYgdaw) | 
| Chris | [CodePen](https://codepen.io/cjtseng07/pen/RwdrjdP) | 
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/OJqMOKb?editors=1111) | 
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/BabjwEg) | 
| Uli | [CodePen](https://codepen.io/uli1313/pen/YzgwYjN?editors=1011) | 
| elena | [CodePen](https://codepen.io/elena0127abc/pen/zYbrpMY) | 
| Yang | [CodePen](https://codepen.io/Yang-J/pen/XWGXzyB?editors=0011) | 
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/bGZEWpO) | 
| 貢波波夫 | [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/oNVbqGJ) | 
| MikeLin | [CodePen](https://codepen.io/MikeLin0701/pen/OJqMEOa) |
| celinelinnn|[CodePen](https://codepen.io/celinephoebe/pen/Yzgwvaa)|
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/yLweRZe) |
| Peng | [CodePen](https://codepen.io/H-Peng/pen/LYaGXQM?editors=0011) |
| PayRoom|[CodePen](https://codepen.io/water38198/pen/gOEPZXW)
| 保羅|[CodePen](https://codepen.io/paul-1997/pen/vYPLbOJ?editors=0011)
| PoRay | [CodePen](https://codepen.io/raycheng/pen/bGZEOyK??editors=1011) | 
| carrie | [CodePen](https://codepen.io/echocarriet/pen/oNVbJax) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/KKEVjmN) |
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/XWGdKZV?editors=0010) | 
| Ting | [CodePen](https://codepen.io/liara/pen/xxBVgEp)|
| skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/zYbqPqz?editors=0011)|
| MDFK | [CodePen](https://codepen.io/maywang/pen/KKEVvpo)|
| Iris | [CodePen](https://codepen.io/iris831206/pen/VwRaygj?editors=0012)|
| PoWei#8484 | [CodePen](https://codepen.io/harrison-wei-lai/pen/vYPGjdL?editors=1011)|
| macihuang | [CodePen](https://codepen.io/macy1215/pen/ZEPWROd)|
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/MWxyqKQ?editors=0012) | 
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/ZEPWmNa?editors=1111) |
| nini1202desu | [CodePen](https://codepen.io/tvxq5206/pen/wvOMmdK?editors=0011) |.
| WEI | [CodePen](https://codepen.io/wei-z/pen/KKEzEmV?editors=0011) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/VwRadYm) |
| Rock | [CodePen](https://codepen.io/xiu43317/pen/poYbJYz) | 
| jeremyChan | [CodePen](https://codepen.io/nudieisgood/pen/MWxeOZp?editors=1111) | 
| .zack_p | [CodePen](https://codepen.io/Designer-PH/pen/RwdRmxV?editors=0011) | 
| haru | [CodePen](https://codepen.io/haru_portfoilo/pen/MWxjwJz?editors=0010) | 
| Vivian2857 | [CodePen](https://codepen.io/vivian_lin/pen/VwRKjeM?editors=1111) | 
| fanshu0303 | [CodePen](https://codepen.io/JuiHsuanLee0303/pen/OJqRXBY) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/zYbKzOv) | 
| hua | [CodePen](https://codepen.io/LHua/pen/PoLGrPR?editors=1111) | 
| pingshian | [CodePen](https://codepen.io/pingshian0131/pen/PoLbojB?editors=0012) |
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/BabQJzg?editors=1111) | 
| xuan | [CodePen](https://codepen.io/xuan0915/pen/gOELzXN?editors=0011) | 
| jim | [CodePen](https://codepen.io/asiahedh-the-encoder/pen/zYboXbW?editors=1010) | 
| 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/vYPgNxm) |
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/RwdKvxN) |
| 翔.Ben | [Codepen](https://codepen.io/energy95272z/pen/GRemajP?editors=0012) |
|yuling| [Codepen](https://codepen.io/igzdflpu/pen/ExMvXQp?editors=0011)|
|關關| [Codepen](https://codepen.io/ashkuan/pen/OJqzjRP)|
| yuan! | [CodePen](https://codepen.io/townyuan/pen/QWPjKKw) | 


<!-- 
| user | [CodePen]() | 

-->
