---
# System prepended metadata

title: "\U0001F3C5 Day 3 - 物件觀念、Bootstrap 表單 2"
tags: [Vue 直播班 - 2022 冬季班]

---

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