---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 Day 8 - 函式運用、Bootstrap 格線系統 2
題目（使用 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 響應式格線系統
---
接續前一天格線系統，可以嘗試加入斷點，讓網格可以響應式，隨著斷點改變排版
利用此 [Codepen](https://codepen.io/hexschool/pen/LYrBdKz?editors=1010)，修改 `...` 的部分，將畫面還原成下方樣式
- 電腦版時（lg）
- 平板時（md）
- 手機版時
> 滿版
## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
<!-- 解答：
// 解法一
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/hexschool/pen/LYrBmPO
-->
回報區
---
| Discord | CodePen / 答案 |
| ---------------- |:----------------------------------------------------------------------------:|
|Aaron Shih#3879|[codepen](https://codepen.io/aaron00366/pen/BaPyPZz?editors=1111) |
| WeiJ#7376 | [codepen](https://codepen.io/weij0/pen/poZvRWp) |
| Wendy#5615 | [codepen](https://codepen.io/wendy03/pen/dyjPNzx) |
| bakiii | [codepen](https://codepen.io/aki168/pen/qByBwxq) |
| 冬天#5215 | [codepen](https://codepen.io/winter_/pen/vYaEgeE) |
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/oNMNPPe) |
| albee#9121 | [Codepen](https://codepen.io/albee-chang/pen/bGjNgYq?editors=1010) |
| yuyu#6310 | [Codepen](https://codepen.io/yuyu0905/pen/GRBgrxZ?editors=1010) |
| 威0#6919 | [codepen](https://codepen.io/n0918679182/pen/wvxBgmJ?editors=0012) |
| Sean#3825 | [codepen](https://codepen.io/sean_1215/pen/ZEjYLMM?editors=1111) |
| Fang#4680 | [Codepen](https://codepen.io/std95174/pen/gOjbgeM) |
| 大衛#4869 | [Codepen](https://codepen.io/exnsrpjc/pen/KKBwaRZ?editors=0011) |
| 薯餅#3581 | [Codepen](https://codepen.io/ColdingPoTaTo/pen/OJwPWBp) |
| hannahTW#2224 | [Codepen](https://codepen.io/hangineer/pen/BaPypOW?editors=1011) |
| popeye | [Codepen](https://codepen.io/popeye_ux/pen/RwBNKdR) |
| AuroraC#6539 | [codepen](https://codepen.io/AuroraC/pen/QWBwdza?editors=1010) |
| PeihanWang#2530 | [codepen](https://codepen.io/PeihanWang/pen/oNMgBVg) |
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/yLqygWx) |
| 心幻羽#0056 | [Codepen](https://codepen.io/linglingsyu/pen/QWBwdBO) |
| 阿榮#8277 | [CodePen](https://codepen.io/mogzbvfl-the-reactor/pen/VwBYPJe) |
| MotoRin#2616 | [Codepen](https://codepen.io/casslam/pen/OJwPpbz?editors=0012) |
| mandylai#4055 | [Codepen](https://codepen.io/mandy-lai-2/pen/eYjmvZo) |
| 大頭#8116 | [Codepen](https://codepen.io/d22495521/pen/YzjPZWp) |
| kenki100#0068 | [Codepen](https://codepen.io/ken100/pen/gOjbgEg) |
| LHchien33#6232 | [Codepen](https://codepen.io/lin_chien/pen/abjzJWO) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/PoBwpQR) |
| Benson#6763 | [CodePen](https://codepen.io/kumashow/pen/qByEryq) |
| Alex#9978 | [CodePen](https://codepen.io/datsxzqg-the-selector/pen/RwBNpLZ?editors=1010) |
| christina#6185 | [Codepen](https://codepen.io/chrisc0210/pen/poZvPvo) |
| 圈圈#4060 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/NWBPjqV) |
| 魚子醬#5220 | [Codepen](https://codepen.io/haihsuan/pen/RwBNVwy) |
| int#7518 | [Codepen](https://codepen.io/intHuang/pen/JjBoNNO?editors=1011) |
| Hilda#7085 | [Codepen](https://codepen.io/vwquikad-the-vuer/pen/poZvPPj) |
| jimmyFang#9575 | [Codepen](https://codepen.io/pohxiqqo/pen/XWBJRpp?editors=1010) |
| Wendy#8049 | [Codepen](https://codepen.io/Wendy__/pen/BaPyRmg) |
| DIO大人#4776 | [Codepen](https://codepen.io/oscar-2283/pen/gOjbgQL) |
| 艸良#2846 | [Codepen](https://codepen.io/momoninainai/pen/MWBYoWv?editors=1101) |
| 黑白兔#0684 | [Codepen](https://codepen.io/johnny329/pen/KKBwaLe) |
| LinaChen#1796 | [Codepen](https://codepen.io/LinaChen/pen/mdjyRor) |
| 小夜#3809 | [Codepen](https://codepen.io/Naito_K/pen/xxJbqmE?editors=1000) |
| RJRS#9430 | [CodePen](https://codepen.io/RJRS/pen/mdjywBJ) |
| Rena#6249 | [Codepen](https://codepen.io/aureate0116/pen/OJwPgbM) |
| PH#2731 | [Codepen](https://codepen.io/lokf9527/pen/abjzyoe?editors=1010) |
| 米米#1824 | [Codepen](https://codepen.io/Jameshsu0407/pen/QWBwgoQ?editors=1011) |
| JackC#0411 | [CodePen](https://codepen.io/key0329/pen/wvxBeLr) |
| 楊苡安#2752 | [CodePen](https://codepen.io/yi-an-yang/pen/oNMgexb?editors=1111) |
| masterYan#2480 | [CodePen](https://codepen.io/htzwgoqt-the-looper/pen/XWBJagr?editors=1010) |
| RyanC#6960 | [CodePen](https://codepen.io/RyanYD/pen/ZEjYygm?editors=1011) |
| Jill Lee#0809 | [Codepen](https://codepen.io/chi-ling-lee/pen/VwBYzrp?editors=1010) |
| Winnie#1306 | [Codepen](https://codepen.io/WinnieWuWinnie/pen/KKBwvBY?editors=0012) |
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/wvxBgjJ?editors=1011)|
|Yishan#4902|[CodePen](https://codepen.io/gdjrehhw-the-animator/pen/zYLxwRd?editors=1100)|
|ABOOS#6276|[CodePen](https://codepen.io/guhungyin/pen/jOpELoo)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/NWBPvQJ)|
|Cheryl#4007|[Codepen](https://codepen.io/Cheryl-Hsu/pen/YzjPxrZ?editors=0011)|
|Kimi#9564|[CodePen](https://codepen.io/kimihu91/pen/xxzNqzQ)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/bGjNoxN?editors=1011) |
| 泊岸#3466 | [CodePen](https://codepen.io/qoq77416416/pen/NWBPwpd?editors=1011) |
| 出事了阿伯#9923 | [CodePen](https://codepen.io/BradpittLai/pen/jOpEaQY?editors=1011) |
| Ruby Chen#7452 | [CodePen](https://codepen.io/ruby92429/pen/eYjmRMj?editors=1010) |
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/GRBgWWv) |
|阿鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/RwBNQQq?editors=1100)|
|Bella_#1587|[CodePen](https://codepen.io/Chen-Bella/pen/QWBwmmM)|
|小木馬#8760|[CodePen](https://codepen.io/wmmtbcsd/pen/PoBwRxb?editors=1010)|
|yoyo123456#0577|[CodePen](https://codepen.io/hungyoyo/pen/RwBNyJL?editors=0011)|
|Barret#1119|[Codepen](https://codepen.io/barret0720/pen/zYLxjpY?editors=1111)
|How#5806|[Codepen](https://codepen.io/howtobefine/pen/xxJbJrQ?editors=1111)
|xin#1214|[Codepen](https://codepen.io/SiaoYao/pen/poZvZOa)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/KKBwBey)|
|Austyn#0949|[CodePen](https://codepen.io/fish90547/pen/vYaEzxg?editors=1012)|
|Knock59487#9114|[CodePen](https://codepen.io/Zack88/pen/vYaEzex)|
Zack_P#1805|[CodePen](https://codepen.io/tmzazirh-the-animator/pen/dyjPgzm?editors=1011)|
|shiuan#4721|[CodePen](https://codepen.io/prankaChang/pen/GRBgzxP?editors=0011)
|Yuna Huang#2692|[CodePen](https://codepen.io/Yuna1002/pen/jOpEoaE?editors=1111)
|yoyo#1003|[CodePen](https://codepen.io/pen/dyjPBow)
|RainJ#3480|[CodePen](https://codepen.io/RainJCode/pen/zYLxzXb?editors=1010)
|GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922|[CodePen](https://codepen.io/sho666/pen/XWBJLzY)
|Hazel.#6020|[CodePen](https://codepen.io/Hazelhsieh/pen/GRBRoqy?editors=1112)|
|Potatolee#7749|[CodePen](https://codepen.io/potatoleee/pen/KKBpPKj?editors=1011)|
|JY#5712|[CodePen](https://codepen.io/judy_123/pen/gOjboEz)|
|Hironaka#7367|[CodePen](https://codepen.io/Hironaka0815/pen/mdjJyWW?editors=1011)|
|老皮博士#8050|[CodePen](https://codepen.io/li0406/pen/LYBVVEy)|
| azami#5986 |[CodePen](https://codepen.io/azami/pen/dyjoYYQ)|
Bassjim#0118|[CodePen](https://codepen.io/unrtxbaq/pen/LYBVZRg?editors=1111)|
|Judy Wei#6103|[CodePen](https://codepen.io/Judy0718/pen/dyjoWZJ)|
|KC_8685#9343|[Codepen](https://codepen.io/cathy7411/pen/oNMXWmd)|
| yummyniya#7185 | [Codepen](https://codepen.io/yummyniya/pen/MWEXvre) |
|Fannie#7800|[Codepen](https://codepen.io/dgltu/pen/OJwVwxV?editors=1011)|
|Chaya#3412|[Codepen](https://codepen.io/ChiaoJiao/pen/qByOvWP?editors=1111)|
|popcorn_3q#9893|[Codepen](https://codepen.io/arnyrpqt-the-sasster/pen/QWByWMb?editors=1112)|
|enolachen#8031|[Codepen](https://codepen.io/Chen-Enola/pen/rNrayME)|
|JimmyChang#5558|[Codepen](https://codepen.io/JimmyChangWenChi/pen/jOpqEEM)|
|sophiee7015|[codepen](https://codepen.io/sophiee2727/pen/JjBXMya?editors=1011)|
|雞腿#6089|[CodePen](https://codepen.io/C-WEi/pen/vYaLRzv?editors=1010)
|你看我像是會玩嗎#1866|[CodePen](https://codepen.io/hasagg/pen/KKBVjdO?editors=1000)
|阿蘇#8531|[CodePen](https://codepen.io/susu3131/pen/PoBzmVK?editors=0011)|
|kuku#3118|[Codepen](https://codepen.io/mengting-ku/pen/RwBRqeM)|
|IreneY#0086|[CodePen](https://codepen.io/HalfPlannedJourney/pen/xxJOBVw)|
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/ZEjQwQV?editors=1010)
|sherlin#4587|[CodePen](https://codepen.io/sherlinKuo/pen/rNrxQXG?editors=1111)|
|YI#0863|[CodePen](https://codepen.io/YI0305/pen/YzjGoKw?editors=1011)|
|yuling#1634|[codepen](https://codepen.io/igzdflpu/pen/WNKobYb)|
|RBC#7632|[CodePen](https://codepen.io/LinChole/pen/dyjOGaj)|
|阿異#4776|[CodePen](https://codepen.io/yani21399/pen/ExpNpBj)|
|MengLin#3001|[CodePen](https://codepen.io/aacj2642/pen/rNrymOL?editors=1010)|
| YU#0618 | [CodePen](https://codepen.io/yoken_/pen/poZPOoa) |
| Cookie SSS#6991 | [CodePen](https://codepen.io/sqhjikpa-the-selector/pen/GRBvXmJ?editors=1111) |
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/ZEjrXBJ)|
|周周#3503|[CodePen](https://codepen.io/jhoujhou-the-decoder/pen/PoBaxMG?editors=1000)|
|Jujubeleven#1036|[Codepen](https://codepen.io/jujubeleven/pen/GRBYmWW?editors=1001)|
|Eason#7884|[Codepen](https://codepen.io/ASLEO/pen/yLxdmzm)|
Sign in with Wallet
Connect another wallet