--- 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]() | -->