---
# System prepended metadata

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

---

# 🏅 Day 2 - 物件取值、Bootstrap 表單 1


物件取值
---
> 1. 物件中分為「屬性」及「值」。
> 2. 屬性為物件中的欄位名稱，而值是該屬性所代表的值。
> 3. 「屬性名稱」在運作上都是以「字串」的形式儲存，所以命名上可以使用特殊符號

在物件內新增、修改、取得屬性時最常使用的方式是「點記法」:

### 點記法（Dot notation）
```js=
let obj = {
    a: 'value A'
};
obj.$b = 'value B';  // 在物件 obj 新增一個帶有特殊符號的屬性 $b，值為 'value B'。
obj.a = 'value edit'; // 將物件 obj 屬性 a 的值修改為 'value edit'。
console.log(obj.a); // 取得物件 obj 屬性 a 的值
console.log(obj.$b); // 取得物件 obj 屬性 $b 的值
```

不過點記號在存取時會有一些限制。舉例來說，**當屬性名稱帶有數值、小數點、空格時，就無法正確運作**。這時就會改用「括弧記法」:

### 括弧記法（Bracket notation）
```js=
let obj = {
    a: 'value A'
};
obj['-- data'] = '雨量資料'; 
obj['PM2.5'] = 25;
obj['1b'] = '1b';
console.log(obj['-- data']) // 結果為 '雨量資料'
console.log(obj['PM2.5']) // 結果為 25
console.log(obj['1b']) // 結果為 '1b'
// 也可以代入變數
let a = 'a';
console.log(obj[a]); // 結果為 'value A'
```

### 題目
完成程式碼內註解要求
```js=
let c = ' 這是中文字';
let arr = {
  a: 'a',
  1: 'b',
  ' 這是中文字': 'c',
  'b': 'd',
  '--some data': 'e'
}

console.log();  // 請取得結果為 'b' 的值
console.log();  // 請取得結果為 'c' 的值，必須使用變數
console.log();  // 請取得結果為 'd' 的值，必須使用點記號
console.log();  // 請取得結果為 'e' 的值
```

Bootstrap 表單元素
---
- label、input
  運用 .form-label、.form-control 呈現 Bootstrap 基本樣式
  
  ```html=
  <label for="mail" class="form-label">Email address</label>
  <input type="email" class="form-control" id="mail" placeholder="name@example.com">
  ```
  > 注意：
  > 1. label for 與 input id 需一致
  > 2. input 需運用正確的 [type 屬性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/input#input_%E7%B1%BB%E5%9E%8B)

  
- select 
  運用 .form-select 呈現 Bootstrap 基本下拉選單樣式
  ```html=
  <select class="form-select" aria-label="Default select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  ```
  
- checkbox & radio
  運用 .form-check、.form-check-label、.form-check-input 呈現
  
  checkbox（通常為多選）
  input type 屬性需為 checkbox，可以加上 checked 屬性讓選項預設選取
  ```html=
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
    <label class="form-check-label" for="flexCheckDefault">
      Default checkbox
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
    <label class="form-check-label" for="flexCheckChecked">
      Checked checkbox
    </label>
  </div>
  ```
  
  radio（為單選）
  input type 屬性需為 radio，可以加上 checked 屬性讓選項預設選取
  > name 屬性的值需相同，表示為同一群組
  ```html=
  <div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
    <label class="form-check-label" for="flexRadioDefault1">
      Default radio
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
    <label class="form-check-label" for="flexRadioDefault2">
      Default checked radio
    </label>
  </div>
  ```
  
詳細可以再參考：Bootstrap [表單控制](https://getbootstrap.com/docs/5.3/forms/form-control/)、[select](https://getbootstrap.com/docs/5.3/forms/select/)、[checks&radios](https://getbootstrap.com/docs/5.3/forms/checks-radios/)

### 題目
請嘗試修改此 [CodePen](https://codepen.io/yen-kg/pen/wvVyjZx) `...` 的部分，還原成下方圖片樣式

![](https://i.imgur.com/3sGR3up.png)


<!-- 解答：  

// 1 
方法一
console.log(arr['1']); // 請取得結果為 'b' 的值
方法二
console.log(arr[1]);  // 請取得結果為 'b' 的值

// 2
console.log(arr[c]);  // 請取得結果為 'c' 的值，必須使用變數
// 4
console.log(arr.b);  // 請取得結果為 'd' 的值，必須使用點記號
// 5
console.log(arr['--some data']);  // 請取得結果為 'e' 的值

- Bootstrap 表單 -
https://codepen.io/fhljksmg-the-styleful/pen/vEGvQbv?editors=1000
-->



---

| 名字        | 連結                                                                             |
| ----------- | -------------------------------------------------------------------------------- |
| Saika       | [codePen](https://codepen.io/saika4501/pen/qEZzWGg?editors=1111)                 |
| Nooooora    | [CodePen](https://codepen.io/Nora-Ch/pen/VYaJYvp?editors=1111)                   |
| suemma      | [CodePen](https://codepen.io/suemma/pen/raeEaja)                                 |
| RUDY        | [CodePen](https://codepen.io/Rudy-crw/pen/VYaJYMM?editors=1000)                  |
| 叮咚        | [CodePen](https://codepen.io/pinchieh-lin/pen/yyOdNEX)                           |
| andy        | [CodePen](https://codepen.io/ewnblckz-the-styleful/pen/bNpPdPB)                  |
| Tetsu       | [Codepen](https://codepen.io/ttgchang/pen/bNpPVoo?editors=1010)                  |
| esther      | [Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/jEqjbRv)                 |
| Eileen      | [Codepen](https://codepen.io/Eileen-io/pen/qEZzOwO)                              |
| Naojun      | [Codepen](https://codepen.io/NAOJUN/pen/myPZJya)                                 |
| 洋蔥        | [Codepen](https://codepen.io/mikeyam/pen/OPNeMrr?editors=1011)                   |
| 小懿        | [Codepen](https://codepen.io/YT-the-vuer/pen/EaKBPBm?editors=0011)               |
| 7lun        | [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/jEqjraz?editors=1011)         |
| Sam.S.T.Y   | [Codepen](https://codepen.io/Sam-Yang-the-animator/pen/VYaJjGa?editors=1111)     |
| Wafa        | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/ZYWdWgr?editors=1010)      |
| 社子畢卡索  | [Codepen](https://codepen.io/pen?template=emZwdmw)                               |
| Hugh        | [Codepen](https://codepen.io/Hugh-Chen/pen/raeEBMw)                              |
| 登登登      | [Codepen](https://codepen.io/Duncanin/pen/vEGqXGZ?editors=1000)                  |
| Zem         | [Codepen](https://codepen.io/dgldwqlg-the-vuer/pen/JoXQReJ)                      |
| Percy       | [Codepen](https://codepen.io/Percy-Ku/pen/OPNeRYd)                               |
| 7Red        | [Codepen](https://codepen.io/cch2655/pen/yyOdVaa)                                |
| YUCCC       | [Codepen](https://codepen.io/taroooo/pen/gbrNgQW?editors=1111)                   |
| Michelle    | [Codepen](https://codepen.io/bastar_dize/pen/raeEjZR?editors=1011)               |
| Katie       | [Codepen](https://codepen.io/Katiekatiehsu/pen/GgZbWjy?editors=1011)             |
| 布萊斯      | [Codepen](https://codepen.io/oddmtaag-the-scripter/pen/GgZbWWQ)                  |
| An          | [Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/vEGqxZe?editors=1010)      |
| Vergil      | [Codepen](https://codepen.io/aglgvsie/pen/MYyMpRK)                               |
| JiaMori     | [Codepen](https://codepen.io/jiamori/pen/bNpPqxZ?editors=1111)                   |
| Debby Yang  | [Codepen](https://codepen.io/Debby-Yang/pen/bNpPqKz)                             |
| wind        | [Codepen](https://codepen.io/wind7y/pen/PwNrjmb)                                 |
| 星雪糖      | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/KwzjZKr?editors=1011)     |
| Chia        | [Codepen](https://codepen.io/Chia-the-encoder/pen/dPMByqM)                       |
| Mini        | [Codepen](https://codepen.io/miiinii32-Cheng/pen/ogxrqgO?editors=1011)           |
| Sherry      | [Codepen](https://codepen.io/twvyqojd-the-typescripter/pen/LENKmYG?editors=1010) |
| bon33       | [Codepen](https://codepen.io/pengpon/pen/azNgKGY)                                |
| Marco       | [Codepen](https://codepen.io/MarcoChiu/pen/NPNZWGj)                              |
| cindy       | [Codepen](https://codepen.io/a50134/pen/YPqoJJg)                                 |
| Cami        | [Codepen](https://codepen.io/irisLife/pen/ogxrQPg)                               |
| UNO         | [Codepen](https://codepen.io/uno1985/pen/WbwqPWG)                                |
| Tippy       | [Codepen](https://codepen.io/Ektodor-Wang/pen/xbVvxJN)                           |
| tanuki      | [Codepen](https://codepen.io/tanuki320/pen/NPNQdRb?editors=1010)                 |
| cks40660    | [Codepen](https://codepen.io/CKS40660/pen/qEZeyXg)                               |
| Jenna       | [Codepen](https://codepen.io/abiscc14/pen/emZqwPK)                               |
| Atian       | [Codepen](https://codepen.io/A-Tian-Chen/pen/raeXqKy?editors=1010)               |
| ying        | [Codepen](https://codepen.io/Lara-Lin/pen/pvbzZPR?editors=1111)                  |
| 老屠        | [Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/JoKPBGL?editors=1000)     |
| KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/LEZPrej?editors=1011)               |
| 地瓜        | [Codepen](https://codepen.io/ChippyYU/pen/RNRwwPq?editors=1010)                  |
| Owen He     | [Codepen](https://codepen.io/owen1120/pen/azZbyLx?editors=1000)                  |
| nonwa_jeff  | [codepen](https://codepen.io/nonwaaa/pen/ZYOEYRV)                                |
| 蜜桃果茶    | [Codepen](https://codepen.io/jia-yiii/pen/wBWvrQN)                               |
| 平平        | [Codepen](https://codepen.io/ypinpin/pen/gbMOeEO)                                |
| 伊迪        | [Codepen](https://codepen.io/sorryFish/pen/XJKWBPV)                              | 
| CharisLai        | [Codepen](https://codepen.io/charislai/pen/KwMKYNX)                              | 
| 舜仁        | [Codepen](https://codepen.io/shunjen/pen/bNeGJqq)                              | 
| Eric | [codepen](https://codepen.io/wc-su/pen/azZzdxg) |
| RyanC | [codepen](https://codepen.io/RyanYD/pen/OPXPRbN) |
| kashiwatei | [codepen](https://codepen.io/kashiwatei/pen/wBWBpLq?editors=1011) |
| ZoeKang |[codepen](https://codepen.io/byehywmx-the-animator/pen/jErEdXd)|
| Jin |[codepen](https://codepen.io/Jin-L/pen/JoKdPNo)|
| 主委加碼啦幹 |[codepen](https://codepen.io/popbob-the-bashful/pen/JoKdooZ)|
| 冠翔 |[codepen](https://codepen.io/hsrfcdrx-the-bold/pen/XJKbdpQ?editors=1111)|
| bill0530 |[codepen](https://codepen.io/rexvfzmf-the-typescripter/pen/raLVGyP)|
| Miikaa |[codepen](https://codepen.io/Miikaa/pen/MYewZOo)|
| 小趴|[Codepen](https://codepen.io/papa2415/pen/bNeVYqx)|
| 蛋白|[Codepen](https://codepen.io/sjlu-0/pen/MYeaNbe)|
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/OPXpEqw)|
|Wen|[Codepen](https://codepen.io/hsiao-kevin/pen/WbxjdYj?editors=1010)|
|Doreen翠翠翠|[Codepen](https://codepen.io/cuei-sian-Wang/pen/QwEgBzX?editors=1010)|
