---
# System prepended metadata

title: "\U0001F3C5 Day 4 - 陣列操作 1、Bootstrap font-size"
tags: [React 直播班 - 2025 冬季班]

---

# 🏅 Day 4 - 陣列操作 1、Bootstrap font-size

### 教學
這題需要額外理解的知識點為「[callback 函式](https://developer.mozilla.org/zh-TW/docs/Glossary/Callback_function)」，可以簡單的理解為:「把函式作為參數調用」。
舉例：
```js=
function greeting(arr) {
  alert('Hello ' + arr.name);
}
// callback 函式
function processUserInput(callback, arr) {
  callback(arr);
}

let arr = {name: "Jordan"};
// 在 callback 函式中調用 greeting 函式，並把 arr 也一併代入
processUserInput(greeting, arr);
```

使用 callback 的目的與好處主要有以下兩點：
- 彈性與重用性
- 分離關注點
以上方範例來說，我們透過 greeting 函式把 Hello 字串組合名稱的部分獨立出來，將其作為參數帶入 processUserInput 函式執行
這樣只要根據需求修改帶入的 callback 函式，提升重用性的同時，讓每個函式只專注做一件事情，整體程式碼結構也會更加清晰唷！

題目（使用 CodePen 作答）
---
以下 crowdAge 為部分民眾的年紀資料，請修改程式碼、篩選出屬性 age > 18 的陣列元素，並將它們一一加入 filterResult 這個陣列中。**（可以使用 [push()](https://wcc723.github.io/development/2020/10/04/js-array-methods/#Array-prototype-push) 或是 [filter() 函式](https://www.casper.tw/javascript/2017/06/29/es6-native-array/#Array-prototype-filter)）**


```js=
let crowdAge = [
  {
    name: 'Rick',
    age: 17
  },
  {
    name: 'Jane',
    age: 25
  },
  {
    name: 'Jordan',
    age: 19
  },
  {
    name: 'Jack',
    age: 7
  },
  {
    name: 'Reol',
    age: 27
  }
];

// callback 函式
function ageFilterCB(cb, arr) {
  return cb(arr);
}

function ageFilter(arr) {
  /* 只能在此插入程式碼 */
}

let filterResult = [];
filterResult = ageFilterCB(ageFilter, crowdAge);
console.log(filterResult); /* 為陣列，內容包含屬性 age > 18 的 crowdAge 元素 */
```

Bootstrap font-size
---
在 Bootstrap 中可以使用 `.h1` ~ `.h6` 或是 `.fs-*` class 來直接調整字體大小設定，
兩者的差異主要在 `.h1` ~ `.h6` 標題類別使用了 `font-size`、`font-weight`、`line-height`，而 `.fs-*` 只有 `font-size` 的設定 
> 注意：
> 1. 兩者都會有預設響應式設定（會隨著視窗寬度改變文字大小）
> 2. Bootstrap h1 ~ h6 標籤也會有預設字體設定，設定文字樣式時不要直接使用標籤來設定字體大小，請使用 .h1 ~ .h6 來設定哦
> 舉例來說：
> 想要在次重要的標題使用 h4 的字體大小設定，
> 正確寫法 -> `<h2 class="h4"> Title </h2>`
> （h1 ~ h6 標籤請以重要程度依序使用）
> 3. 實際運用時可以到 Bootstrap 變數中改變字體大小的預設設定（`$h1-font-size`、`$font-sizes`）

可以運用此 [CodePen](https://codepen.io/yen-kg/pen/jOgZKxE) 觀察他們之間的差異，並嘗試自行運用看看

可以參考：[.h1 ~ .h6](https://getbootstrap.com/docs/5.3/content/typography/#headings) 、 [.fs-*](https://getbootstrap.com/docs/5.3/utilities/text/#font-size)


<!-- 解答：  
function ageFilter(arr) {
  let target = arr.filter(item => item.age > 18);
  return target;
}
-->

<!-- 解法二
function ageFilter(arr) {
  let target = [];
  arr.forEach(item => {
  	if(item.age > 18) {
      target.push(item);
    };
  });
  return target;
}

- Bootstrap -
可以 fork https://codepen.io/yen-kg/pen/jOgZKxE
調整 class 觀看差異
-->

---

<!-- | 名字 |[Codepen](連結) | -->
| 名字        | 連結                                                                             |
| ----------- | -------------------------------------------------------------------------------- |
| Hugh        | [Codepen](https://codepen.io/Hugh-Chen/pen/bNpPdme)                              |
| Tetsu       | [Codepen](https://codepen.io/ttgchang/pen/myPNbjg)                               |
| liwen       | [Codepen](https://codepen.io/liwenchiou/pen/YPqmKmM?editors=1000)                |
| RUDY        | [Codepen](https://codepen.io/Rudy-crw/pen/dPMxbEa?editors=1010)                  |
| Nooooora    | [CodePen](https://codepen.io/Nora-Ch/pen/ZYWgEBx)                                |
| Chia        | [Codepen](https://codepen.io/Chia-the-encoder/pen/QwNeWbd)                       |
| Marco       | [CodePen](https://codepen.io/MarcoChiu/pen/YPqmzNK)                              |
| 叮咚        | [CodePen](https://codepen.io/pinchieh-lin/pen/pvyMowp?editors=1111)              |
| Rogan       | [CodePen](https://codepen.io/RoganHsu/pen/vEGqrrP?editors=1011)                  |
| bon         | [CodePen](https://codepen.io/pengpon/pen/ogxKNQg)                                |
| 7Red        | [CodePen](https://codepen.io/cch2655/pen/XJdvWBo)                                |
| Naojun      | [CodePen](https://codepen.io/NAOJUN/pen/WbwVbZa)                                 |
| Eileen      | [CodePen](https://codepen.io/Eileen-io/pen/wBGVaVM)                              |
| jchunnn     | [CodePen](https://codepen.io/jchunnn/pen/JoXgGBR)                                |
| andy        | [CodePen](https://codepen.io/ewnblckz-the-styleful/pen/EaKqKRb?editors=1011)     |
| 7lun        | [CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/NPNQNBq?editors=1011)         |
| Wafa        | [CodePen](https://codepen.io/dqricwgo-the-reactor/pen/OPNKNWq?editors=0011)      |
| 星雪糖      | [CodePen](https://codepen.io/vfpofbgm-the-scripter/pen/VYaojXw?editors=1011)     |
| Percy       | [CodePen](https://codepen.io/Percy-Ku/pen/XJdvKyo?editors=1111)                  |
| cindy       | [CodePen](https://codepen.io/a50134/pen/azNemwO?editors=1112)                    |
| 登登登      | [CodePen](https://codepen.io/Duncanin/pen/gbrVwNj?editors=1010)                  |
| 小懿        | [CodePen](https://codepen.io/YT-the-vuer/pen/bNpXVQr?editors=0011)               |
| YUCCC       | [CodePen](https://codepen.io/taroooo/pen/zxqgKLv?editors=1111)                   |
| An          | [CodePen](https://codepen.io/bzrpsbjq-the-encoder/pen/qEZeaRb?editors=1011)      |
| FangFang    | [CodePen](https://codepen.io/Fang-the-selector/pen/XJdvpdq?editors=1111)         |
| wind        | [CodePen](https://codepen.io/wind7y/pen/wBGVdEv)                                 |
| DebbyYang   | [CodePen](https://codepen.io/Debby-Yang/pen/ogxKWGq)                             |
| JiaMori     | [CodePen](https://codepen.io/jiamori/pen/MYyNmNo)                                |
| tanuki      | [CodePen](https://codepen.io/tanuki320/pen/ZYWgamj?editors=1011)                 |
| Tippy       | [CodePen](https://codepen.io/Ektodor-Wang/pen/MYyNrrR)                           |
| Sherry      | [CodePen](https://codepen.io/twvyqojd-the-typescripter/pen/zxqgRxB?editors=1010) |
| Leonard     | [CodePen](https://codepen.io/hyyfjqra-the-sans/pen/EaKqOrr)                      |
| cks40660    | [CodePen](https://codepen.io/CKS40660/pen/azNegZK)                               |
| Jenna       | [CodePen](https://codepen.io/abiscc14/pen/azZodyo)                               |
| Zem         | [CodePen](https://codepen.io/dgldwqlg-the-vuer/pen/GgqKdGE)                      |
| ying        | [CodePen](https://codepen.io/Lara-Lin/pen/VYjZGpv?editors=1010)                  |
| esther      | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/OPXLorz?editors=1111)    |
| Vergil      | [CodePen](https://codepen.io/aglgvsie/pen/xbOKyQL)                               |
| 社子畢卡索  | [CodePen](https://codepen.io/pen?template=wBWwROm)                               |
| 老屠        | [CodePen](https://codepen.io/fsgfxvlb-the-selector/pen/LEZPayJ?editors=1011)     |
| 地瓜        | [CodePen](https://codepen.io/ChippyYU/pen/gbMOOwJ?editors=1010)                  |
| KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/azZogKj?editors=1011)               |
| Owen He     | [CodePen](https://codepen.io/owen1120/pen/zxBYEqx?editors=0011)                  |
| nonwa_jeff  | [codepen](https://codepen.io/nonwaaa/pen/LEZYjBE)                                |
| 蜜桃果茶    | [Codepen](https://codepen.io/jia-yiii/pen/MYeWVJj)                               |
| 平平        | [Codepen](https://codepen.io/ypinpin/pen/NPrWVMe)                                |
| Eric        | [Codepen](https://codepen.io/wc-su/pen/myEyPOw)                                  |
| RyanC       | [Codepen](https://codepen.io/RyanYD/pen/raLaMmK)                                 |
| 伊迪        | [Codepen](https://codepen.io/sorryFish/pen/LEZEemK)                              | 
| kashiwatei        | [Codepen](https://codepen.io/kashiwatei/pen/ogLgEYx?editors=0011)                              | 
| 舜仁        | [Codepen](https://codepen.io/shunjen/pen/MYeYQxg)| 
| Michelle   | [Codepen](https://codepen.io/bastar_dize/pen/JoKoBBp?editors=1011)| 
| Charislai   | [Codepen](https://codepen.io/charislai/pen/RNRNOGz)| 
| ZoeKang |[Codepen](https://codepen.io/byehywmx-the-animator/pen/Ggqgamm)|
| Jin |[Codepen](https://codepen.io/Jin-L/pen/ogxKgmw)|
| 主委加碼啦幹 |[Codepen](https://codepen.io/popbob-the-bashful/pen/dPXoPZL?editors=1000)|
| 冠翔 |[Codepen](https://codepen.io/hsrfcdrx-the-bold/pen/azZOBNr)|
| bill0530 |[Codepen](https://codepen.io/rexvfzmf-the-typescripter/pen/YPWXLEM)|
| Miikaa |[Codepen](https://codepen.io/Miikaa/pen/qENdLxJ?editors=1111)|
| 小趴 | [Codepen](https://codepen.io/papa2415/pen/gbMaeNQ)|
| 蛋白 | [Codepen](https://codepen.io/sjlu-0/pen/XJKXmrw)|
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/jErBpLE)|
| Wen | [Codepen](https://codepen.io/hsiao-kevin/pen/QwEgwvN?editors=1111)|
| Doreen | [Codepen](https://codepen.io/cuei-sian-Wang/pen/NPrwNqW)|
