# 🏅 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);

使用 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)）**

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)|