---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 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 作答）
```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 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
<!-- 解答：
// 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 / 答案 |
|:----------:|:-------------------------------------------------------:|
| elena | [CodePen](https://codepen.io/elena0127abc/pen/KKEPROq) |
| pinyi_9 | [CodePen](https://codepen.io/Wpypy/pen/gOEYmbq?editors=1010) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/xxBKqRp?editors=1111) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/MWxgpWe) |
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/zYbOZqz) |
| 圈圈 | [CodePen](https://codepen.io/wjejfczn-the-bold/pen/OJqLpjL?editors=1000) |
| ryan.chou | [CodePen](https://codepen.io/csw8524/pen/rNRByMm) |
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/LYaPWyr?editors=1010) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/bGZbqKE) |
| 貢波波夫 | [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/abXeMKJ) |
| Leo | [CodePen](https://codepen.io/Aruminiya/pen/NWJKjRg) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/ZEPzKYx) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/WNmejmJ) |
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/rNRBmYo?editors=1010) |
| SHUI | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/yLwBXBZ) |
| Sabrina | [CodePen](https://codepen.io/SabrinaGuo/pen/RwdbgWg) |
| adonis | [CodePen](https://codepen.io/adonismis/pen/gOEYRKj?editors=1111) |
| celinelinnn |[CodePen](https://codepen.io/celinephoebe/pen/rNRBmgg) |
| Moreene | [CodePen](https://codepen.io/Moreene/pen/PoLYjRB) |
| PayRoom | [CodePen](https://codepen.io/water38198/pen/OJqLjLq) |
| c8529 | [CodePen](https://codepen.io/claire210401/pen/bGvmyza?editors=1010) |
| MDFK | [CodePen](https://codepen.io/maywang/pen/XWGrRQL?editors=1010) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/PoLYmwN?editors=1011) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/yLwBoWz?editors=1011) |
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/QWoLpqN) |
| 荷菓かのり | [CodePen](https://codepen.io/oogxwkvw-the-builder/pen/qBvWPdv?editors=1111) |
| FangFang | [CodePen](https://codepen.io/FangFang09/pen/XWGreJB) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/wvOwrxr?editors=1011) |
| fanshu0303| [CodePen](https://codepen.io/JuiHsuanLee0303/pen/yLwBPYw) |
| Enzo | [CodePen](https://codepen.io/Enzo-Lo/pen/wvOwdwz?editors=1011) |
| Neil | [CodePen](https://codepen.io/Neil1024/pen/Rwdbjjx?editors=1001) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/RwdbjyQ?editors=1111) |
| Emily | [CodePen](https://codepen.io/Emily2089/pen/gOqVyzO) |
| kuanju27 | [CodePen](https://codepen.io/Eero-Chiao/pen/YzgKEoL) |
| cbs |[Codepen](https://codepen.io/wasdjk/pen/zYbOPPr?editors=1111) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/bGZbabP?editors=1010) |
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/gOEYoYZ?editors=1010) |
| 翔.(Ben) | [CodePen](https://codepen.io/energy95272z/pen/dyrbJWq?editors=1011) |
| dora | [CodePen](https://codepen.io/dorayu/pen/yLwBbgK) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/oNVvzZM) |
| amaaaa | [CodePen](https://codepen.io/Alicia-Chu/pen/NWJKypg) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/WNmeMKM?editors=1011) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/JjzPpNq?editors=1111) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/JjzPpqo?editors=1010) |
| KUN. | [CodePen](https://codepen.io/barry91205/pen/VwRZQoK?editors=1111) |
| wei_Rio | [CodePen](https://codepen.io/wei_wu/pen/OJqLzzL?editors=1001) |
| carrie | [CodePen](https://codepen.io/echocarriet/pen/ExMYvOL) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/ZEwgKNg) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/YzgKErr) |
| Chris | [CodePen](https://codepen.io/cjtseng07/pen/OJqLvGr) |
| Bin | [CodePen](https://codepen.io/binbro708/pen/JjzPvMv) |
| nini1202desu | [CodePen](https://codepen.io/tvxq5206/pen/abMoGOw?editors=1011) |
| MikeLin | [CodePen](https://codepen.io/MikeLin0701/pen/KKEPRXM) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/rNRBvdG?editors=1000) |
| Yang | [CodePen](https://codepen.io/Yang-J/pen/BabBxRX?editors=1010) |
| Mattie | [CodePen](https://codepen.io/mattielin/pen/eYXOPdK) |
| PoRay | [CodePen](https://codepen.io/raycheng/pen/wvOwQNN?editors=1011) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/vYPBpzM?editors=1001) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/XWGrOMP) |
| Ivy | [CodePen](https://codepen.io/yi-hua-lin/pen/MWyNydy) |
| yuling | [Codepen](https://codepen.io/igzdflpu/pen/MWxgLxz) |
| hedy_hsu | [CodePen](https://codepen.io/Hedy_H/pen/oNVvVgx?editors=1010) |
| 依依 | [CodePen](https://codepen.io/Rita-Yang/pen/JjxgqdV?editors=1011) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/poYzByj) |
| Helen | [CodePen](https://codepen.io/milkteamonster/pen/KKEPJXZ) |
| Martin | [CodePen](https://codepen.io/markyourpage/pen/zYbYYYV) |
| MY | [CodePen](https://codepen.io/ahmomoz/pen/Babaagv?editors=1111) |
| santu0868 | [CodePen](https://codepen.io/HatsumiSan/pen/BabaoJV) |
| Peng | [CodePen](https://codepen.io/H-Peng/pen/dyryOZx?editors=1010) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/dyrbaQY) |
| haru | [CodePen](https://codepen.io/haru_portfoilo/pen/WNmNbPw) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/GReRWwa) |
| Oria | [CodePen](https://codepen.io/kajing/pen/YzgzKzb?editors=1000) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/wvOvgKp) |
| hsuhsusophie | [CodePen](https://codepen.io/hsuhsusophie/pen/zYbYPqV) |
| jenniferchuang | [CodePen](https://codepen.io/yujhen/pen/WNmNKpy) |
| 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/bGZGxYX) |
| Eden |[Codepen](https://codepen.io/iseden/pen/ExMxOQa)|
| yuli |[Codepen](https://codepen.io/qlmjined-the-typescripter/pen/zYbYbrQ)|
| jeremyChan |[Codepen](https://codepen.io/nudieisgood/pen/yLwyyBm)|
| Jim |[Codepen](https://codepen.io/asiahedh-the-encoder/pen/ZEPEqNM)|
| Rock | [CodePen](https://codepen.io/xiu43317/pen/mdoyyza) |
| Yuetin | [CodePen](https://codepen.io/Yue9527/pen/jOJEqGB) |
| pingshian | [CodePen](https://codepen.io/pingshian0131/pen/BabyLoq) |
| WEI | [CodePen](https://codepen.io/wei-z/pen/xxBbqrq) |
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/MWxYOjq) |
| ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/jOJEaKv?editors=1011) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/PoLwEGB?editors=1111) |
| WA | [CodePen](https://codepen.io/ldddl/pen/PoLwENa) |
| .zack_p | [CodePen](https://codepen.io/Designer-PH/pen/KKEwQgN?editors=1111) |
| Yang | [CodePen](https://codepen.io/hike1707/pen/yLwyEJg) |
| Aaron | [CodePen](https://codepen.io/nzygxhnl-the-scripter/pen/mdoyKzy?editors=1111) |
| adam322 | [CodePen](https://codepen.io/hexschool/pen/NWzBXON?editors=1000) |
| macihuang | [CodePen](https://codepen.io/macy1215/pen/JjzdEVd) |
| _shun0130 | [CodePen](https://codepen.io/koba60052ww/pen/zYbGwvz) |
| 保羅 | [CodePen](https://codepen.io/paul-1997/pen/YzgXNyz) |
| PoWei#8484 | [CodePen](https://codepen.io/harrison-wei-lai/pen/wvOaOoo?editors=1111) |
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/vYPOMYg) |
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/xxBwbLZ?editors=1010) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/zYbvwOK?editors=1111) |
| xuan | [CodePen](https://codepen.io/xuan0915/pen/PoLPjEz?editors=1011) |
| Vivian2857 | [CodePen](https://codepen.io/vivian_lin/pen/RwdWZrK) |
| peggy | [CodePen](https://codepen.io/peggylai/pen/poYjLwW) |
| owen | [CodePen](https://codepen.io/owen-dong/pen/BaboGVQ?editors=1000) |
| Nielsen | [Codepen](https://codepen.io/nielsen_dch/pen/dyrYLRX)|
| Jason | [Codepen](https://codepen.io/bfnrjakt/pen/OJqyYre)|
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/ZEPQwLY?editors=1011) |
| zona | [CodePen](https://codepen.io/w242920/pen/poYgBwK) |
| skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/XWGddpb?editors=1000) |
| hua | [CodePen](https://codepen.io/LHua/pen/VwRKQxK?editors=1111) |
| samgu666 | [CodePen](https://codepen.io/orz311013/pen/poYEwRz) |
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/rNRWbKG) ||
| shuuu | [Codepen](https://codepen.io/jybvfzos-the-bashful/pen/ZEPeBOJ?editors=1011) ||
| 關關 | [Codepen](https://codepen.io/ashkuan/pen/eYXBNyb) |
| Ting | [Codepen](https://codepen.io/liara/pen/rNRweQG) |
| 郭芙蘭| [Codepen](https://codepen.io/flora_Kuo/pen/PoLOLGx?editors=1011) |
| ChrisSQR| [Codepen](https://codepen.io/ChrisSQR/pen/PoLppQX) |
<!-- 快速複製
| | [CodePen]() |
-->
Sign in with Wallet
Connect another wallet