---
tags: Vue 直播班 - 2022 春季班
---
# 🏅 Day 14
###### tags: `Vue 直播班 - 2022 春季班`
參考文章: 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());
```
題目 (請貼上 CodePen)
---
請將以下程式碼簡化為箭頭函式 (不影響結果的情況下進行最大簡化)
```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));
```
回報流程
---
請同學依照下圖教學觀看解答、回報答案:
回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)
<!-- 解答
// 題目一
const sum = (a, b) => {
let c = a + b;
return c;
}
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));
-->
回報區
---
| 報數 |組別/名字 | codepen / 其他回饋 |
|:--------:| -------- | -------- |
|1|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/mdBQogy|
|2|Evan Chiang|https://codepen.io/piskesocute/pen/qBPQvew|
|3| Larry | https://codepen.io/larrylinr5/pen/abLQMeP?editors=1111 |
|4| Iris Huang | https://codepen.io/ythuang/pen/GRMwoJj |
|5| kevin嘉軒 | https://codepen.io/kevin-chang-the-sasster/pen/NWaEmPj |
|6| POPEYE | https://codepen.io/popeye_ux/pen/bGoQJdW |
|7| 肉鬆 | https://codepen.io/klrkicog/pen/ExwOJNM?editors=0011 |
|8|Wenfish|https://codepen.io/wenfisht/pen/dyVQLXy|
|9|威爾|https://codepen.io/WILL_Wu/pen/gOGQyxg|
|10|Joy Cheng| https://codepen.io/joycheng5432/pen/NWaEmYy?editors=0011|
|11|Aaron Tu|https://codepen.io/aarontu/pen/vYeQMry|
|12|Arista|https://codepen.io/arista-hsieh/pen/poWQBMG|
|13|Liu| https://codepen.io/feng-chi-liu/pen/NWaEmVB?editors=1111 |
|14|kevinhes|https://codepen.io/kevinhes/pen/xxXQNGV?editors=0012|
|15|AllenW|https://codepen.io/AllenW/pen/gOGQyZx |
|16|Jhen|https://codepen.io/cheng-jhen/pen/eYGQaJO |
|17| Kelvin Hsu | https://codepen.io/kelvin001/pen/dyVQEXW?editors=1010 |
|18|Howard|https://codepen.io/yawdnhbm/pen/mdBQYOX|
|19|Sheep|https://codepen.io/SheepNDW/pen/KKXrYLb |
|20|Yunei| https://codepen.io/Yunei/pen/NWaEVMm |
|20|Yunei| https://codepen.io/emptywu/pen/JjreqvN |
|22|Elaine Liu|https://codepen.io/elaine7598/pen/VwMVOYp?editors=0010|
|23|Laura|https://codepen.io/minminn/pen/YzrRbZr|
|24|Will|https://codepen.io/ncrdpepc-the-lessful/pen/mdBQYaG?editors=1012|
|25|Gill|https://codepen.io/Gill-Chin/pen/OJxaYRE?editors=1011|
|26|Bella Shya|https://codepen.io/BellaXie/pen/WNZYBqN?editors=0011 |
|27|kk|https://codepen.io/potatokaka/pen/wvrQbVL?editors=0011|
|28|有廖先生(Rain)|https://codepen.io/billpop741/pen/KKXrLJw|
|29|Charlotte Lee|https://codepen.io/charlotte-lee/pen/vYeQqKv?editors=0010|
|30| Meng | https://codepen.io/MGHN/pen/RwLqzBX?editors=0011 |
|31|YC|https://codepen.io/YCLu/pen/eYGQZjB |
|32|Yuan|https://codepen.io/yuanluo13542/pen/oNGQKLv?editors=0010 |
|33|Beanhuang|https://codepen.io/Beanhuang/pen/GRMwVrj?editors=0011 |
|34|Tim Lin|https://codepen.io/TimmyLin/pen/rNGQXqg|
|35|Judy ☻|https://codepen.io/hsiaohan/pen/ZEXmgPZ?editors=0011 |
|36|Pei Ying|https://codepen.io/hsiaohan/pen/ZEXmgPZ?editors=0011 |
|37|andersonshen|https://codepen.io/luxyenni-the-bold/pen/zYEyOYx |
|38| Benson |https://codepen.io/soul81624/pen/OJxrLOB |
|39| 黃士桓 | https://codepen.io/shr-huan-huang/pen/wvrRwpR?editors=0011 |
|40|Gui|https://codepen.io/guitimliu/pen/eYGbOGN
|41|Henry| https://codepen.io/kaohenry9287/pen/rNGoBve |
|42|Jerry|https://codepen.io/rteyfwwd-the-scripter/pen/abLPoWZ?editors=1112|
|43|Calon|https://codepen.io/Calon0118/pen/jOGXNvN|
|44|陳暐
|45|Scottie|https://codepen.io/wow767t/pen/zYEyYEp?editors=1111|
|46|AKI|https://codepen.io/akichen27/pen/NWaEZxP|
|47|Henry Wu|https://codepen.io/dkcmlaww-the-flexboxer/pen/WNZLbRZ?editors=1112 |
|48|yu|https://codepen.io/yuu9916/pen/WNZLNNN?editors=1012 |
|49|dOvOb|https://codepen.io/gezzgrwj-the-styleful/pen/LYzMppd?editors=0011
|50|Rick Tzeng|https://codepen.io/rick917jp6/pen/ZEXVboX
|51| tingyu | https://codepen.io/dgltu/pen/GRMPoVv?editors=0011 |
|52| shio | https://codepen.io/shioyen/pen/ZEXVQVP |
|53|Himi|https://codepen.io/Himi/pen/poWqyNm|
|54|Mylène|https://codepen.io/hamajibashi/pen/wvrRMVm|
|55|咖咖|https://codepen.io/gon790219/pen/rNGoeqL |
|56|海底藍|https://codepen.io/registermar3/pen/NWaerdq?editors=0011 |
|57|Fleur|https://codepen.io/swwlee/pen/abLPvzL|
|58|Otis|https://codepen.io/humming74/pen/poWqbXW?editors=0011 |
|59|Terry21|https://codepen.io/feng0409/pen/poWqEJd?editors=0012 |
|60|Yummyniya|https://codepen.io/yummyniya/pen/QWqzGgo|
|61|柴貓|https://codepen.io/shibacat/pen/GRMPNJM|
|62|nora-end|https://codepen.io/nora-shu/pen/YzrdZNP
|63|Vicky|https://codepen.io/hyxfish27/pen/BawvZaE |
|64|Bonnie|https://codepen.io/bonnieli1414/pen/LYzMLmg?editors=1010 |
|65|John| https://codepen.io/jiangshuuu/pen/NWaXXWb |
|66|Jasper|https://codepen.io/li-jasper/pen/WNZLJwj |
|67|我是泇吟|https://codepen.io/kljuqbxs/pen/ZEXVomV|
|68|DDDDK|https://codepen.io/dkklee/pen/oNGJdOb|
|69|hua|https://codepen.io/hahahazzz123/pen/RwLEyeG?editors=1111|
|70|Anna|https://codepen.io/kycrleao/pen/qBPLJpq?editors=0011|
|71|Steven Chan|https://codepen.io/Steven1220/pen/yLzGRoW?editors=1011 |
|72|William_O^2|https://codepen.io/CodingTrain_1/pen/bGoOOQY|
|73|Jason Chen| https://codepen.io/jason60810/pen/MWELJRm |
|74|阿武| https://codepen.io/samwnkyat/pen/GRMzXeq?editors=1111 |
|75|小K|https://codepen.io/kelen1995/pen/QWqYYpx|
|76| Sihle Huang | https://codepen.io/bugbug777/pen/eYGxQWz |
|77|Jordan Tseng|https://codepen.io/jordan-ttc-design/pen/mdBobyr?editors=0011|
|78|mei|https://codepen.io/Shila-Chen/pen/RwLdYgm|
|79|肉桂卷|https://codepen.io/ginnlee/pen/eYGwJrd?editors=0011|
|80|Abbie|https://codepen.io/Abbie0704/pen/OJxeQLe|
|81|Jerry Yen|https://codepen.io/JerryYen/pen/zYEgmQj|
|82|FuChang|https://codepen.io/fuchang830714/pen/zYEeOeB|
|83|許敏鑫|https://codepen.io/MIN-HSIN/pen/BamBjXv?editors=1111|
|84|阿劍| https://codepen.io/seonkuraito/pen/LYzqNoL |
|85|Bruno Yu| https://codepen.io/bruno-yu/pen/YzEzzxo?editors=1111 |86|Hedy| https://codepen.io/hhhsuan41/pen/bGoQPLE?editors=0111 |
|86| ShaoYu | https://codepen.io/shaoyukao/pen/xxPxBXz |
|87|Riley|https://codepen.io/jjpxbprd/pen/zYPxxPX|
|88|2/WA|https://codepen.io/ldddl/pen/podvgrK|
|89|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/MWOaZRQ?editors=1011|
|90|andyii|https://codepen.io/gultrotpybyvue/pen/GROWEje
|91| Van | https://codepen.io/fbacojji-the-selector/pen/RwjYPMo?editors=0011 |
|92|大衛|https://codepen.io/exnsrpjc/pen/WNdxJJp?editors=1011 |
|93|Carol Li|https://codepen.io/carolli834/pen/PoRBExW?editors=1011|
Sign in with Wallet
Connect another wallet