---
# System prepended metadata

title: "\U0001F3C5 Day 8 - 函式運用、Bootstrap 格線系統 2"
tags: [Vue 直播班 - 2023 冬季班]

---

---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 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/yen-kg/pen/GRVQYLe)，修改 `...` 的部分，將畫面還原成下方樣式

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



## 回報流程

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

![](https://i.imgur.com/vftL5i0.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/hexschool/pen/LYrBmPO
-->




回報區
---


| Discord          |                                CodePen / 答案                                |
| ---------------- |:----------------------------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/vYPERRy?editors=0010) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/LYaEXKR) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/eYXmQwq?editors=1111) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/qBvEQzN) |
| Emily | [CodePen](https://codepen.io/Emily2089/pen/PoLwXwR?editors=1010) |
| 圈圈 | [CodePen](https://codepen.io/wjejfczn-the-bold/pen/PoLwXqR?editors=0011) |
| Py | [CodePen](https://codepen.io/Wpypy/pen/WNmbLxP?editors=1011) |
| ryan.chou | [CodePen](https://codepen.io/csw8524/pen/JjzowXR) |
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/OJqPaGQ) |
| Leo | [CodePen](https://codepen.io/Aruminiya/pen/Babyvmv) |
| RyanC | [CodePen](https://codepen.io/RyanYD/pen/ZEjYygm?editors=0011) |
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/jOJEXGj?editors=1010) |
| MDFK | [CodePen](https://codepen.io/maywang/pen/GRegPOB?editors=1011) |
| Eden | [Codepen](https://codepen.io/iseden/pen/MWxYZPK) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/KKEwJpz) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/xxBbMGp?editors=1100) |
| PoRay | [CodePen](https://codepen.io/raycheng/pen/OJqPdyK?editors=1011) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/GRegzvV?editors=1011) |
| dora | [CodePen](https://codepen.io/dorayu/pen/wvOBNwV?editors=1011) |
| 貢波波夫 | [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/wvOBNpM) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/YzgPBab) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/ExMardp?editors=1011) |
| FangFang | [CodePen](https://codepen.io/FangFang09/pen/OJqPqZx) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/ExMaMMx?editors=1010) |
| Helen | [CodePen](https://codepen.io/milkteamonster/pen/YzgPMQE?editors=1010) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/ExMaMBa) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/VwRYRpv?editors=1011) |
| Yafan | [CodePen](https://codepen.io/yafanchung/pen/OJqPGJv?editors=1010) |
| Hedy | [CodePen](https://codepen.io/Hedy_H/pen/wvOBZGE?editors=1010) |
| kuanju27 | [CodePen](https://codepen.io/Eero-Chiao/pen/zYbxQvd) |
| Neil | [CodePen](https://codepen.io/Neil1024/pen/NWJPVrq?editors=1011) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/XWGJwgz?editors=1011) |
| Chris | [CodePen](https://codepen.io/cjtseng07/pen/PoLwrOm) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/vYPEqdX?editors=1010) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/gOEbNNX) |
| fanshu0303 | [CodePen](https://codepen.io/JuiHsuanLee0303/pen/VwRYJOP) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/zYbxyqv) |
| ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/yLwyWZP?editors=1111) |
| KUN. | [CodePen](https://codepen.io/barry91205/pen/GRegVmd) |
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/LYaEwzL) |
 | Ariel| [CodePen](https://codepen.io/ariel0510/pen/jOJEgmo) |
 | SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/YzgXKeM?editors=1010) |
  | yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/XWGbrRz?editors=1010) |
  | ChihYang | [CodePen](https://codepen.io/hike1707/pen/XWGbrxq) |
| MikeLin | [CodePen](https://codepen.io/MikeLin0701/pen/abMOoQa) |
| MY | [CodePen](https://codepen.io/ahmomoz/pen/OJqVLwy?editors=1111) |
| Moreene | [CodePen](https://codepen.io/Moreene/pen/JjzdPVw) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/WNmvNaJ) |
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/bGZdEEx) |
| Yuetin | [CodePen](https://codepen.io/Yue9527/pen/BabNjKV) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/QWobyaR?editors=1112) |
| _amaaaa | [CodePen](https://codepen.io/Alicia-Chu/pen/GReJKvb) |
| 依依 | [CodePen](https://codepen.io/Rita-Yang/pen/xxBGORe?editors=1011) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/wvOaGGw) |
| PayRoom |[CodePen](https://codepen.io/water38198/pen/zYbGBdb)|
|Wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/xxBGOoG?editors=1012)|
|yuli|[CodePen](https://codepen.io/qlmjined-the-typescripter/pen/yLwNgJK?editors=1011)|
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/QWobGVG?editors=0011)|
| nini1202desu | [CodePen](https://codepen.io/tvxq5206/pen/MWxwgge?editors=1011) |
|  cbs  |[Codepen](https://codepen.io/wasdjk/pen/GRegzqa?editors=1111)|
|celinelinnn|[CodePen](https://codepen.io/celinephoebe/pen/JjzdyJR)|
| Rock | [CodePen](https://codepen.io/xiu43317/pen/qBvdXwP) |
| 保羅 | [CodePen](https://codepen.io/paul-1997/pen/oNVXExd) |
| jeremyChan | [CodePen](https://codepen.io/nudieisgood/pen/PoLqmWr?editors=1010) |
| Enzo | [CodePen](https://codepen.io/Enzo-Lo/pen/gOEpepa?editors=1111) |
| c8529 | [CodePen](https://codepen.io/claire210401/pen/JjzdpVm?editors=1011) |
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/QWobmVm) |
| Yang | [CodePen](https://codepen.io/Yang-J/pen/LYaVmeW?editors=1000) |
| macihuang | [CodePen](https://codepen.io/macy1215/pen/eYXNLKN) |
| 翔.(ben) | [CodePen](https://codepen.io/energy95272z/pen/NWJqJdj?editors=0011) |
| carrie | [CodePen](https://codepen.io/echocarriet/pen/PoLqgZO)|
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/YzgXmrQ?editors=1111) |
| PoWei#8484 | [CodePen](https://codepen.io/harrison-wei-lai/pen/WNmQQLd) |
| 黃士桓 | [CodePen](https://codepen.io/shr-huan-huang/pen/VwRvjgv) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/JjzYNWr?editors=1111) |
| pingshian | [CodePen](https://codepen.io/pingshian0131/pen/eYXpeZy?editors=1010) |
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/YzgyZKW?editors=1010) |
| Peng | [CodePen](https://codepen.io/H-Peng/pen/oNVjpvX) |
| xuan | [CodePen](https://codepen.io/xuan0915/pen/wvOKPZq?editors=0010) |
| .zack_p | [CodePen](https://codepen.io/Designer-PH/pen/gOEazYm?editors=1010) |
| peggy | [CodePen](https://codepen.io/peggylai/pen/WNmQJwJ?editors=1011) |
| elena | [CodePen](https://codepen.io/elena0127abc/pen/MWxaXdm) |
| haru | [CodePen](https://codepen.io/haru_portfoilo/pen/QWojwRX?editors=1011) |
|　Nielsen | [Codepen](https://codepen.io/nielsen_dch/pen/JjzYVqb)|
| hsuhsusophie | [CodePen](https://codepen.io/hsuhsusophie/pen/JjzGjMw?editors=1011) |
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/LYaGbgQ?editors=1111) |
| Vivian2857 | [CodePen](https://codepen.io/vivian_lin/pen/QWoyxNo?editors=1010) |
| Jason | [CodePen](https://codepen.io/bfnrjakt/pen/rNRxwXq) |
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/QWoyoqK?editors=1011) |
| WEI | [CodePen](https://codepen.io/wei-z/pen/VwRaKPY?editors=1010) |
| skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/RwdaLWg) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/eYXdYed) |
| owen | [CodePen](https://codepen.io/owen-dong/pen/KKEgmxb?editors=0111) |
| hua | [CodePen](https://codepen.io/LHua/pen/vYPXaWR?editors=1011) |
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/jOJymEy) ||
| Aaron | [Codepen](https://codepen.io/Yi-Jing-71080635/pen/vYPERRy?editors=1111) |
| 關關 | [Codepen](https://codepen.io/ashkuan/pen/jOJmYdN) |
| Ting | [CodePen](https://codepen.io/liara/pen/QWoMqQL) |
| WA | [CodePen](https://codepen.io/ldddl/pen/xxBNxjx) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/BaEojjE) |


 <!-- 快速複製
| user | [CodePen]() |

-->

