---
# System prepended metadata

title: "\U0001F3C5 Day 8"
tags: [Vue 直播班 - 2022 春季班]

---

---
tags: Vue 直播班 - 2022 春季班
---

# 🏅 Day 8
###### tags: `Vue 直播班 - 2022 春季班`

題目 (使用 CodePen 作答)
---
請同學修改程式碼以符合以下要求 (只可以修改註解範圍內的程式碼):

step1. 將 town 的內容複製到 townData。
step2. 將 Ming, Rick 兩個物件加入到 townData.resident 中
>`townData === town` 的結果須為 false。

**參考觀念:**
[1. JavaScript 展開與其餘](https://wcc723.github.io/javascript/2017/12/24/javascript-spread-operator/)
[2. Object.assign()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
[3. 重新認識 JavaScript: Day 05 JavaScript 是「傳值」或「傳址」？](https://ithelp.ithome.com.tw/articles/10191057)


```js=
let town = {
  name: '真心鎮',
  resident: []
}
let townData = {};
let Ming = { name: '小明', age: 16 };
let Rick = { name: '瑞克', age: 21 };

/*程式碼修改處 (可以更改 function 規則)*/
function addResident(obj, res1, res2) {
    
}
/*程式碼修改處*/

addResident(town, Ming, Rick);
console.log(townData === town); // 結果須為 false
```

Bootstrap 響應式格線系統
---
接續前一天[格線系統](https://hackmd.io/DoER0__AQN2eK5G1r7xqsQ#Bootstrap-%E6%A0%BC%E7%B7%9A%E7%B3%BB%E7%B5%B1)，可以嘗試加入斷點，讓網格可以響應式，隨著斷點改變排版
利用此 [Codepen](https://codepen.io/Bingbingboom/pen/ExvJOEr?editors=1010)，修改 `...` 的部分，將畫面還原成下方樣式

- 電腦版時（lg）
  ![](https://i.imgur.com/J6fLW9p.png)
- 平板時（md）
  ![](https://i.imgur.com/8bo52aB.png)
- 手機版時
  ![](https://i.imgur.com/f5ekBgS.png)





回報流程
---
請同學依照下圖教學觀看解答、回報答案:

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

回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)

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

<!-- 解答
// 解法一
function addResident(obj, res1, res2) {
    townData = {...obj};
    townData.resident.push(res1);
    townData.resident.push(res2);
}

// 解法二
function addResident(obj, res1, res2) {
    townData = Object.assign({}, obj);
    townData.resident.push(res1, res2); // push 可推入多個值
}

// 解法三
function addResident(obj, ...res) {
    townData = Object.assign({}, obj);
    townData.resident.push(...res);
}
-->

<!-- Bootstrap
https://codepen.io/Bingbingboom/pen/ZEJZmKo 
-->

回報區
---

| 報數 | 組別/名字   | codepen / 其他回饋   |
| --- |  -------- | -------- |
|1| 肉鬆 | https://codepen.io/klrkicog/pen/zYEaxrN?editors=1011 |
|2|Evab Chiang|https://codepen.io/piskesocute/pen/dyVKPYd|
|3| Iris Huang | https://codepen.io/ythuang/pen/poWKvyJ |
|4|Aaron Tu|https://codepen.io/aarontu/pen/mdBKyOz|
|5| Larry | https://codepen.io/larrylinr5/pen/oNGygxp |
|6| Karen Huang| https://codepen.io/Coding_Snorlax/pen/jOGKEqO?editors=1012 |
|7|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/rNGKaYm|
|8| Yof | https://codepen.io/yangyof/pen/WNZzBKJ?editors=1111|
|9| Jhen | https://codepen.io/cheng-jhen/pen/NWazPMq |
|10|kevinhes|https://codepen.io/kevinhes/pen/MWEXwgv|
|11|Laura|https://codepen.io/minminn/pen/WNZybBx|
|12|Himi|https://codepen.io/Himi/pen/ExwRaJE|
|13| POPEYE |https://codepen.io/popeye_ux/pen/jOGKEQr |
|14| 黃士桓 | https://codepen.io/shr-huan-huang/pen/QWqxbEp?editors=1010 |
|15| Yunei | https://codepen.io/Yunei/pen/BawVyqa |
|16| Liu | https://codepen.io/feng-chi-liu/pen/poWKJNW?editors=1111 |
|17| 許敏鑫 | https://codepen.io/MIN-HSIN/pen/dyVKoNB |
|18|Elaine Liu|https://codepen.io/elaine7598/pen/PoJaqGZ?editors=1010|
|19|andersonshen| https://codepen.io/luxyenni-the-bold/pen/GRMGJXj |
|20|Gill| https://codepen.io/Gill-Chin/pen/VwMdLdY?editors=1111 |
|21|浩|https://codepen.io/Ahoyyyy/pen/ExwRjpM?editors=1010|
|22|Terry21|https://codepen.io/feng0409/pen/poWKJMO?editors=1112 |
|23|AllenW|https://codepen.io/AllenW/pen/QWqxbXm |
|24|Empty Wu|https://codepen.io/emptywu/pen/poWKjeG |
|25|威爾|https://codepen.io/WILL_Wu/pen/poWKjdY|
|26|yu|https://codepen.io/yuu9916/pen/YzrvyaQ?editors=1001|
|27|Howard|https://codepen.io/yawdnhbm/pen/oNGyXQN|
|28|Bella Shya|https://codepen.io/BellaXie/pen/gOGKaZK |
|29|Tim Lin|https://codepen.io/TimmyLin/pen/OJxEyKa|
|30|我是泇吟|https://codepen.io/kljuqbxs/pen/MWEXKby|
|31|Sheep| https://codepen.io/SheepNDW/pen/NWazGzE |
|32|Henry Wu| https://codepen.io/dkcmlaww-the-flexboxer/pen/xxXzVpB |
|33|Mylène|https://codepen.io/hamajibashi/pen/NWazxeG|
|34|Charlotte Lee|https://codepen.io/charlotte-lee/pen/PoJaZBr?editors=1010|
|35|有廖先生(Rain)|https://codepen.io/billpop741/pen/qBPKNRb|
|36|陳暐中|https://codepen.io/wei-z/pen/ZEXROyN?editors=1010|
|37|Judy ☻|https://codepen.io/hsiaohan/pen/MWEXeeL?editors=1100 |
|38|Beanhuang|https://codepen.io/Beanhuang/pen/BawVyOa?editors=1011 |
|39|Arista|https://codepen.io/arista-hsieh/pen/oNGyzPM |
|40|Fleur|https://codepen.io/swwlee/pen/oNGyYYO |
|41|群嘉|https://codepen.io/efzdamnp-the-lessful/pen/poWKEZE?editors=1111|
|42| Meng | https://codepen.io/MGHN/pen/wvrXojJ?editors=0011 |
|43| tingyu | https://codepen.io/dgltu/pen/VwMdYmx |
|44| Otis | https://codepen.io/humming74/pen/qBPKRxN?editors=1011 |
|45| shio | https://codepen.io/shioyen/pen/bGoKqjG?editors=1010|
|46| Bonnie | https://codepen.io/bonnieli1414/pen/RwLJpKY?editors=1011 |
|47| 咖咖 | https://codepen.io/gon790219/pen/gOGKmQN |
|48|Wenfish|https://codepen.io/wenfisht/pen/rNGKypy|
|49|Rick Tzeng|https://codepen.io/rick917jp6/pen/QWqxvLK |
|51|JohnLu|https://codepen.io/jiangshuuu/pen/NWaXXWb?editors=1111
|52|hua|https://codepen.io/hahahazzz123/pen/ZEXRKoR?editors=1111
|53|Gui|https://codepen.io/guitimliu/pen/MWEXvYY
|54|Benson|https://codepen.io/soul81624/pen/gOGKxpd |
|55|Yummyniya|https://codepen.io/yummyniya/pen/MWEXvre |
|56|Calon|https://codepen.io/Calon0118/pen/oNGyGNQ|
|57|柴貓|https://codepen.io/shibacat/pen/VwMdMWJ|
|58|阿牛|https://codepen.io/a-hsien-wu/pen/rNGKGKZ|
|59|Leo Song|https://codepen.io/sunnylaba/pen/KKXexOg?editors=1010 |
|60|AKI|https://codepen.io/akichen27/pen/xxXzyVJ|
|61|Steven Chan|https://codepen.io/Steven1220/pen/zYEaJeE?editors=1011 |
|62|Alvin|https://codepen.io/Alvin20201116/pen/oNGymLJ?editors=1111|
|63|DDDDK|https://codepen.io/dkklee/pen/GRMGPyw|
|64|Yuan|https://codepen.io/yuanluo13542/pen/gOGKymB?editors=1010|
|65|Vicky|https://codepen.io/hyxfish27/pen/NWaBKqx |
|66|Steve|https://codepen.io/ycsteve/pen/NWaBbbN?editors=1011 |
|67|kk|https://codepen.io/potatokaka/pen/gOGjmmj?editors=0011|
|68|Jerry|https://codepen.io/rteyfwwd-the-scripter/pen/WNZKjWO |
|69|peter.chen1024|https://codepen.io/JIAN-RONG/pen/yLzqzoX?editors=1011 |
|70|Ron|https://codepen.io/long-sian-liang/pen/ExwpRgo |
| 71 | Sihle Huang | https://codepen.io/bugbug777/pen/XWePgvv |
| 72| Erin Huang | https://codepen.io/ErinHuang/pen/wvrEqyQ |
|73|Scottie|https://codepen.io/wow767t/pen/dyVqJWv?editors=1111|
|74|dOvOb|https://codepen.io/gezzgrwj-the-styleful/pen/gOGdGmy
|75|Jasper|https://codepen.io/li-jasper/pen/mdBzybR
|76|阿武|https://codepen.io/samwnkyat/pen/bGomqEL?editors=1111
|77|Abbie|https://codepen.io/Abbie0704/pen/yLzRXgz |
|78|Jess_Wu|https://codepen.io/jess1104/pen/NWaOEKx?editors=1011 |
|79|YC|https://codepen.io/YCLu/pen/zYEMBdj |
|80|Henry|https://codepen.io/kaohenry9287/pen/oNGQzyL |
|81|Hedy|https://codepen.io/hhhsuan41/pen/yLzQEGe?editors=1012 |
|82|ShaoYu|https://codepen.io/shaoyukao/pen/yLzQmPx|
|83|William_O^2|https://codepen.io/CodingTrain_1/pen/BawvByx|
|84|Anna|https://codepen.io/kycrleao/pen/zYEyKbg?editors=0010|
|85|FuChang|https://codepen.io/fuchang830714/pen/JjraGJb|
|86|Jason Chen|https://codepen.io/jason60810/pen/rNGPLRG |
|87|mei|https://codepen.io/Shila-Chen/pen/gOGZVzw |
|88|Jordan|https://codepen.io/jordan-ttc-design/pen/wvrNbdp?editors=1111 |
|89|Riley|https://codepen.io/jjpxbprd/pen/dyVrvjE|
|90|Jerry Yen|https://codepen.io/JerryYen/pen/GRMeQbO|
|91|安志|https://codepen.io/lwmtsgek/pen/MWERQpG?editors=1111|
|92|肉桂卷|https://codepen.io/ginnlee/pen/poWBXKX?editors=1111|
|93|阿劍| https://codepen.io/seonkuraito/pen/GRMzZLG |
|94|Sean Chang|https://codepen.io/seanchang7/pen/yLzWyyN?editors=1010|
|95|2/WA|https://codepen.io/ldddl/pen/ExbxVYo|
|96|andyii|https://codepen.io/gultrotpybyvue/pen/GRORYZx |
|97|Carol Li|https://codepen.io/carolli834/pen/MWEMrxe?editors=1111|
|98|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/dyZPQRj?editors=1010
|99|Van|https://codepen.io/fbacojji-the-selector/pen/ExbRdJy?editors=1111 |