--- tags: Vue 直播班 - 2022 春季班 --- # 🏅 Day 3 ###### tags: `Vue 直播班 - 2022 春季班` 小教學 --- #### Object.keys(), Object.values() 介紹 * Object.keys() 可以取得指定物件的所有 key 值，並回傳一個陣列。 * Object.values() 可以取得指定物件的所有 value 值，並回傳一個陣列。 ```js= const object1 = { a: "字串", b: 42, c: false }; console.log(Object.keys(object1)); // 結果: ["a", "b", "c"] console.log(Object.values(object1)); // 結果: ["字串", 42, false] ``` 題目 (使用 CodePen 作答) --- 接續 Day2 的每日任務，請同學透過以下物件執行題目要求: 1. 建立一個陣列，其中包含所有的屬性名稱 (需使用 Object.keys)。 2. 建立一個陣列，其中包含所有的屬性值 (需使用 Object.values)。 3. 承接第 1 題，透過 forEach、使用 console.log 輸出陣列的所有屬性名稱。 4. 承接第 2 題，透過 for 迴圈、使用 console.log 輸出陣列的所有屬性值。 迴圈參考: https://wcc723.github.io/javascript/2017/06/29/es6-native-array/ ```js= let obj = { a: 'a', 1: 'b', '這是中文字': 'c', 'b': 'd', '--some data': 'e' } ``` Bootstrap 表單 --- 接續[前一天](https://hackmd.io/ut1-4TCCRsOnalZ1bsr2Rg)，將表單元素整合，試著還原下方圖片（使用 Codepen 作答） ![](https://i.imgur.com/nm4XLOH.png) ```html= <!-- 這裡的說明壞掉了，不知道誰弄的 ＱＱ --> <br> <div class="form-check"> <input class="form-check-input" type="radio" name="sex" id="boy"> <label class="form-check-label" for="boy"> 男孩 </label> </div> ``` 可以參考：[Bootstrap 水平表單](https://bootstrap5.hexschool.com/docs/5.1/forms/layout/#horizontal-form) 回報流程 --- 請同學依照下圖教學觀看解答、回報答案: ![](https://i.imgur.com/QtL8zEW.png) 回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」) ![](https://i.imgur.com/L7kyew8.png) <!-- 解答 // 1 let objKeys = Object.keys(obj); // 2 // 補充: 可以用 sort() 針對陣列內容進行排序 let objValues = Object.values(obj).sort(); // 3 objKeys.forEach((item) => { console.log(item); }) // 4 for (let i = 0; i < objValues.length; i++) { console.log(objValues[i]); } - Bootstrap - https://codepen.io/Bingbingboom/pen/NWvmMbB --> 回報區 --- | 報數 |組別/名字 | codepen / 其他回饋 | | -------- | -------- | -------- | |1| Karen Huang | https://codepen.io/Coding_Snorlax/pen/bGooKYP | |2| 肉鬆 | https://codepen.io/klrkicog/pen/WNZMejg?editors=1011 | |3| Larry | https://codepen.io/larrylinr5/pen/KKXQPNr | |4|Iris Huang|https://codepen.io/ythuang/pen/gOGvYee| |5| POPEYE | https://codepen.io/popeye_ux/pen/dyVdbeW | |6|浩|https://codepen.io/Ahoyyyy/pen/OJxQLpQ?editors=1010 | |7|Jason Chen|https://codepen.io/jason60810/pen/MWEQgPg | |8|Jhen|https://codepen.io/cheng-jhen/pen/mdBXdbK | |9|Laura|https://codepen.io/minminn/pen/xxXYKrZ |10|Pei Ying|https://codepen.io/Pei-Ying/pen/bGoLGbZ?editors=1010| |11|kk|https://codepen.io/potatokaka/pen/mdBXbNK?editors=1111| |12|Arista|https://codepen.io/arista-hsieh/pen/yLzvBmy| |13|Himi|https://codepen.io/Himi/pen/ZEXrEpO| |14|Clara Cai|https://codepen.io/Clara-Snowy/pen/oNGEvqZ| |15|kevinhes|https://codepen.io/kevinhes/pen/rNGJNpm?editors=1000| |16|Terry21|https://codepen.io/feng0409/pen/VwMyVzG | |17|Izumi 泉|https://codepen.io/izumi-dev/pen/Jjrpodm | |18| 黃士桓 | https://codepen.io/shr-huan-huang/pen/qBPxBzJ?editors=1010 | |19| Gill | https://codepen.io/Gill-Chin/pen/wvryvbK?editors=1011 | |20|CloThEs |https://codepen.io/bogwdnxx-the-sans/pen/RwLQwzz| |21|Wenfish|https://codepen.io/wenfisht/pen/XWeZWKp| |22|Henry|https://codepen.io/kaohenry9287/pen/vYedYvP |23|Empty Wu|https://codepen.io/emptywu/pen/WNZMbGp | |24|威爾|https://codepen.io/WILL_Wu/pen/RwLQwOm| |25|Howard|https://codepen.io/yawdnhbm/pen/RwLQwZq| |26|Yunei|https://codepen.io/Yunei/pen/bGoLGmd| |27|andersonshen|https://codepen.io/luxyenni-the-bold/pen/abLqbxG | |28|hua|https://codepen.io/hahahazzz123/pen/YzreKeQ | |29|黑川|https://codepen.io/kurokawa/pen/bGoLdev | |30|Benson|https://codepen.io/soul81624/pen/XWeZJEy | |31|BeanHuang|https://codepen.io/Beanhuang/pen/NWayqjB?editors=1011 | |32|Yof|https://codepen.io/yangyof/pen/GRMyNWQ?editors=1011 | |33|Tim Lin|https://codepen.io/TimmyLin/pen/ExwQjma| |34|Liu|https://codepen.io/feng-chi-liu/pen/GRMQJmM?editors=1111 | |35|Mylène|https://codepen.io/hamajibashi/pen/qBPxdNO| |36|Charlotte Lee|https://codepen.io/charlotte-lee/pen/oNGEgrX?editors=1010| |37|Henry Wu|https://codepen.io/dkcmlaww-the-flexboxer/pen/mdBXeej | |38| 許敏鑫 |https://codepen.io/uilaadhw/pen/gOGvpBz?editors=1112 | |39|Sheep|https://codepen.io/SheepNDW/pen/poWavbr | |40|AllenW|https://codepen.io/AllenW/pen/XWeZWdN | |41|Judy|https://codepen.io/judy86101166/pen/NWayGRQ | |42|yu|https://codepen.io/yuu9916/pen/yLzvOyR?editors=1000 | |43|davidlai|https://codepen.io/supergoldmanster/pen/ExwQydo?editors=1111| |44|Rick Tzeng|https://codepen.io/rick917jp6/pen/poWabOE |45|tingyu|https://codepen.io/dgltu/pen/ZEXrOje?editors=1011 |46|咖咖|https://codepen.io/gon790219/pen/KKXQMJg |47|Erin Huang|https://codepen.io/ErinHuang/pen/bGoLwGp |48| John Lu | https://codepen.io/jiangshuuu/pen/NWaXXWb?editors=1011 | |49|AKI|https://codepen.io/akichen27/pen/YzreGOX | |50|Fleur|https://codepen.io/swwlee/pen/jOGZMjx | |51|Alicia Lo|https://codepen.io/dkcyhyre/pen/NWaybdz| |52|Yummyniya|https://codepen.io/yummyniya/pen/MWEQJya| |53|Jess_Wu|https://codepen.io/jess1104/pen/eYGVvNe?editors=1011 |54|群嘉|https://codepen.io/efzdamnp-the-lessful/pen/xxXYOgL?editors=1111| |55|Evan Chiang|https://codepen.io/piskesocute/pen/OJxQpqp| |56|Steve|https://codepen.io/ycsteve/pen/JjrpJyO?editors=1011| |57|Leo Song|https://codepen.io/sunnylaba/pen/BawYJLj| |58|Calon|https://codepen.io/Calon0118/pen/wvryyOY| |59|Will|https://codepen.io/ncrdpepc-the-lessful/pen/ZEXrEMK?editors=1012| |60|Meng| https://codepen.io/MGHN/pen/qBPxoVp?editors=0012 | |61|Kei| https://codepen.io/Keeeei/pen/RwLQyOa | |62|shio| https://codepen.io/shioyen/pen/dyVdjwq | |63|有廖先生(rain)| https://codepen.io/billpop741/pen/xxXYQEq | |64|柴貓| https://codepen.io/shibacat/pen/oNGEmjX | |65|Vicky|https://codepen.io/hyxfish27/pen/PoJQrLv | |66|Ron|https://codepen.io/long-sian-liang/pen/JjrLGdv| |67|Abbie|https://codepen.io/Abbie0704/pen/PoJRZZY| |68|ShaoYu|https://codepen.io/shaoyukao/pen/bGovgbm| |69|FuChang|https://codepen.io/fuchang830714/pen/qBPoRrm| |70|陳暐中|https://codepen.io/wei-z/pen/WNZzpxw?editors=1011| |71|聿凌|https://codepen.io/igzdflpu/pen/xxXWLPa?editors=1011| |72|Bonnie|https://codepen.io/bonnieli1414/pen/qBPoQzp?editors=1011| |73|我是泇吟|https://codepen.io/kljuqbxs/pen/JjrLqqY| |74|Gui|https://codepen.io/guitimliu/pen/yLzKmoM |75|Jerry|https://codepen.io/rteyfwwd-the-scripter/pen/PoJeYbb?editors=1111 |76|Zhang|https://codepen.io/Zhangbun/pen/QWqmXwJ| |77|Otis|https://codepen.io/humming74/pen/WNZJNdW?editors=1010| |78|Jordan|https://codepen.io/jordan-ttc-design/pen/yLzjOgj| |79|Elaine Liu|https://codepen.io/elaine7598/pen/dyVeprL?editors=1010| |80|Aaron Tu|https://codepen.io/aarontu/pen/yLzjzBz| |81|peter.chen1024|https://codepen.io/JIAN-RONG/pen/VwMxXwK?editors=1011| |82|Alvin|https://codepen.io/Alvin20201116/pen/JjrvmXx?editors=1001| |83|Steven Chan|https://codepen.io/Steven1220/pen/YzrLBEP?editors=1011| |84|DDDDK|https://codepen.io/dkklee/pen/ExwRPPW| |85|Judy ☻|https://codepen.io/hsiaohan/pen/eYGKJmZ | |86|Hedy|https://codepen.io/hhhsuan41/pen/VwMdVQP | |87|Yuan|https://codepen.io/yuanluo13542/pen/rNGKPJK?editors=1010 | |88|5/周周|https://codepen.io/jhoujhou-the-decoder/pen/LYzrwyz |89|Yashien Lin|https://codepen.io/YashienLin/pen/JjrBypJ?editors=1000 |90|Jasper|https://codepen.io/li-jasper/pen/LYzBbNJ |91|Kelvin Hsu|https://codepen.io/kelvin001/pen/NWaBJQB | |92|阿武|https://codepen.io/samwnkyat/pen/abLjXrQ |93|dOvOb|https://codepen.io/gezzgrwj-the-styleful/pen/wvrEwGw| |94|Sihle Huang|https://codepen.io/bugbug777/pen/xxXagvG| |95|Scottie|https://codepen.io/wow767t/pen/qBPyWVL| |96|Anna|https://codepen.io/kycrleao/pen/xxXadey?editors=1010| |97|Riley|https://codepen.io/jjpxbprd/pen/bGoxQeg| |98|Dobe|https://codepen.io/lisebee/pen/31b32530e61e97dbcf15df523fbd864e?editors=1010| |99|王老明|https://codepen.io/adonismis/pen/oNGawxm?editors=1011| |100|YC|https://codepen.io/YCLu/pen/LYzXpzq | |102|Jie|https://codepen.io/qgqonost-the-flexboxer/pen/wvrQJEm?editors=1011| |103|mei|https://codepen.io/Shila-Chen/pen/xxXQWzy| |104|mei|https://codepen.io/CodingTrain_1/pen/zYEMZyY| |105|danny123|https://codepen.io/binlandz123/pen/rNGoxXX?editors=1000| |106|PeiChi|https://codepen.io/pei-chi-tsai/pen/jOGXBPL?editors=0011| |107|安志|https://codepen.io/lwmtsgek/pen/yLzZVBR?editors=0011| |108|Jerry Yen|https://codepen.io/JerryYen/pen/bGozPpz | |109|Sean Chang|https://codepen.io/seanchang7/pen/abLMVQy?editors=1011| |110|Carol Li|https://codepen.io/carolli834/pen/vYePrvx?editors=1010| |110|肉桂卷|https://codepen.io/ginnlee/pen/LYzaBby?editors=1011| |110|andyii|https://codepen.io/gultrotpybyvue/pen/NWaZPPo| |111|阿劍| https://codepen.io/seonkuraito/pen/ZEXwWZG | |112|manson許|https://codepen.io/oupbzfxq-the-scripter/pen/gOGVNNW?editors=1011| |113|2/WA|https://codepen.io/ldddl/pen/xxPKOrM| |114|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/xxPxNPg?editors=1001| |115|Van|https://codepen.io/fbacojji-the-selector/pen/NWaEwep| |116|Bruno Yu|https://codepen.io/bruno-yu/pen/mdpNxoy?editors=1011|