--- tags: Vue 直播班 - 2022 春季班 --- # 🏅 Day 8 ###### tags: `Vue 直播班 - 2022 春季班` 題目 (使用 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 響應式格線系統 --- 接續前一天[格線系統](https://hackmd.io/DoER0__AQN2eK5G1r7xqsQ#Bootstrap-%E6%A0%BC%E7%B7%9A%E7%B3%BB%E7%B5%B1)，可以嘗試加入斷點，讓網格可以響應式，隨著斷點改變排版 利用此 [Codepen](https://codepen.io/Bingbingboom/pen/ExvJOEr?editors=1010)，修改 `...` 的部分，將畫面還原成下方樣式 - 電腦版時（lg） ![](https://i.imgur.com/J6fLW9p.png) - 平板時（md） ![](https://i.imgur.com/8bo52aB.png) - 手機版時 ![](https://i.imgur.com/f5ekBgS.png) 回報流程 --- 請同學依照下圖教學觀看解答、回報答案: ![](https://i.imgur.com/QtL8zEW.png) 回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」) ![](https://i.imgur.com/L7kyew8.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/Bingbingboom/pen/ZEJZmKo --> 回報區 --- | 報數 | 組別/名字 | codepen / 其他回饋 | | --- | -------- | -------- | |1| 肉鬆 | https://codepen.io/klrkicog/pen/zYEaxrN?editors=1011 | |2|Evab Chiang|https://codepen.io/piskesocute/pen/dyVKPYd| |3| Iris Huang | https://codepen.io/ythuang/pen/poWKvyJ | |4|Aaron Tu|https://codepen.io/aarontu/pen/mdBKyOz| |5| Larry | https://codepen.io/larrylinr5/pen/oNGygxp | |6| Karen Huang| https://codepen.io/Coding_Snorlax/pen/jOGKEqO?editors=1012 | |7|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/rNGKaYm| |8| Yof | https://codepen.io/yangyof/pen/WNZzBKJ?editors=1111| |9| Jhen | https://codepen.io/cheng-jhen/pen/NWazPMq | |10|kevinhes|https://codepen.io/kevinhes/pen/MWEXwgv| |11|Laura|https://codepen.io/minminn/pen/WNZybBx| |12|Himi|https://codepen.io/Himi/pen/ExwRaJE| |13| POPEYE |https://codepen.io/popeye_ux/pen/jOGKEQr | |14| 黃士桓 | https://codepen.io/shr-huan-huang/pen/QWqxbEp?editors=1010 | |15| Yunei | https://codepen.io/Yunei/pen/BawVyqa | |16| Liu | https://codepen.io/feng-chi-liu/pen/poWKJNW?editors=1111 | |17| 許敏鑫 | https://codepen.io/MIN-HSIN/pen/dyVKoNB | |18|Elaine Liu|https://codepen.io/elaine7598/pen/PoJaqGZ?editors=1010| |19|andersonshen| https://codepen.io/luxyenni-the-bold/pen/GRMGJXj | |20|Gill| https://codepen.io/Gill-Chin/pen/VwMdLdY?editors=1111 | |21|浩|https://codepen.io/Ahoyyyy/pen/ExwRjpM?editors=1010| |22|Terry21|https://codepen.io/feng0409/pen/poWKJMO?editors=1112 | |23|AllenW|https://codepen.io/AllenW/pen/QWqxbXm | |24|Empty Wu|https://codepen.io/emptywu/pen/poWKjeG | |25|威爾|https://codepen.io/WILL_Wu/pen/poWKjdY| |26|yu|https://codepen.io/yuu9916/pen/YzrvyaQ?editors=1001| |27|Howard|https://codepen.io/yawdnhbm/pen/oNGyXQN| |28|Bella Shya|https://codepen.io/BellaXie/pen/gOGKaZK | |29|Tim Lin|https://codepen.io/TimmyLin/pen/OJxEyKa| |30|我是泇吟|https://codepen.io/kljuqbxs/pen/MWEXKby| |31|Sheep| https://codepen.io/SheepNDW/pen/NWazGzE | |32|Henry Wu| https://codepen.io/dkcmlaww-the-flexboxer/pen/xxXzVpB | |33|Mylène|https://codepen.io/hamajibashi/pen/NWazxeG| |34|Charlotte Lee|https://codepen.io/charlotte-lee/pen/PoJaZBr?editors=1010| |35|有廖先生(Rain)|https://codepen.io/billpop741/pen/qBPKNRb| |36|陳暐中|https://codepen.io/wei-z/pen/ZEXROyN?editors=1010| |37|Judy ☻|https://codepen.io/hsiaohan/pen/MWEXeeL?editors=1100 | |38|Beanhuang|https://codepen.io/Beanhuang/pen/BawVyOa?editors=1011 | |39|Arista|https://codepen.io/arista-hsieh/pen/oNGyzPM | |40|Fleur|https://codepen.io/swwlee/pen/oNGyYYO | |41|群嘉|https://codepen.io/efzdamnp-the-lessful/pen/poWKEZE?editors=1111| |42| Meng | https://codepen.io/MGHN/pen/wvrXojJ?editors=0011 | |43| tingyu | https://codepen.io/dgltu/pen/VwMdYmx | |44| Otis | https://codepen.io/humming74/pen/qBPKRxN?editors=1011 | |45| shio | https://codepen.io/shioyen/pen/bGoKqjG?editors=1010| |46| Bonnie | https://codepen.io/bonnieli1414/pen/RwLJpKY?editors=1011 | |47| 咖咖 | https://codepen.io/gon790219/pen/gOGKmQN | |48|Wenfish|https://codepen.io/wenfisht/pen/rNGKypy| |49|Rick Tzeng|https://codepen.io/rick917jp6/pen/QWqxvLK | |51|JohnLu|https://codepen.io/jiangshuuu/pen/NWaXXWb?editors=1111 |52|hua|https://codepen.io/hahahazzz123/pen/ZEXRKoR?editors=1111 |53|Gui|https://codepen.io/guitimliu/pen/MWEXvYY |54|Benson|https://codepen.io/soul81624/pen/gOGKxpd | |55|Yummyniya|https://codepen.io/yummyniya/pen/MWEXvre | |56|Calon|https://codepen.io/Calon0118/pen/oNGyGNQ| |57|柴貓|https://codepen.io/shibacat/pen/VwMdMWJ| |58|阿牛|https://codepen.io/a-hsien-wu/pen/rNGKGKZ| |59|Leo Song|https://codepen.io/sunnylaba/pen/KKXexOg?editors=1010 | |60|AKI|https://codepen.io/akichen27/pen/xxXzyVJ| |61|Steven Chan|https://codepen.io/Steven1220/pen/zYEaJeE?editors=1011 | |62|Alvin|https://codepen.io/Alvin20201116/pen/oNGymLJ?editors=1111| |63|DDDDK|https://codepen.io/dkklee/pen/GRMGPyw| |64|Yuan|https://codepen.io/yuanluo13542/pen/gOGKymB?editors=1010| |65|Vicky|https://codepen.io/hyxfish27/pen/NWaBKqx | |66|Steve|https://codepen.io/ycsteve/pen/NWaBbbN?editors=1011 | |67|kk|https://codepen.io/potatokaka/pen/gOGjmmj?editors=0011| |68|Jerry|https://codepen.io/rteyfwwd-the-scripter/pen/WNZKjWO | |69|peter.chen1024|https://codepen.io/JIAN-RONG/pen/yLzqzoX?editors=1011 | |70|Ron|https://codepen.io/long-sian-liang/pen/ExwpRgo | | 71 | Sihle Huang | https://codepen.io/bugbug777/pen/XWePgvv | | 72| Erin Huang | https://codepen.io/ErinHuang/pen/wvrEqyQ | |73|Scottie|https://codepen.io/wow767t/pen/dyVqJWv?editors=1111| |74|dOvOb|https://codepen.io/gezzgrwj-the-styleful/pen/gOGdGmy |75|Jasper|https://codepen.io/li-jasper/pen/mdBzybR |76|阿武|https://codepen.io/samwnkyat/pen/bGomqEL?editors=1111 |77|Abbie|https://codepen.io/Abbie0704/pen/yLzRXgz | |78|Jess_Wu|https://codepen.io/jess1104/pen/NWaOEKx?editors=1011 | |79|YC|https://codepen.io/YCLu/pen/zYEMBdj | |80|Henry|https://codepen.io/kaohenry9287/pen/oNGQzyL | |81|Hedy|https://codepen.io/hhhsuan41/pen/yLzQEGe?editors=1012 | |82|ShaoYu|https://codepen.io/shaoyukao/pen/yLzQmPx| |83|William_O^2|https://codepen.io/CodingTrain_1/pen/BawvByx| |84|Anna|https://codepen.io/kycrleao/pen/zYEyKbg?editors=0010| |85|FuChang|https://codepen.io/fuchang830714/pen/JjraGJb| |86|Jason Chen|https://codepen.io/jason60810/pen/rNGPLRG | |87|mei|https://codepen.io/Shila-Chen/pen/gOGZVzw | |88|Jordan|https://codepen.io/jordan-ttc-design/pen/wvrNbdp?editors=1111 | |89|Riley|https://codepen.io/jjpxbprd/pen/dyVrvjE| |90|Jerry Yen|https://codepen.io/JerryYen/pen/GRMeQbO| |91|安志|https://codepen.io/lwmtsgek/pen/MWERQpG?editors=1111| |92|肉桂卷|https://codepen.io/ginnlee/pen/poWBXKX?editors=1111| |93|阿劍| https://codepen.io/seonkuraito/pen/GRMzZLG | |94|Sean Chang|https://codepen.io/seanchang7/pen/yLzWyyN?editors=1010| |95|2/WA|https://codepen.io/ldddl/pen/ExbxVYo| |96|andyii|https://codepen.io/gultrotpybyvue/pen/GRORYZx | |97|Carol Li|https://codepen.io/carolli834/pen/MWEMrxe?editors=1111| |98|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/dyZPQRj?editors=1010 |99|Van|https://codepen.io/fbacojji-the-selector/pen/ExbRdJy?editors=1111 |