---
tags: JS 直播班 - 2022 秋季班
---
###### tags: `簡單`
# 四則運算
## 本章節要學什麼？
學習練習使用基礎的四則運算來熟悉加減乘除與重構簡單的計算元件。
## 題目1：相加產生器 (+)
``` =JavaScript
// input 輸入
add(1,1);
add(2,2);
add(3,3);
// output 輸出
2
4
6
```
## 題目2：相減產生器 (-)
``` =JavaScript
// input 輸入
subtract(1,1);
subtract(2,3);
subtract(8,3);
// output 輸出
0
-1
5
```
## 題目3：相乘三次 (*)
* 輸入一個數字後，該參數會相乘 3 次，例如輸入 `2`，輸出為 `2*2*2=8`
``` =JavaScript
// input 輸入
multiply3Times(3);
multiply3Times(0);
multiply3Times(9);
// output 輸出
27
0
729
```
## 題目4：取 2 的餘數（%）
``` =JavaScript
// input 輸入
remainder(3);
remainder(2);
remainder(8);
// output 輸出
1
0
0
```
## 題目5：取 2 的餘數 + 判斷是否可整除 (% + 結果判斷)
``` =JavaScript
// input 輸入
isDivisible(3);
isDivisible(2);
isDivisible(8);
// output 輸出
未整除
已整除
已整除
```
## 題目6：我要存錢(區域變數、全域變數)
請透過 `addBankMoney` 函式，來累加 `bankMoney` 變數
```=JavaScript
let bankMoney = 0;
<!-- 作答開始 -->
function addBankMoney(num){
}
<!-- 作答結束 -->
// input 輸入
addBankMoney(1);
addBankMoney(50);
addBankMoney(10);
// output 輸出
bankMoney 值為 1
bankMoney 值為 51
bankMoney 值為 61
```
## 題目7：簡單計算機
```=javascript
// input 輸入
calculate(3,5,'+');
calculate(4,2,'-');
calculate(7,9,'*');
calculate(5,5,'/');
// output 輸出
8
2
63
1
```
## 題目8：簡單計算機 + 顯示算式過程
```=javascript
// input 輸入
calculateProcess(3,5,'+');
calculateProcess(4,2,'-');
calculateProcess(7,9,'*');
calculateProcess(5,5,'/');
// output 輸出
"3+5=8"
"4-2=2"
"7*9=63"
"5/5=1"
```
## 題目9：商業邏輯題：增加服務費
六角冰果店即將開張，但發現收銀機漏寫服務費邏輯，還請協助撰寫：
* 一個 `serviceCharge`函式，來計算 5% 服務費並回傳總計費用為多少。
情境：小華吃了一碗冰，小計 100 元，加上服務費為 105 元。
```=javascript
<!-- 作答開始 -->
function serviceCharge(num){
}
<!-- 作答結束 -->
const total = serviceCharge(100);
console.log(`您總計費用為 ${total}`)
```
## 題目10：重構題：消除重複，抽離變因
六角冰店超賺，於是開了二店為八角冰店，收銀機商業邏輯調整為：
1. 兩家店同時聘請專業執事與女僕，增加服務費為 10%
2. 六角冰店一碗冰 100 元，八角冰店一碗冰 800 元
`sixAngleCalculate`、`eightAngleCalculate` 丟入 `num` 冰碗數量，就可獲得總費用
### 重構思路
1. 兩個函式裡面的服務費都是一樣的，可以嘗試抽出來成一個新函式 `serviceCharge`，專門來計算兩間店的服務費
```=javascript
// 第一個參數為冰的數量
function sixAngleCalculate(num){
const subTotal = num * 100;
const serviceCharge = subTotal * 0.1;
const total = subTotal + serviceCharge;
return total;
}
//
function eightAngleCalculate(num){
const subTotal = num * 800;
const serviceCharge = subTotal * 0.1;
const total = subTotal + serviceCharge;
return total;
}
```
## 作業提交等級
* LV1：解出 10 題，並提交 Codepen
* LV2：設計一個 hackmd，嘗試自己設計 10 題
* LV3：嘗試去做其他學生寫的題目，並 tag 學員回報給他，感謝他的命題，讓自己觀念更好
## 回報區
| Discord | LV | CodePen / 答案 |
|:-----------------------:|:---:|:--------------------------------------------------------------------------------------------------------------------------------:|
| Iris Huang#6727（範例） | LV1 | [CodePen](https://codepen.io/ythuang/pen/GRxejgE) |
|嗶嗶羊#8042 | LV1 | [CodePen](https://codepen.io/mazizlte-the-typescripter/pen/VwxBbyE?editors=0012) |
| Rice#8043 | LV1 | [CodePen](https://codepen.io/riecball/pen/xxjYMGM?editors=1010) |
| 圈圈#4060 | LV3 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/gOzeEqK)/[HackMD](https://hackmd.io/@j6ccRYgTTEiVcfMfmAELcw/S16u2cVGs) |
| hannahTW#2224 | LV3 | [Codepen](https://codepen.io/hangineer/pen/OJZZVYm?editors=1011)/[HackMD](https://hackmd.io/@XuLchNweTiC4s2NZlAlQDw/SJT-mtBGi) |
| 我是泇吟#5189 | LV1 | [CodePen](https://codepen.io/kljuqbxs/pen/qBYYRwR) |
| Sentiments#4883 | Lv1 | [codepen](https://codepen.io/Sentiments/pen/XWqqpLm) |
| JackC#0411 | LV1 | [CodePen](https://codepen.io/key0329/pen/eYrMQmX) |
| 心幻羽#0056 | LV1 | [CodePen](https://codepen.io/linglingsyu/pen/VwxxrZL) |
| Kimi#9564 | LV1 | [CodePen](https://codepen.io/kimihu91/pen/PoeeOop) |
| RyanTsai#8906 | LV1 | [CodePen](https://codepen.io/linlaose/pen/NWMMwoO) |
| annanna#6011 | LV1 | [CodePen](https://codepen.io/annaprosty/pen/ExLLRyE) |
| beta lin#1445 | LV1 | [Codepen](https://codepen.io/linbeta/pen/mdLLKON?editors=0011) |
| Ayre#0016 | LV2 | [Codepen](https://codepen.io/yichunlin09/pen/rNvvoJM?editors=0010)/[HackMD](https://hackmd.io/6Qu7kt4aTgmBg1f_n--I-g?view) |
| 威0#6919 | LV1 | [Codepen](https://codepen.io/n0918679182/pen/xxjjmmP?editors=0012) |
| YC#2522 | LV1 | [CodePen](https://codepen.io/YCLu/pen/rNvvoKW) |
| 黃士桓#7654 | Lv1 | [codePen](https://codepen.io/shr-huan-huang/pen/RwyyEjB) |
| VT#0895 | Lv1 | [CodePen](https://codepen.io/vt197/pen/vYjjbxw) |
| azami#5986 | LV1 | [CodePen](https://codepen.io/azami/pen/rNvvPwJ) |
| 無名#6427 | LV1 | [CodePen](https://codepen.io/Nomoney/pen/oNddJVy?editors=0011) |
| JustinLiu#9699 | LV3 | [CodePen](https://codepen.io/justin0227/pen/OJZZdqR?editors=0010)/ [HackMD](https://hackmd.io/@jbYWLKdFRkCrD26r9VO5XA/rJehyzdMj) |
| Winnie#1306 | LV1 | [CodePen](https://codepen.io/WinnieWuWinnie/pen/LYmmqzM?editors=0012) |
| Benson#6763 | LV1 | [CodePen](https://codepen.io/kumashow/pen/YzLLBgz) |
| hsiung阿熊#4079 | LV1 | [CodePen](https://codepen.io/hsiungchi/pen/WNJJPYj) |
| 法希娜#3206 | LV1 | [CodePen](https://codepen.io/yiiserpf-the-encoder/pen/XWqqObe?editors=0012) |
| DoraHuang#8223 | LV1 | [CodePen](https://codepen.io/mwebwvuq-the-flexboxer/pen/GRddzeo) |
| Arista#5802 | LV1 | [CodePen](https://codepen.io/arista-hsieh/pen/JjvvzjQ) |
| 黑白兔#0684 | LV1 | [CodePen](https://codepen.io/johnny329/pen/vYjjPxX) |
| Cliff#4606 | LV1 | [Codepen](https://codepen.io/Cliff_hex/pen/ExLLMEY) |
| 楓之聲#6945 | LV1 | [Codepen](https://codepen.io/sshane258/pen/zYjjbMY) |
| cotton#7163 | LV1 | [Codepen](https://codepen.io/cottonT/pen/qBYYgwG?editors=0012) |
| KatyChiang#1554 | LV1 | [Codepen](https://codepen.io/Kai0819/pen/yLjjwEZ?editors=0011) |
| Ohno#1144 | LV1 | [Codepen](https://codepen.io/mmaa7850/pen/RwyydEZ?editors=1111) |
| banazita#5143 | LV1 | [CodePen](https://codepen.io/banazita/pen/KKRRYdL?editors=1111) |
| 威爾#1694 | LV1 | [CodePen](https://codepen.io/WILL_Wu/pen/mdLLRBw) |
| Iris_#8462 | LV1 | [CodePen](https://codepen.io/irissamy/pen/XWqqOzq) |
| Yuna Huang#2692 | LV1 | [CodePen](https://codepen.io/Yuna1002/pen/wvjjmjj?editors=0011) |
| Yiru#0236 | LV1 | [CodePen](https://codepen.io/yiru94/pen/JjvvVYb?editors=0010) |
| Hilda#7085 | LV1 | [CodePen](https://codepen.io/vwquikad-the-vuer/pen/RwyydMp?editors=0012) |
| Rena#6249 | LV1 | [CodePen](https://codepen.io/aureate0116/pen/VwxxNxx?editors=1111) |
| CloThEs#7837 | LV1 | [CodePen](https://codepen.io/CloThEsZ/pen/NWMMVOp) |
| SunnyCheng#4113 | LV1 | [CodePen](https://codepen.io/Sunny0509/pen/qBYYGKg?editors=1111) |
| suihsilan#9485 | LV1 | [CodePen](https://codepen.io/suihsilan/pen/eYrraWe?editors=0010) |
| Peng#9811 | LV1 | [CodePen](https://codepen.io/peng-027/pen/QWrrXwO?editors=1011) |
| Cream#3449 | LV1 | [CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/BaxxevL?editors=0011) |
| Fan#3405 | LV1 | [CodePen](https://codepen.io/Fan123/pen/zYjjVmY?editors=1111) |
| yoyo#1003 | LV1 | [CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/zYjjQym?editors=1111) |
| yumy#1940 | LV1 | [CodePen](https://codepen.io/yumy_yamg/pen/jOxxRzO?editors=0011) |
| SASIMI#5099 | LV1 | [Codepen](https://codepen.io/sashimi1327/pen/bGMMXjP) |
| 出事了阿伯#9923 | LV1 | [Codepen](https://codepen.io/BradpittLai/pen/PoeeLMe?editors=0011) |
| hungya#0773 | LV1 | [Codepen](https://codepen.io/hungya777/pen/GRddeYM?editors=0011) |
| Greta#0837 | LV1 | [Codepen](https://codepen.io/gretali/pen/vYjjoZR) |
| LHchien33#6232 | LV1 | [Codepen](https://codepen.io/lin_chien/pen/KKRRLKM?editors=0011) |
| Hazel.#6020 | LV1 | [Codepen](https://codepen.io/Hazelhsieh/pen/eYrrozN?editors=0011) |
哈囉哈#5196| LV1 | [CodePen](https://codepen.io/bill0841205/pen/zYjaOpj?editors=1111) |
| Amberhh#2465 | LV1 | [Codepen](https://codepen.io/Amberhh/pen/GRddPae?editors=0010) |
| s339428326#7402 | LV1 | [Codepen](https://codepen.io/s339428326/pen/ExLRxKJ?editors=1111) |
| AuroraC#6539 | LV1 | [codepen](https://codepen.io/AuroraC/pen/bGMMXBz?editors=1012) |
| mandylai#4055 | LV1 | [codepen](https://codepen.io/mandy-lai-2/pen/wvjjjwY) |
| kuku#3118 | LV3 | [Codepen](https://codepen.io/mengting-ku/pen/ZEoRYRW?editors=0012)/[HackMD](https://hackmd.io/UETc9c3aS0C0qbwwPah5eQ?view) |
| 蓁心#6229 | LV1 | [Codepen](https://codepen.io/tlorfrnl-the-typescripter/pen/VwxdwqP?editors=0011) |
| albee#9121 | LV3 | [Codepen](https://codepen.io/cvopcyps-the-selector/pen/VwxdLzR)/[HackMD](https://hackmd.io/@AvPQw3GSS7K6C1C7g_Sj0g/Sktkw2czj) |
| jamesccc#6244 | LV1 | [Codepen](https://codepen.io/nimwnynv-the-sasster/pen/ZEoREWq?editors=1112) |
| PayRoom#8328 | LV1 | [Codepen](https://codepen.io/water38198/pen/vYjrEKp) |
| KC_8685#9343 | LV1 | [Codepen](https://codepen.io/cathy7411/pen/wvjjNgK) |
| 萱仔#0781 | LV3 | [Codepen](https://codepen.io/ting-hsuan/pen/ZEoRYpY?editors=0010) /[HackMD](https://hackmd.io/@_wbHICMwRFSwudgB4jkbLw/B1fX6-k7o)/[Codepen](https://codepen.io/ting-hsuan/pen/zYjmMxz?editors=0010) |
| 鑫鑫#4346 | LV1 | [CodePen](https://codepen.io/Neil1024/pen/jOxKEbR?editors=0012) |
| yawun#0042 | LV1 | [CodePen](https://codepen.io/monicalin/pen/QWrrYxv) |
| Tuhacrt#0008 | LV1 | [Codepen](https://codepen.io/Tuhacrt/pen/mdLKeXW) |
| RJRS#9430 | LV1 | [Codepen](https://codepen.io/RJRS/pen/jOxKPga) |
| 老張花生#5670 | LV1 | [Codepen](https://codepen.io/dawin-chen/pen/MWGXKyg?editors=1010) |
| 芮綺#5224 | LV1 | [Codepen](https://codepen.io/zhan70/pen/oNdyNKB) |
| YiTzu妮莎#2717 | LV1 | [Codepen](https://codepen.io/yitzufu/pen/WNJyQmg) |
| shinyhung#3825 | LV1 | [Codepen](https://codepen.io/sean_1215/pen/RwyJavN?editors=1111) |
| ssozr#4680 | LV1 | [codepen](https://codepen.io/ssozr/pen/xxjjNZj?editors=0010) |
| xherobruce#6825 | LV1 | [codepen](https://codepen.io/winwinbruce/pen/OJZEMyE) |
| 艸良#2846 | LV1 | [codepen](https://codepen.io/momoninainai/pen/xxjjebE?editors=0011) |
| sihyun#6318 | LV1 | [codepen](https://codepen.io/siyuch/pen/NWMzazR?editors=1111) |
| 入門小菜G#0191 | LV1 | [codepen](https://codepen.io/gybcmlfj-the-typescripter/pen/oNdyoJx) |
| Ron Liang#7277 | LV1 | [codepen](https://codepen.io/ron-go/pen/dyeKmYb) |
| Wei#2330 | LV1 | [Codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/JjvZprB?editors=0012) |
| Gill#9280 | LV1 | [codepen](https://codepen.io/Gill-Chin/pen/RwyJMbN) |
Curtis#4780 | LV1 | [codepen](https://codepen.io/curtislin/pen/YzLvaJG?editors=0010) |
| WeiJ#7376 | LV1 | [codepen](https://codepen.io/weijlin/pen/MWGXGvW?) |
| m_m#5493 | LV1 | [Codepen](https://codepen.io/minnn7716/pen/JjvZvoX) |
| VK#6657 | LV1 | [Codepen](https://codepen.io/VKCS/pen/OJZEoor) |
| jimmyFang#9575 | LV1 | [Codepen](https://codepen.io/pohxiqqo/pen/LYmrMQL?editors=0010) |
| jackson204#6363 | LV1 | [Codepen](https://codepen.io/CocoCat/pen/wvjXQxP?editors=0011) |
| 艾芮絲#6060 | LV1 | [Codepen](https://codepen.io/wangyingju/pen/LYmrMqO) |
| Hironaka#7367 | LV1 | [Codepen](https://codepen.io/Hironaka0815/pen/oNdyyGa?editors=0011) |
| jackson204#6363 | LV1 | [Codepen](https://codepen.io/jackson204/pen/abGKXaK) |
| YU #0618 | LV1 | [codepen](https://codepen.io/yoken_/pen/vYjRzzb) |
| Novella#1032 | LV1 | [Codepen](https://codepen.io/Novellaq/pen/dyeeaax) |
| yoshidc#0455 | LV1 | [CodePen](https://codepen.io/yoshiyyc/pen/eYrKjzL) |
| Rr#2215 | LV1 | [CodePen](https://codepen.io/rufangcheng/pen/OJZEwXb) |
| William Lai#0196 | LV1 | [CodePen](https://codepen.io/lai-weihan/pen/wvjxWeJ) |
| 維尼#2200 | LV1 | [CodePen](https://codepen.io/gxvzprtq-the-selector/pen/oNdMZYY?editors=0012) |
| kenki100#0068 | LV1 | [codepen](https://codepen.io/ken100/pen/vYjageN) |
| Lucie#3831 | LV1 | [Codepen](https://codepen.io/bisespei/pen/OJZEydQ) |
| Eileen#6454 | LV1 | [Codepen](https://codepen.io/Eileen-io/pen/RwyBpjj) |
| 山貓(焜)#7041 | LV1 | [Codepen](https://codepen.io/nopeta/pen/qBYypBd) |
| 三隻小貓#1905 | LV1 | [Codepen](https://codepen.io/bagelover/pen/ZEoRPjV?editors=1111) |
| Chloe#5422 | LV1 | [Codepen](https://codepen.io/Ironchloe/pen/mdLjjmJ?editors=0010) |
| Data#9297 | LV1 | [Codepen](https://codepen.io/kirakira72/pen/zYjaBmO) |
| hayaka#4579 | LV1 | [Codepen](https://codepen.io/CocoCat/pen/wvjXQxP?editors=0010) |
| LQQ#4187 | LV1 | [Codepen](https://codepen.io/morefoodq/pen/abGKPrw) |
| 教練#6451 | LV1 | [Codepen](https://codepen.io/monkeybear721/pen/LYmBvKL) |
| FiReBrO#0557 | LV1 | [Codepen](https://codepen.io/firebro42/pen/jOxpgzd?editors=1111) |
| Baozi#2042 | LV1 | [Codepen](https://codepen.io/lillianyu/pen/oNdMyLE) |
|CJ07#0176| LV1 |[Codepen](https://codepen.io/cjtseng07/pen/qBYMWMY?editors=0012) |
| k.sin#3115 | LV1 | [Codepen](https://codepen.io/sin588/pen/gOzdbde?editors=0011)
| Kevin8349#6131 | LV1 | [Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/bGMxeJr?editors=0011)
| 薯餅#3581 | LV1 | [Codepen](https://codepen.io/ColdingPoTaTo/pen/JjvaLKa)
| 富#0389 | LV1 | [Codepen](https://codepen.io/spring40747/pen/oNdMYKV?editors=1111)
|0xWilliam #8796| LV1|[Codepen](https://codepen.io/0xWilliam0322/pen/jOxvvWz?editors=1011)
|王懷英 #7271| LV1|[Codepen](https://codepen.io/huaiying/pen/gOzddgW)
|jacky010080#0880| Lv1 |[Codepen](https://codepen.io/Yen-Jung-Chen/pen/vYjzvbZ?editors=0011)
|Loran#1105| Lv1 |[Codepen](https://codepen.io/loranlin/pen/GRdGdMd?editors=1011)
|Chian#1564| Lv1 |[Codepen](https://codepen.io/chian-yang/pen/gOzKPZq)
|WEI_RIO#9342|Lv1|[CodePen](https://codepen.io/wei_wu/pen/rNvvXQj?editors=0012)|
|yaru#6308|Lv1|[CodePen](https://codepen.io/lszaietc/pen/ExLOPae?editors=0010)|
|Cookie SSS#6991|Lv1|[CodePen](https://codepen.io/sqhjikpa-the-selector/pen/wvjQMXq?editors=0012)|
|Joy1712#4670|Lv1|[CodePen](https://codepen.io/Joy1712/pen/vYjQLMy?editors=0011)|
|肉桂卷#0625|Lv1|[CodePen](https://codepen.io/ginnlee/pen/xxjQVYE?editors=0011)|
|H.L.C#2152|Lv1|[Codepen](https://codepen.io/hsin-liang/pen/oNdaBgy)|
|Vera#5592|Lv1|[Codepen](https://codepen.io/skvera/pen/QWrxRZG)|
| 小白#2406 | LV1 | [CodePen](https://codepen.io/gracewhite/pen/qBYKZNK) |
| 予予#9627 | LV1 | [CodePen](https://codepen.io/kiqzcraa/pen/gOzQBvv) |
|威爾#1694|LV1|[CodePen](https://codepen.io/WILL_Wu/pen/mdLLRBw)|
|sophiee#7015|LV1|[Codepen](https://codepen.io/sophiee2727/pen/ZEomNGw?editors=0011)|
|poetry1933#2713|LV1|[CodePen](https://codepen.io/poetry1932/pen/OJZErqd)|
|Chung#5951|LV1|[CodePen](https://codepen.io/yuju16/pen/xxjmwxg?editors=0010)|
|Judy Wei#6103|LV1|[CodePen](https://codepen.io/Judy0718/pen/gOzZreo)|
|IreneY#0086|Lv1|[codepen](https://codepen.io/HalfPlannedJourney/pen/qBYJgON)|
|柔柔#1716|Lv1|[codepen](https://codepen.io/rouchen/pen/abGXOqo?editors=1012)|
|ViNci#4273|Lv1|[codepen](https://codepen.io/ViNciSyo/pen/RwyvPjK)|
|Mylène#2481|Lv1|[CodePen](https://codepen.io/hamajibashi/pen/xxjMVLK)|
|Jhen#4563|Lv1|[CodePen](https://codepen.io/su-jhen/pen/yLjwExE)|
|魚子醬#5220|LV1|[CodePen](https://codepen.io/haihsuan/pen/ExLMXQK)|
|christina#6185|LV1|[Codepen](https://codepen.io/chrisc0210/pen/ZEoZeRB)|
|安0#2448|LV1|[CodePen](https://codepen.io/JzhenAn/pen/gOzJOEo?editors=0010)|
|軟綿綿 (๑•ᴗ•๑) ♡#3627|LV1|[CodePen](https://codepen.io/Connie-Chien/pen/vYjwjPa?editors=0012)|
|LAI LAI#8044|LV1|[CodePen](https://codepen.io/LAI-LAI/pen/rNKBVXm?editors=0011)|
|Paul#7426|LV1|[CodePen](https://codepen.io/paul-1997/pen/WNyejdB?editors=0011)|
|YI#0863|LV1|[CodePen](https://codepen.io/YI0305/pen/poKzdXd?editors=0012)|
|charlottelee849#0366|LV1|[CodePen](https://codepen.io/charlotte-lee/pen/XWYrmPY?editors=0012)|
|Clara#1275|LV1|[CodePen](https://codepen.io/bsupixqu/pen/xxzKmpv)|
|健育#5748|LV1|[CodePen](https://codepen.io/c1317156/pen/JjZjyMQ)|
|samger#0808|LV1|[CodePen](https://codepen.io/lee-wei-hong/pen/eYKdvYb?editors=1112)|
|Ryan Chiang#6649|LV1|[Codepen](https://codepen.io/ryanchiang/pen/BaVZQdW?editors=0012)|
|勁辣雞腿寶#5817|LV1|[Codepen](https://codepen.io/orz311013/pen/wvXqrdW?editors=1012)|
|Tami#6742|LV1|[CodePen](https://codepen.io/wqsdqbjn-the-vuer/pen/eYKGjEb)/[CodePen-圈圈](https://codepen.io/wqsdqbjn-the-vuer/pen/YzvENry)|https://hackmd.io/lvFWrEseSuWrWs_tX7RuIg?both
|Shuo#1596|LV1|[CodePen](https://codepen.io/chiangchungshuo/pen/QWBYryP?editors=1011)|
Sign in with Wallet
Connect another wallet