---
# System prepended metadata

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

---

# 🏅 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://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)|
