---
tags: React 直播班 - 2024 冬季班
---
# 🏅 Day 4 - 陣列操作 1、Bootstrap font-size

### 教學
這題需要額外理解的知識點為「[callback 函式](https://developer.mozilla.org/zh-TW/docs/Glossary/Callback_function)」，可以簡單的理解為:「把函式作為參數調用」。
舉例：

function greeting(arr) {
  alert('Hello ' + arr.name);
}
// callback 函式
function processUserInput(callback, arr) {
  callback(arr);
}

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

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

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
---
在 Bootstap 中可以使用 `.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)

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
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 觀看差異
-->

回報區
---
| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/EaYWZNG) |
| Sonia | [Codepen](https://codepen.io/YUJOU/pen/MYgpoEX?editors=1011) |
| 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/emOvVBg) |
| 泊岸 | [CodePen](https://codepen.io/qoq77416416/pen/ByBWYpg?editors=1011) |
| Toung | [CodePen](https://codepen.io/Toung/pen/PwYpQbg) |
| Jun | [CodePen](https://codepen.io/jun12079/pen/pvzeaaE) |
| tim | [CodePen](https://codepen.io/jskrtivy-the-animator/pen/ZYzerjy?editors=1010) |
| 4chan | [CodePen](https://codepen.io/ijuolaqc-the-looper/pen/vEBxdRb) |
| Jasmine Lin | [CodePen](https://codepen.io/Jasmine-Lin-the-vuer/pen/KwPWQra) |
|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/yyBMvxM?editors=1010)|
|ollie|[CodePen](https://codepen.io/daiyy97/pen/WbepzXZ?editors=1011)|
| Clove_墨 | [CodePen](https://codesandbox.io/p/sandbox/q3slxt) |
| Amanda | [CodePen](https://codepen.io/cym199922/pen/JoPWvOR) |
| ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/dPbvKOe?editors=1111)|
| Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/emOvKXe)|
| Satar | [CodePen](https://codepen.io/SatarKuo/pen/RNbpBVP?editors=1011) |
| Nocab | [CodePen](https://codepen.io/PeihanWang/pen/ogvZqxR?editors=1011) |
| Tammy | [CodePen](https://codepen.io/Tammy_Tsai/pen/EaYWdvw) |
| Kaya | [CodePen](https://codepen.io/kayaribi/pen/PwYpyRr) |
| 邵 |[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/dPbvQRx?editors=1111)|
| GAVI| [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/MYgJxvq?editors=1011)|
| andy| [Codepen](https://codepen.io/andygggg/pen/xbKqmzE)|
| yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/WbepKqz) |
| Rogan | [CodePen](https://codepen.io/RoganHsu/pen/vEBxPKB?editors=1111) |
| 蘑菇星星 | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/KwPWBpq?editors=1111) |
| Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/pvzPjQV) |
| Cami | [CodePen](https://codepen.io/irisLife/pen/jENmrNV) |
| .michelle0417 | [CodePen](https://codepen.io/michelle0417/pen/PwYmzRz) |
| Aaron 謝宗佑 | [CodePen](https://codepen.io/aaron-hsieh/pen/RNbVGbG) |
| 阿佑 | [CodePen](https://codepen.io/ans9323052/pen/pvzPdve) |
| Rothy | [CodePen](https://codepen.io/ChloeHsu1/pen/bNbWmMX) |
| abab016001 | [CodePen](https://codepen.io/abab016001Jin/pen/yyBbQyM?editors=0012) |
| 蕾蕾 leilei | [CodePen](https://codepen.io/Leileisme/pen/WbejzXp) |
| CrystalLala | [CodePen](https://codepen.io/crystallala/pen/NPKjEGx) |
|mercury2508.| [CodePen](https://codepen.io/Mercury2508/pen/RNbVEeZ) |
| shiou | [CodePen](https://codepen.io/shiou-ho/pen/KwPmEBX) |
| jimmy.0706 | [CodePen](https://codepen.io/JimmyMao/pen/ZYzKPox?editors=1011) |
| Johnson | [CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/EaYXWMa?editors=1010) |
| LinaChen | [CodePen](https://codepen.io/LinaChen/pen/bNbRRqV) |
| 爆漿 | [CodePen](https://codepen.io/nvdwwlbx-the-vuer/pen/KwPqXLd?editors=1111) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/xbKLYzR) |
|a1phaki(小k)|[codepen](https://codepen.io/a1phaki/pen/OPLjZmR)|
| 1457 | [CodePen](https://codepen.io/1457dys/pen/NPKvedp) |
| 嚼勁先生 | [CodePen](https://codepen.io/James520284/pen/WbeEmzQ) |
| Glen_69515 | [CodePen](https://codepen.io/glenyaochih/pen/wBwrEoM) |
| Joannehu | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/pvzdRdo?editors=1011) |
| Mike | [CodePen](https://codepen.io/mike2049/pen/zxORzjx?editors=0011) |
| yun-lin | [CodePen](https://codepen.io/yunlinhsu/pen/YPKOeer?editors=1011) |
| Edie | [CodePen](https://codepen.io/eku10rei/pen/xbKmPpE?editors=1010) |
| .ztion | [CodePen](https://codepen.io/ztion/pen/qEWvovZ?editors=1011) |
| chris | [CodePen](https://codepen.io/chris-chen-the-selector/pen/GgKLwvZ) |
| yaoling.liang | [CodePen](https://codepen.io/Yao-Ling-L-/pen/JojGzeP?editors=1112) |
| Jim | [CodePen](https://codepen.io/JimChou/pen/bNGGzgr) |
| KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/JojbgLx?editors=0011) |
| 姜承 | [CodePen](https://codepen.io/Troy0718/pen/GgRdeZM?editors=1012) |
| Chuang | [CodePen](https://codepen.io/uidoytjq-the-solid/pen/QwWVeyV?editors=1011) |
| jinliu214 | [CodePen](https://codepen.io/jinliu214/pen/NPPyMvL?editors=0011) |

<!-- 快速複製
| | [CodePen]() |
-->