---
tags: React 直播班 - 2024 冬季班
---
# 🏅 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)
## 回報流程
將答案寫在 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 -
0
-->
回報區
---
| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/QwLpWQQ) |
| Toung | [CodePen](https://codepen.io/Toung/pen/MYgpWrq)|
| 泊岸 | [CodePen](https://codepen.io/qoq77416416/pen/emOvYMb?editors=1011)
|Satar| [CodePen](https://codepen.io/SatarKuo/pen/LEPWYJV?editors=1011) |
|Aaron 謝宗佑| [CodePen](https://codepen.io/aaron-hsieh/pen/ByBWaEJ) |
| ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/mybWdvW?editors=1011)|
| tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/KwPaQMM?editors=1010)|
|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/vEBxERd)|
| Jasmine Lin | [CodePen](https://codepen.io/Jasmine-Lin-the-vuer/pen/PwYpodj) |
| 蘑菇星星 | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/jENBEpg?editors=1011) |
|ollie|[CodePen](https://codepen.io/daiyy97/pen/ByBWNma?editors=1000)|
|邵|[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/xbKqwOB)|
| GAVI| [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/emOgXmK)|
| Cami | [CodePen](https://codepen.io/irisLife/pen/OPLpMWZ) |
| 蕾蕾 leilei | [CodePen](https://codepen.io/Leileisme/pen/dPbvGWW?editors=1011) |
| Amanda | [CodePen](https://codepen.io/cym199922/pen/mybWPLZ) |
| Dolce_墨 | [CodePen](https://codesandbox.io/p/sandbox/lq64q6) |
| Tammy | [CodePen](https://codepen.io/Tammy_Tsai/pen/vEBxKxO) |
| jimmy | [CodePen](https://codepen.io/JimmyMao/pen/KwPWgvY?editors=1111) |
| Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/wBwJKQP) |
| Rothy | [Codepen](https://codepen.io/ChloeHsu1/pen/dPbvOWq) |
| Rogan | [Codepen](https://codepen.io/RoganHsu/pen/raByWXd) |
| 4chan | [CodePen](https://codepen.io/ijuolaqc-the-looper/pen/pvzeRQO?editors=1011) |
| yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/bNbqpRN) |
| Sonia | [CodePen](https://codepen.io/YUJOU/pen/xbKgoKm) |
| Jun | [CodePen](https://codepen.io/jun12079/pen/RNbprRZ) |
| Nocab | [CodePen](https://codepen.io/PeihanWang/pen/bNbqvbe?editors=1011) |
| Rochel |[Codepen](https://codepen.io/rochelwang1205/pen/azoJKEE?editors=1010)|
| Kaya |[Codepen](https://codepen.io/kayaribi/pen/OPLpoGa)|
| andy |[Codepen](https://codepen.io/andygggg/pen/emOvbeO?editors=1111)|
| Tatus | [CodePen](https://codepen.io/chindesu0207/pen/RNbVWgN) |
| .michelle0417 | [CodePen](https://codepen.io/michelle0417/pen/mybmEbZ) |
| 阿佑 | [CodePen](https://codepen.io/ans9323052/pen/yyBboKr) |
|mercury2508.| [CodePen](https://codepen.io/Mercury2508/pen/MYgmyGb) |
| ＣrystalLala | [CodePen](https://codepen.io/crystallala/pen/OPLmBre) |
| abab016001 | [CodePen](https://codepen.io/abab016001Jin/pen/XJrRxqM?editors=1000) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/NPKjmby) |
| Johnson | [CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/EaYXjeX) |
| Yen | [CodePen](https://codepen.io/yuxxxlouyen/pen/RNbgPjJ) |
| 爆漿 | [CodePen](https://codepen.io/nvdwwlbx-the-vuer/pen/MYgooVE?editors=1111) |
| ycl325.etheddie | [CodePen](https://codepen.io/wdvikfuz-the-selector/pen/xbKrYwO) |
| fabio20 | [CodePen]( https://codepen.io/fabio7621/pen/ogveEoZ?editors=1111) |
|a1phaki(小k)|[codepen](https://codepen.io/a1phaki/pen/bNbrvZp)|
|1457 | [CodePen](https://codepen.io/1457dys/pen/qEWXQBX) |
|嚼勁先生 | [CodePen](https://codepen.io/James520284/pen/YPKxgyL) |
| Joannehu | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/LEPzVXW?editors=1011) |
| Glen_69515 | [CodePen](https://codepen.io/glenyaochih/pen/RNbLBvv?editors=1010) |
| chris | [CodePen](https://codepen.io/chris-chen-the-selector/pen/MYgOXgV?editors=1011) |
| Mike | [CodePen](https://codepen.io/mike2049/pen/WbedqQy?editors=1011) |
| 是在哈囉 | [CodePen](https://codepen.io/miyxdhem-the-solid/pen/PwYePGG) |
| yun-lin | [CodePen](https://codepen.io/yunlinhsu/pen/WbegMRa) |
| .ztion | [CodePen](https://codepen.io/ztion/pen/vEBezEP) |
| yaoling.liang | [CodePen](https://codepen.io/Yao-Ling-L-/pen/pvzXJzX?editors=1012) |
| Chun | [CodePen](https://codepen.io/Chun_debbie/pen/mybZKpK?editors=1010) |
| Jim | [CodePen](https://codepen.io/JimChou/pen/pvzqrmw) |
| KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/dPyOZPZ?editors=1001) |
| 姜承 | [CodePen](https://codepen.io/Troy0718/pen/xbxjdqN?editors=0012) |
| Chuang | [CodePen](https://codepen.io/uidoytjq-the-solid/pen/mydGYQZ?editors=1111) |
| ㄚ華 | [CodePen](https://codepen.io/rzzuehiv-the-vuer/pen/MYWdmPB) |
| jinliu214 | [CodePen](https://codepen.io/jinliu214/pen/jEEZzwG) |
<!-- 快速複製
| | [CodePen]() |
-->
Sign in with Wallet
Connect another wallet