---
# System prepended metadata

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

---

# 🏅 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/rNXvPWE?editors=1010)，修改 `...` 的部分，將畫面還原成下方樣式

- 電腦版時（lg）
  ![](https://i.imgur.com/J6fLW9p.png)
- 平板時（md）
  ![](https://i.imgur.com/8bo52aB.png)
- 手機版時
  ![](https://i.imgur.com/f5ekBgS.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/yen-kg/pen/GRVQYae
-->

| 名字         | 連結                                                                             |
| ------------ | -------------------------------------------------------------------------------- |
| Sherry       | [CodePen](https://codepen.io/twvyqojd-the-typescripter/pen/dPXyzZP?editors=1010) |
| Zem          | [CodePen](https://codepen.io/twvyqojd-the-typescripter/pen/dPXyzZP)              |
| 7Red         | [CodePen](https://codepen.io/cch2655/pen/PwzoKOW)                                |
| Rudy         | [CodePen](https://codepen.io/Rudy-crw/pen/qENBXQE?editors=1001)                  |
| Eileen       | [CodePen](https://codepen.io/Eileen-io/pen/raLNzZR)                              |
| cks40660     | [CodePen](https://codepen.io/CKS40660/pen/OPXJjaj)                               |
| Melanie      | [CodePen](https://codepen.io/pnrcspte-the-animator/pen/gbMOxoL)                  |
| Tetsu        | [CodePen](https://codepen.io/ttgchang/pen/gbMOxZW)                               |
| 老屠         | [CodePen](https://codepen.io/fsgfxvlb-the-selector/pen/xbOxXGw?editors=1011)     |
| Nooooora     | [CodePen](https://codepen.io/Nora-Ch/pen/myEdBRq)                                |
| 地瓜         | [CodePen](https://codepen.io/ChippyYU/pen/ZYOEJaM?editors=1111)                  |
| Marco        | [CodePen](https://codepen.io/MarcoChiu/pen/RNRwLaZ)                              |
| Chia         | [Codepen](https://codepen.io/Chia-the-encoder/pen/yyJLoGR)                       |
| Owen He      | [Codepen](https://codepen.io/owen1120/pen/ZYOEawa?editors=0011)                  |
| tanuki       | [Codepen](https://codepen.io/tanuki320/pen/zxBYpZM?editors=0011)                 |
| Naojun       | [Codepen](https://codepen.io/NAOJUN/pen/ogLNoEa)                                 |
| Rogan        | [Codepen](https://codepen.io/RoganHsu/pen/ogvNyPm?editors=1111)                  |
| 社子畢卡索   | [Codepen](https://codepen.io/pen?template=NPrWypO)                               |
| Percy        | [Codepen](https://codepen.io/Percy-Ku/pen/wBWvmVW)                               |
| 7lun         | [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/QwEWrKM)                      |
| 星雪糖       | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/ogLNdGv?editors=1011)     |
| Wafa         | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/qENBoKy?editors=1010)      |
| 小懿         | [Codepen](https://codepen.io/YT-the-vuer/pen/jErOxma?editors=0010)               |
| FangFang     | [Codepen](https://codepen.io/Fang-the-selector/pen/pvboVxZ?editors=1011)         |
| cindy        | [Codepen](https://codepen.io/a50134/pen/raLNKza?editors=0011)                    |
| andy         | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/wBWvmpB?editors=1011)     |
| 登登登       | [Codepen](https://codepen.io/Duncanin/pen/NPrWLvg?editors=1100)                  |
| wind         | [Codepen](https://codepen.io/wind7y/pen/RNRweMx)                                 |
| Vergil       | [CodePen](https://codepen.io/aglgvsie/pen/gbMOBZj)                               |
| 平平         | [CodePen](https://codepen.io/ypinpin/pen/qENBzVo)                                |
| An           | [CodePen](https://codepen.io/bzrpsbjq-the-encoder/pen/OPXJeqP?editors=1011)      |
| JiaMori      | [CodePen](https://codepen.io/jiamori/pen/NPrWorB?editors=1111)                   |
| Tippy        | [CodePen](https://codepen.io/Ektodor-Wang/pen/bNeNpGa)                           |
| KOMATSU PEI  | [CodePen](https://codepen.io/Komatsu2021/pen/GgqRQoM?editors=1011)               |
| Eric         | [Codepen](https://codepen.io/wc-su/pen/YPWPqaQ)                                  |
| 叮咚         | [Codepen](https://codepen.io/pinchieh-lin/pen/bNeNpjm)                           |
| RyanC        | [Codepen](https://codepen.io/RyanYD/pen/QwEwKmq)                                 |
| Leonard      | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/dPXPOjW)                      |
| kashiwatei   | [Codepen](https://codepen.io/kashiwatei/pen/gbMbvNK?editors=1011)                |
| 舜仁         | [Codepen](https://codepen.io/shunjen/pen/yyJydBm)                                |
| ZoeKang      | [Codepen](https://codepen.io/byehywmx-the-animator/pen/Eayaqbe)                  |
| Jin          | [Codepen](https://codepen.io/Jin-L/pen/GgqJRRx)                                  |
| 主委加碼啦幹 | [Codepen](https://codepen.io/popbob-the-bashful/pen/vEKOONG)                     |
| Miikaa       | [Codepen](https://codepen.io/Miikaa/pen/WbxQeaJ)                                 |
| nonwa_jeff   | [codepen](https://codepen.io/nonwaaa/pen/MYeameV)                                |
| Michelle     | [codepen](https://codepen.io/bastar_dize/pen/LEZVmoo?editors=1011)               |
| 小趴         | [Codpen](https://codepen.io/papa2415/pen/XJKmqpg)                                |
| 伊迪         | [Codepen](https://codepen.io/sorryFish/pen/raLOoLj)                              | 
| 蛋白         | [Codepen](https://codepen.io/sjlu-0/pen/vEKLzQv?editors=1010)                              | 
| 冠翔         | [Codepen](https://codepen.io/hsrfcdrx-the-bold/pen/WbxQJGb) 
| CharisLai         | [Codepen](https://codepen.io/charislai/pen/PwzqwPY)|
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/Pwzpxyv?editors=1010)|
|Wen| [Codepen](https://codepen.io/hsiao-kevin/pen/GgqvOZm?editors=1010)|