# 🏅 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://getbootstrap.com/docs/5.3/forms/layout/#horizontal-form)
<!-- 解答：
// 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/fhljksmg-the-styleful/pen/wBGRRyz?editors=1000
-->
---
<!-- | 名字 |[Codepen](連結) | -->
| 名字 | 連結 |
| ----------- | -------------------------------------------------------------------------------- |
| Noooora | [CodePen](https://codepen.io/Nora-Ch/pen/RNazxWg?editors=1111) |
| 星雪糖 | [CodePen](https://codepen.io/vfpofbgm-the-scripter/pen/VYaJypb?editors=1011) |
| Chia | [Codepen](https://codepen.io/Chia-the-encoder/pen/emZwyRY) |
| Tetsu | [Codepen](https://codepen.io/ttgchang/pen/XJdLVVm) |
| RUDY | [Codepen](https://codepen.io/Rudy-crw/pen/LENKeKO?editors=1000) |
| 布萊斯 | [Codepen](https://codepen.io/oddmtaag-the-scripter/pen/NPNZydW) |
| 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/WbwqdBq) |
| Mini | [Codepen](https://codepen.io/miiinii32-Cheng/pen/raeEvBg?editors=1000) |
| jchunnn | [Codepen](https://codepen.io/jchunnn/pen/EaKBoQK) |
| Eileen | [Codepen](https://codepen.io/Eileen-io/pen/RNazxag) |
| 小懿 | [Codepen](https://codepen.io/YT-the-vuer/pen/PwNrBoP?editors=1011) |
| Marco | [Codepen](https://codepen.io/MarcoChiu/pen/LENKBdP) |
| Hugh | [Codepen](https://codepen.io/Hugh-Chen/pen/LENKYGK) |
| 7lun | [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/wBGLEjY?editors=1111) |
| Wafa | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/NPNZLPM?editors=1011) |
| andy | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/raeEqNM?editors=1011) |
| Percy | [Codepen](https://codepen.io/Percy-Ku/pen/ogxraGM) |
| 社子畢卡索 | [Codepen](https://codepen.io/pen?template=YPqoJNO) |
| cindy | [CodePen](https://codepen.io/a50134/pen/PwNrygw?editors=1112) |
| An | [CodePen](https://codepen.io/bzrpsbjq-the-encoder/pen/azNgRBL?editors=1111) |
| Vergil | [CodePen](https://codepen.io/aglgvsie/pen/qEZzQNv?) |
| 登登登 | [CodePen](https://codepen.io/Duncanin/pen/vEGqXGZ?editors=1000) |
| YUCCC | [CodePen](https://codepen.io/taroooo/pen/GgZbwWo?editors=1010) |
| 7Red | [CodePen](https://codepen.io/cch2655/pen/vEGqvGx) |
| Zem | [CodePen](https://codepen.io/dgldwqlg-the-vuer/pen/YPqodZV) |
| DebbyYang | [CodePen](https://codepen.io/Debby-Yang/pen/KwzjJQM) |
| UNO | [CodePen](https://codepen.io/uno1985/pen/ogxrVNV) |
| wind | [CodePen](https://codepen.io/wind7y/pen/qEZzwzj) |
| JiaMori | [CodePen](https://codepen.io/jiamori/pen/vEGqMMR) |
| Rogan | [CodePen](https://codepen.io/RoganHsu/pen/vEGqrrP?editors=1000) |
| bon | [CodePen](https://codepen.io/pengpon/pen/ZYWgzBp) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/MYyNWzq) |
| Cami | [CodePen](https://codepen.io/irisLife/pen/pvyXQBO) |
| Sherry | [CodePen](https://codepen.io/twvyqojd-the-typescripter/pen/LENKmYG?editors=1011) |
| tanuki | [CodePen](https://codepen.io/tanuki320/pen/NPNQdRb?editors=1010) |
| cks40660 | [CodePen](https://codepen.io/CKS40660/pen/pvyMZqL) |
| Leonard | [CodePen](https://codepen.io/hyyfjqra-the-sans/pen/ZYWdLBR?editors=1011) |
| Jenna | [CodePen](https://codepen.io/abiscc14/pen/ByKXgvp) |
| 洋蔥 | [CodePen](https://codepen.io/mikeyam/pen/vEGoOYj?editors=1011) |
| ying | [CodePen](https://codepen.io/Lara-Lin/pen/MYegBQE?editors=1010) |
| esther | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/yyJBxVE?editors=1011) |
| KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/zxBOJRV?editors=1011) |
| 老屠 | [CodePen](https://codepen.io/fsgfxvlb-the-selector/pen/JoKPBGL?editors=1001) |
| 地瓜 | [Codepen](https://codepen.io/ChippyYU/pen/RNRwwPq?editors=1010) |
| Katie | [Codepen](https://codepen.io/Katiekatiehsu/pen/ZYOELpL?editors=1011) |
| Owen He | [Codepen](https://codepen.io/owen1120/pen/ogLNeqg) |
| nonwa_jeff | [codepen](https://codepen.io/nonwaaa/pen/PwzowXJ) |
| 蜜桃果茶 | [Codepen](https://codepen.io/jia-yiii/pen/zxBYpbV) |
| 平平 | [Codepen](https://codepen.io/ypinpin/pen/azZbjVE) |
| CharisLai | [Codepen](https://codepen.io/charislai/pen/azZbxBQ) |
| Eric | [Codepen](https://codepen.io/wc-su/pen/PwzwZMj) |
| 舜仁 | [Codepen](https://codepen.io/shunjen/pen/yyJLrEE) |
| RyanC | [Codepen](https://codepen.io/RyanYD/pen/NPrPRdd) |
| 伊迪 | [Codepen](https://codepen.io/sorryFish/pen/raLayOJ) |
| kashiwatei | [Codepen](https://codepen.io/kashiwatei/pen/dPXPdPY?editors=1011) |
| Michelle | [Codepen](https://codepen.io/bastar_dize/pen/zxBxLoo) |
| ZoeKang |[Codepen](https://codepen.io/byehywmx-the-animator/pen/xbObMeO) |
| Jin |[Codepen](https://codepen.io/Jin-L/pen/gbMpYXx) |
| 主委加碼啦幹 |[Codepen](https://codepen.io/popbob-the-bashful/pen/ogLXgzJ) |
| 冠翔 |[Codepen](https://codepen.io/hsrfcdrx-the-bold/pen/qENdaZy?editors=1111) |
| bill0530 |[Codepen](https://codepen.io/rexvfzmf-the-typescripter/pen/raLVGqX) |
| Miikaa |[Codepen](https://codepen.io/Miikaa/pen/RNRPXXN) |
|小趴|[Codepen](https://codepen.io/papa2415/pen/QwEjOMY)|
|蛋白|[Codepen](https://codepen.io/sjlu-0/pen/XJKXJRR)|
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/dPXvjbV)|
|Wen|[Codepen](https://codepen.io/hsiao-kevin/pen/MYemBra?editors=1011)|
|Doreen翠翠翠|[Codepen](https://codepen.io/cuei-sian-Wang/pen/QwEgVJK?editors=1010)|
Sign in with Wallet
Connect another wallet