--- tags: Vue 直播班 - 2022 冬季班 --- # 🏅 Day 3 - 物件觀念、Bootstrap 表單 2 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] ``` ### 題目 接續 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 表單 --- 接續前一天，將表單元素整合，試著還原下方圖片（使用 Codepen 作答） ![](https://i.imgur.com/nm4XLOH.png) ```htmlembedded= <!-- 舉例 --> <div class="row mb-3"> <label for="city" class="col-sm-2 col-form-label">城市</label> <div class="col-sm-10"> <select class="form-select" aria-label="Select city"> <option value="" selected disabled>請選擇你的居住城市</option> <option value="高雄">高雄市</option> <option value="台南">台南市</option> <option value="台北">台北市</option> </select> </div> </div> ``` 可以參考：[Bootstrap 水平表單](https://bootstrap5.hexschool.com/docs/5.1/forms/layout/#horizontal-form) ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.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/hexschool/pen/YzvjePm --> 回報區 --- | Discord | CodePen / 答案 | |:----------:|:-------------------------------------------------------:| |Aaron Shih#3879 |[codepen](https://codepen.io/aaron00366/pen/NWzZZOo?editors=1111)| | k kill9ker#8028 | [CodePen](https://codepen.io/kill9ker/pen/zYaVape) | | Judy Wei#6103 | [CodePen](https://codepen.io/Judy0718/pen/jOKjmMa) | | hannahTW#2224 | [CodePen](https://codepen.io/hangineer/pen/xxzoYGm?editors=1101) | | WeiJ#7376 | [CodePen](https://codepen.io/weij0/pen/poKXajd) | | Wendy#5615 | [CodePen](https://codepen.io/wendy03/pen/poKXaJW) | | 威0#6919 | [CodePen](https://codepen.io/n0918679182/pen/zYaVRrJ?editors=0012) | | YC#2522 | [CodePen](https://codepen.io/YCLu/pen/JjZqKZr) | | yuyu#6310 | [CodePen](https://codepen.io/yuyu0905/pen/GRGbQqo?editors=1011) | | PeihanWang#2530 | [CodePen](https://codepen.io/PeihanWang/pen/ExRBQVd?editors=1011) | | Kimi#9564 | [CodePen](https://codepen.io/kimihu91/pen/xxzNqzQ) | | 薯餅#3581 | [CodePen](https://codepen.io/ColdingPoTaTo/pen/WNyqMrj) | | 阿榮#8277 | [CodePen](https://codepen.io/mogzbvfl-the-reactor/pen/PoarQzz) | | AuroraC#6539 | [CodePen](https://codepen.io/AuroraC/pen/WNyqMGO?editors=1010) | | 冬天#5215 | [CodePen](https://codepen.io/winter_/pen/zYaVRjb) | | kenki100#0068 | [CodePen](https://codepen.io/ken100/pen/eYKwVGP) | | albee#9121 | [CodePen](https://codepen.io/albee-chang/pen/oNyrEev?editors=1111) | | JackC#0411 | [CodePen](https://codepen.io/key0329/pen/oNyRVdo) | | Fang#4680 | [CodePen](https://codepen.io/std95174/pen/wvXLyYr) | | JY#5712 | [CodePen](https://codepen.io/judy_123/pen/YzvoeZP) | | LHchien33#6232 | [CodePen](https://codepen.io/lin_chien/pen/MWXMQPz) | | jimmyFang#9575 | [CodePen](https://codepen.io/pohxiqqo/pen/abKgYNO?editors=1011) | | Benson#6763 | [CodePen](https://codepen.io/kumashow/pen/yLEdvwQ) | | RyanC#6960 | [CodePen](https://codepen.io/RyanYD/pen/WNyqMRE) | | mandylai#4055 | [CodePen](https://codepen.io/mandy-lai-2/pen/xxzoYBx?editors=0011) | | 大頭#8116 | [CodePen](https://codepen.io/d22495521/pen/LYrKdVN?editors=1011) | | 黑白兔#0684 | [CodePen](https://codepen.io/johnny329/pen/BaVgYOd) | | PH#2731 | [CodePen](https://codepen.io/lokf9527/pen/VwdONWq) | | yaru#6308 | [CodePen](https://codepen.io/lszaietc/pen/QWxXmxP?editors=1011) | | Cheryl#4007 | [CodePen](https://codepen.io/Cheryl-Hsu/pen/BaVgrdP) | | 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/dyKBmEJ) | | MotoRin#2616 | [CodePen](https://codepen.io/sakimoto/pen/zYaVWYO?editors=1011) | | ㄚ翔#8126 | [CodePen](https://codepen.io/engineerjohnson/pen/JjZQLMb) | | int#7518 | [CodePen](https://codepen.io/intHuang/pen/BaVgrmO?editors=1011) | | Ron Liang#7277 | [CodePen](https://codepen.io/ron-go/pen/PoarRQa) | | bakiii | [CodePen](https://codepen.io/aki168/pen/abKgGEq) | | Potatolee#7749 | [CodePen](https://codepen.io/potatoleee/pen/jOKjKqL?editors=1101) | | jacky010080#0880 | [CodePen](https://codepen.io/Yen-Jung-Chen/pen/oNyrdLd?editors=1010) | | LinaChen#1796 | [CodePen](https://codepen.io/LinaChen/pen/MWXMVqY) | | RJRS#9430 | [CodePen](https://codepen.io/RJRS/pen/qBKzKNw) | | Eileen#6454 | [CodePen](https://codepen.io/Eileen-io/pen/LYrKmKq) | | Yiru#0236 | [Codepen](https://codepen.io/yiru94/pen/xxzojLY?editors=1011) | | Rena#6249 | [Codepen](https://codepen.io/aureate0116/pen/MWXMXvX) | | Jill Lee#0809 | [Codepen](https://codepen.io/chi-ling-lee/pen/oNyryGv?editors=1011) | | masterYan#2480 | [Codepen](https://codepen.io/htzwgoqt-the-looper/pen/MWXMGrp?editors=1111) | | 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/OJEeEZm?editors=1010) | | Knock59487#9114 | [CodePen](https://codepen.io/Zack88/pen/mdKZKXE?editors=1111) | | IreneY#0086 | [CodePen](https://codepen.io/HalfPlannedJourney/pen/dyKBKjo) | | 大衛#4869 | [CodePen](https://codepen.io/exnsrpjc/pen/JjZQZNV?editors=1111) | | Alex#9978 | [CodePen](https://codepen.io/datsxzqg-the-selector/pen/xxzoWpE?editors=1011) | | 楊苡安#2752 | [CodePen](https://codepen.io/yi-an-yang/pen/VwdJxxq?editors=1111) | | Paul#7426 | [CodePen](https://codepen.io/paul-1997/pen/JjZQapv?editors=1111) | | Sean#3825 | [CodePen](https://codepen.io/sean_1215/pen/YzvoJPm?editors=1011) | | 小夜#3809 | [CodePen](https://codepen.io/Naito_K/pen/oNyrqRo?editors=1000) | | RainLiao#2616 | [CodePen](https://codepen.io/billpop741/pen/RwJzYxd) | | 阿沁#8176 | [CodePen](https://codepen.io/a8322342/pen/ExRBdje) | | Fannie#7800 | [Codepen](https://codepen.io/dgltu/pen/zYaVyON?editors=1000) | | 小木馬#8760 | [Codepen](https://codepen.io/wmmtbcsd/pen/gOKNZjV) | | 魚子醬#5220 | [Codepen](https://codepen.io/haihsuan/pen/BaVgvab) | | 圈圈#4060 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/GRGbQjo?editors=1010) | | Barret#1119 | [codepen](https://codepen.io/barret0720/pen/xxzommz?editors=0011) | | SASIMI#5099 | [Codepen](https://codepen.io/sashimi1327/pen/abKgPEE) | | Tunafin#5340 | [Codepen](https://codepen.io/tunafin/pen/gOKNqwP) | | 小天#7177 | [Codepen](https://codepen.io/linyujing/pen/VwdJgwO?editors=1111) | | Hironaka#7367 | [Codepen](https://codepen.io/Hironaka0815/pen/vYrqPeJ) | | JimmyChang#5558 | [Codepen](https://codepen.io/JimmyChangWenChi/pen/jOKjdRK?editors=1000) | | Bella_#1587 | [CodePen](https://codepen.io/Chen-Bella/pen/oNyrJJQ) | | azami#5986 | [CodePen](https://codepen.io/azami/pen/QWxXYBQ) | | danny123 | [CodePen](https://codepen.io/binlandz123/pen/KKejYqV?editors=1010) | | Austyn#0949|[CodePen](https://codepen.io/fish90547/pen/ExRBzPe?editors=1111)| |yoyo123456#0577|[CodePen](https://codepen.io/hungyoyo/pen/jOKjRWE?editors=0011)| |布魯諾#7239|[CodePen](https://codepen.io/bruno-yu/pen/gOKNyVb?editors=1111)| |無名#6427|[CodePen](https://codepen.io/Nomoney/pen/PoavJzp)| |DIO大人#4776|[CodePen](https://codepen.io/oscar-2283/pen/Yzvobvy)| |xin#1214|[CodePen](https://codepen.io/SiaoYao/pen/gOKNJyW)| |泊岸#3466|[CodePen](https://codepen.io/qoq77416416/pen/dyKBjzW?editors=1011)| |竹輪#3335|[CodePen]()| |Mia小福#4473|[CodePen](https://codepen.io/a0950271/pen/jOKjomG)| |sherlin#4587|[CodePen](https://codepen.io/sherlinKuo/pen/NWzZZvO?editors=1111)| |Yuna Huang#2692|[CodePen](https://codepen.io/Yuna1002/pen/vYrqMoq?editors=1111)| |ABOOS#6276|[CodePen](https://codepen.io/guhungyin/pen/BaVXKGR?editors=1111)| | Hazel.#6020 | [CodePen](https://codepen.io/Hazelhsieh/pen/JjZqEbW)| |心幻羽#0056|[CodePen](https://codepen.io/linglingsyu/pen/BaVeLjy?editors=1011)| |柔柔#1716|[Codepen](https://codepen.io/rouchen/pen/oNyKLdZ?editors=1011)| |米米#1824|[Codepen](https://codepen.io/Jameshsu0407/pen/bGKXeOO)| |helena#8461|[Codepen](https://codepen.io/helena27/pen/QWxeEzP)| |Yishan#4902|[Codepen](https://codepen.io/gdjrehhw-the-animator/pen/ExRqyma?editors=1011)| |Natsuki#9555|[Codepen](https://codepen.io/tinawang722/pen/QWxeGXm)| |CatBoxy#4207|[Codepen](https://codepen.io/nekoboxy/pen/PoarQRp)| |Cream#3449|[Codepen](https://codepen.io/frxdwbbi-the-sasster/pen/ZERgpYQ)| |Hilda#7085|[Codepen](https://codepen.io/vwquikad-the-vuer/pen/KKeOmav)| |yuling#1634|[Codepen](https://codepen.io/igzdflpu/pen/bGKPZdv)| |老皮博士#8050|[Codepen](https://codepen.io/li0406/pen/XWYvexy)| |鑫鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/qBKeVya?editors=1001)| | cbs#9007 |[Codepen](https://codepen.io/wasdjk/pen/poKMrMe)| Zack_P#1805|[Codepen](https://codepen.io/tmzazirh-the-animator/pen/eYKqKdy?editors=1111)| |kuku#3118|[Codepen](https://codepen.io/mengting-ku/pen/YzvmbWM)| |柚子#3958|[CodePen](https://codepen.io/as6625998/pen/yLEmqpw?editors=1111)| |enolachen#8031|[CodePen](https://codepen.io/Chen-Enola/pen/NWzQVEg)| |Chaya#3412|[Codepen](https://codepen.io/ChiaoJiao/pen/KKeOLza)| |GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922|[Codepen](https://codepen.io/sho666/pen/qBKeGQG?editors=1010)| |AkiHico#9239|[Codepen](https://codepen.io/akihico/pen/BaVXgpm?editors=1010)| |阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/abKegNe?editors=0110)| | Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/yLEmmXN?editors=1011) | |Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/mdjbMaQ)| |How#5806|[codepen](https://codepen.io/howtobefine/pen/rNrBdEB)| |雞腿#6089|[codepen](https://codepen.io/C-WEi/pen/ZEjzjER?editors=1011)| |Winnie#1306|[Codepen](https://codepen.io/WinnieWuWinnie/pen/VwBZoVX)| |shiuan#4721|[Codepen](https://codepen.io/prankaChang/pen/BaPaadZ)| |喬喬#2824|[Codepen](https://codepen.io/joanne-wei/pen/GRBKeEN)| |艸良#2846|[Codepen](https://codepen.io/momoninainai/pen/NWBWxNO)| |yoyo#1003|[Codepen](https://codepen.io/pen/OJwJbpK)| |RainJ#3480|[Codepen](https://codepen.io/RainJCode/pen/ExpxKjv)| |949cat 𓃠#2154|[codepen](https://codepen.io/Ariel_Chen/pen/poZowbp)| |Asher Xu#9297|[Codepen](https://codepen.io/kirakira72/pen/eYjYEmw)| |Chi#7605 |[Codepen](https://codepen.io/YoChi84/pen/GRBROmq) | |KC_8685#9343|[Codepen](https://codepen.io/cathy7411/pen/KKBKbOK)| |Tami#6742|[Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/MWBYmve)| |MingJuan#0071|[Codepen](https://codepen.io/M-Juan/pen/NWBPgZX)| Jamie Wu#9345|[Codepen](https://codepen.io/Wu220103/pen/KKejjPx?editors=1012)| |Jeff#6077|[Codepen](https://codepen.io/nonwaaa/pen/mdjyQxJ)| |ViNci#4273|[Codepen](https://codepen.io/ViNciSyo/pen/BaPyXOx)| | yummyniya#7185 | [Codepen](https://codepen.io/yummyniya/pen/MWEQJya) | |你看我像是會玩嗎#1866|[Codepen](https://codepen.io/hasagg/pen/bGjdqRa)| |kevin#6131|[Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/ZEjGJMN?editors=1011)| |sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/NWBqMjX)| |Silvialu#4521|[codepen](https://codepen.io/Silvia091640/pen/NWBPBOg)| |Shuo#1596|[codepen](https://codepen.io/chiangchungshuo/pen/VwBvLPz)| |FiReBrO#0557|[codepen](https://codepen.io/firebro42/pen/eYjpObz)| |ChloeLo#4858|[codepen](https://codepen.io/chloelo/pen/yLqYjNP)| |Wei#2330|[codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/wvxKXwy)| |popcorn_3q#9893|[codepen](https://codepen.io/arnyrpqt-the-sasster/pen/LYBprzx)| |Hsiu#8767|[codepen](https://codepen.io/amy-hsiu/pen/RwBWdQd?editors=1012)| |hungya#0773|[codepen](https://codepen.io/hungya777/pen/PoBZOrY?editors=1011)| |Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/RwBWjym)| |PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/BaPjJrQ)| |狸貓#5863|[Codepen](https://codepen.io/tanuki320/pen/OJEeYxb)| |chole#1041|[Codepen](https://codepen.io/LinChole/pen/VwBegzm)| |大大#5164 |[Codepen](https://codepen.io/gzonothk-the-looper/pen/BaPjgvX?editors=1111)| |YI#0863 |[Codepen](https://codepen.io/YI0305/pen/OJwRmvb?editors=1011)| |Cookie SSS#6991 |[Codepen](https://codepen.io/sqhjikpa-the-selector/pen/yLqVXax?editors=1010)| |Wendy77#8049|[Codepen](https://codepen.io/Wendy__/pen/WNKoNdK)| |阿異#4776|[CodePen](https://codepen.io/yani21399/pen/xxJRpop)| |Keep#4336|[CodePen](https://codepen.io/keep-/pen/YzjNrjM?editors=1011)| |MengLin#3001|[CodePen](https://codepen.io/aacj2642/pen/LYBWWOR)| | YU#0618 | [Codepen](https://codepen.io/yoken_/pen/eYjvqwm?editors=1011) | | 周周#3503 | [Codepen](https://codepen.io/jhoujhou-the-decoder/pen/JjBZNjb?editors=1000) | |Jujubeleven#1036|[Codepen](https://codepen.io/jujubeleven/pen/LYBgEPJ?editors=1011)|