---
tags: React 直播班 - 2024 冬季班
---
# 🏅 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）
- 平板時（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/yen-kg/pen/GRVQYae
-->
回報區
---
| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| Sonia | [CodePen](https://codepen.io/YUJOU/pen/NPKgMez?editors=1011) |
| 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/pvzwKGj) |
| tim| [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/pvzwKGj?editors=1010) |
| 泊岸 | [CodePen](https://codepen.io/qoq77416416/pen/RNbgJEY?editors=1011) |
|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/ByBZPag?editors=1011)|
| 4chan | [CodePen](https://codepen.io/ijuolaqc-the-looper/pen/JoPJZgM) |
| Jasmine Lin | [CodePen](https://codepen.io/Jasmine-Lin-the-vuer/pen/PwYjBPv) |
| Toung | [CodePen](https://codepen.io/Toung/pen/jENwKXO) |
| Tstsu | [CodePen](https://codepen.io/chindesu0207/pen/ByBZPpa) |
| Satar | [CodePen](https://codepen.io/SatarKuo/pen/wBwexgB?editors=1011) |
| Nocab | [CodePen](https://codepen.io/PeihanWang/pen/VYZWBMg?editors=1111) |
| Aaron 謝宗佑 | [CodePen](https://codepen.io/aaron-hsieh/pen/ByBZPEz) |
| ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/bNbRjWV?editors=1011)|
| 蘑菇星星 | [Codepen](https://codepen.io/brrrieon-the-vuer/pen/yyBXXNV?editors=1011)|
| Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/azowjMR) |
| shiou | [CodePen](https://codepen.io/shiou-ho/pen/JoPJBop?editors=1011) |
| Clove_墨 | [CodePen](https://codesandbox.io/p/sandbox/x5lthz) |
|ollie|[CodePen](https://codepen.io/daiyy97/pen/JoPJaVY?editors=1001)|
|爆漿|[CodePen](https://codepen.io/nvdwwlbx-the-vuer/pen/XJrgxWW?editors=1111)|
| 蕾蕾 leilei | [CodePen](https://codepen.io/Leileisme/pen/mybwzPp?editors=1111) |
| Rochel | [CodePen](https://codepen.io/rochelwang1205/pen/jENwewo) |
| Yen | [CodePen](https://codepen.io/yuxxxlouyen/pen/raBwqwO) |
| Kaya | [CodePen](https://codepen.io/kayaribi/pen/wBweRGJ) |
| yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/GgKEPEN) |
| Amanda | [CodePen](https://codepen.io/cym199922/pen/GgKEPwE) |
| Rothy | [CodePen](https://codepen.io/ChloeHsu1/pen/yyBXZbm) |
| Tammy | [CodePen](https://codepen.io/Tammy_Tsai/pen/QwLgYmX) |
| Claire | [CodePen](https://codepen.io/claire-chang-the-bashful/pen/azowgyY) |
|邵|[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/bNbRPyB?editors=1012)|
|Rogan|[CodePen](https://codepen.io/RoganHsu/pen/EaYXrdZ?editors=1010)|
| andy | [CodePen](https://codepen.io/andygggg/pen/xbKLGLE?editors=1111) |
| LinaChen | [CodePen](https://codepen.io/LinaChen/pen/MYgvpbV) |
| mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/VYZzPER) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/EaYvQOg?editors=1112) |
| 阿佑 | [CodePen](https://codepen.io/ans9323052/pen/qEWXxMr) |
|a1phaki(小k)|[codepen](https://codepen.io/a1phaki/pen/emOEjwy?editors=1011)|
|Johnson|[codepen](https://codepen.io/crpbugqy-the-typescripter/pen/bNbryMm)|
|嚼勁先生|[codepen](https://codepen.io/James520284/pen/emOEqRK)|
|Jun|[codepen](https://codepen.io/jun12079/pen/azoLyMx)|
|Glen_69515|[Codepen](https://codepen.io/glenyaochih/pen/PwYJxBg?editors=1011)|
| Cami | [CodePen](https://codepen.io/irisLife/pen/wBwpaWJ)|
| Mike | [CodePen](https://codepen.io/mike2049/pen/azoYWvq?editors=1011) |
| Joannehu | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/ByBVPyy?editors=1011) |
| yun-lin | [CodePen](https://codepen.io/yunlinhsu/pen/WbeYbvr) |
| .ztion | [CodePen](https://codepen.io/ztion/pen/PwYLyvN?editors=1011) |
| chris | [CodePen](https://codepen.io/chris-chen-the-selector/pen/YPKbVgB?editors=1010) |
| yaoling.liang | [CodePen](https://codepen.io/Yao-Ling-L-/pen/raNewVJ?editors=1012) |
| Jim | [CodePen](https://codepen.io/JimChou/pen/ogNxpWL?editors=1101) |
| KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/wBvdgOQ?editors=1011) |
| 姜承 | [CodePen](https://codepen.io/Troy0718/pen/bNGKemO?editors=1012) |
| Chuang | [CodePen](https://codepen.io/uidoytjq-the-solid/pen/jEOoXOj?editors=1011) |
| jinliu214 | [CodePen](https://codepen.io/jinliu214/pen/LEEdZqw?editors=0010) |
<!-- 快速複製
| user | [CodePen]() |
-->
Sign in with Wallet
Connect another wallet