---
# System prepended metadata

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

---

---
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）
  ![](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 / 答案                                |
| ---------------- |:----------------------------------------------------------------------------:|
|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)|