---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 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);
```
題目（使用 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/)）**
```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
---
在 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/hexschool/pen/yLEqvOp) 觀察他們之間的差異，並嘗試自行運用看看
可以參考：[.h1 ~ .h6](https://bootstrap5.hexschool.com/docs/5.1/content/typography/#headings) 、 [.fs-*](https://bootstrap5.hexschool.com/docs/5.1/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/hexschool/pen/yLEqvOp
調整 class 觀看差異
-->
回報區
---
| Discord | CodePen ／ 答案 |
| -------- | -------- |
| 圈圈 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/QWoLzXd?editors=1011) |
| pinyi_9 🎄| [Codepen](https://codepen.io/Wpypy/pen/ExMYGGE?editors=1011) |
| kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/rNRBoXJ) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/jOJNXQV) |
| 貢波波夫 | [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/PoLYVqP) |
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/GReKPLK?editors=1010) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/vYPBbJO?editors=1111) |
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/xxBKMrB?editors=0010) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/dyrbaoE) |
| FangFang | [CodePen](https://codepen.io/FangFang09/pen/dyrbaOx) |
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/rNRBPoP) |
| Leo | [CodePen](https://codepen.io/Aruminiya/pen/wvOwNEq) |
| ryan.chou | [CodePen](https://codepen.io/csw8524/pen/VwRZgQY) |
| yuling |[Codepen](https://codepen.io/igzdflpu/pen/YzgKgXp)|
| cest_jessie |[Codepen](https://codepen.io/itsjessiechen/pen/qBvWgdg)|
| Chia Pin |[Codepen](https://codepen.io/joker-cat/pen/vYPBPzp)|
| 依依 | [CodePen](https://codepen.io/Rita-Yang/pen/ExMYMOg?editors=1011) |
| hedy_h|[CodePen](https://codepen.io/Hedy_H/pen/KKEPEeL) |
| celinelinnn |[CodePen](https://codepen.io/celinephoebe/pen/QWoLPwL)|
|Moreene|[CodePen](https://codepen.io/Moreene/pen/MWxgRGp)|
| dora | [CodePen](https://codepen.io/dorayu/pen/gOEYEaG?editors=1011) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/jOJNRKr?editors=1010) |
| PoRay | [CodePen](https://codepen.io/raycheng/pen/MWxgRxv) |
| MDFK | [CodePen](https://codepen.io/maywang/pen/bGZbzWq?editors=0011) |
| Sabrina | [CodePen](https://codepen.io/SabrinaGuo/pen/yLwBWOP) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/NWJKmmr?editors=0011) |
| Ataraxia | [CodePen]() |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/YzgKbVz) |
| Emily | [CodePen](https://codepen.io/Emily2089/pen/BabBedp) |
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/LYaPozK) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/YzgKbvy) |
| cbs |[Codepen](https://codepen.io/wasdjk/pen/gOEYJZm?editors=1111)|
| RayRay |[Codepen](https://codepen.io/CityRay/pen/KKEPjWJ)|
| Helen |[Codepen](https://codepen.io/milkteamonster/pen/OJqLeZw?editors=1010)|
| Neil | [CodePen](https://codepen.io/Neil1024/pen/OJqLKoL?editors=0011) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/LYaPwMg?editors=11) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/gOEOYmP?editors=1011) |
| Yang | [CodePen](https://codepen.io/Yang-J/pen/JjzjPEx?editors=1000) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/PoLoYRb) |
|荷菓かのり| [CodePen](https://codepen.io/oogxwkvw-the-builder/pen/GReRKaW?editors=1111) |
| Chris | [CodePen](https://codepen.io/cjtseng07/pen/jOJONjK) |
| \_amaaaa | [CodePen](https://codepen.io/Alicia-Chu/pen/MWxWWQN) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/gOEOOyj) |
| KUN. | [CodePen](https://codepen.io/barry91205/pen/yLwLLxm) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/BabaaEG) |
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/KKEKwQz?editors=1111) |
| MY | [CodePen](https://codepen.io/ahmomoz/pen/rNRNayj?editors=1111) |
|wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/vYPBoXz?editors=0010)|
| Bin | [CodePen](https://codepen.io/binbro708/pen/LYaYVVq) |
| fanshu0303 | [Codepen](https://codepen.io/JuiHsuanLee0303/pen/OJqJVPy) |
| elena | [CodePen](https://codepen.io/elena0127abc/pen/BabaNRL) |
| Enzo | [CodePen](https://codepen.io/Enzo-Lo/pen/vYPYEzb?editors=1010) |
| nini1202desu | [CodePen](https://codepen.io/tvxq5206/pen/poYovXP?editors=1010) |
| MikeLin | [CodePen](https://codepen.io/MikeLin0701/pen/gOEOpew) |
| Mattie | [CodePen](https://codepen.io/mattielin/pen/vYPYOeE) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/bGZbqmp) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/ZEPzwzv?editors=1111) |
| Peng | [CodePen](https://codepen.io/H-Peng/pen/ExMxZWx?editors=1010) |
| haru | [CodePen](https://codepen.io/haru_portfoilo/pen/GReRWQe?editors=1011) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/YzgKgEx?editors=1001) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/YzgzVjX) |
| Oria | [CodePen](https://codepen.io/kajing/pen/abMbLdj?editors=1100) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/gOEOGQw) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/abMbVRN?editors=1011) |
| 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/RwdwYyq) |
| jenniferchuang | [codePen](https://codepen.io/yujhen/pen/dyryjeN?editors=1111) |
| carrie | [codePen](https://codepen.io/echocarriet/pen/xxBxQEx) |
| Eden |[Codepen](https://codepen.io/iseden/pen/RwdwqQg)|
| 小夏 |[Codepen](https://codepen.io/michaelhsia/pen/gOEOJJw)|
|hsuhsusophie | [CodePen](https://codepen.io/hsuhsusophie/pen/OJqJevQ?editors=1111) |
| Martin |[Codepen](https://codepen.io/markyourpage/pen/jOJOjgR)|
| jeremyChan | [CodePen](https://codepen.io/nudieisgood/pen/WNmbbrW) |
|yuli | [CodePen](https://codepen.io/qlmjined-the-typescripter/pen/KKEwwxd) |
| Rock | [CodePen](https://codepen.io/xiu43317/pen/mdoyJbg) |
| PayRoom |[CodePen](https://codepen.io/water38198/pen/poYvJxp) |
| pingshian | [CodePen](https://codepen.io/pingshian0131/pen/xxBbEOg) |
| WEI | [CodePen](https://codepen.io/wei-z/pen/MWxYpqe) |
| 翔.(Ben) | [CodePen](https://codepen.io/energy95272z/pen/NWJPvRo?editors=0011) |
| Yuetin | [CodePen](https://codepen.io/Yue9527/pen/RwdNZee) |
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/ZEPYajZ) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/NWJPXgm) |
| ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/ExMaRab?editors=1111) |
| Yang | [CodePen](https://codepen.io/hike1707/pen/poYvKWP) |
| aaron | [CodePen](https://codepen.io/nzygxhnl-the-scripter/pen/VwRYBWe?editors=1111) |
| 教練 | [CodePen](https://codepen.io/monkeybear721/pen/GRegbpZ) |
| adam322 | [CodePen](https://codepen.io/hexschool/pen/yLEqvOp) |
| macihuang | [CodePen](https://codepen.io/macy1215/pen/QWobpGz) |
| 保羅 | [CodePen](https://codepen.io/paul-1997/pen/abMOqow) |
| c8529 | [CodePen](https://codepen.io/claire210401/pen/QWmZvKO?editors=1111) |
| PoWei#8484 | [CodePen](https://codepen.io/harrison-wei-lai/pen/WNmvWog?editors=1111) |
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/yLwYyKd?editors=1010) |
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/GReJVyQ?editors=1111) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/ExMVmjZ?editors=1011) |
| xuan | [CodePen](https://codepen.io/xuan0915/pen/PoLPOEz?editors=0012) |
| .zack_p | [CodePen](https://codepen.io/Designer-PH/pen/mdoexJN?editors=1011) |
| Vivian2857 | [CodePen](https://codepen.io/vivian_lin/pen/NWJGLgz) |
| owen | [CodePen](https://codepen.io/owen-dong/pen/NWJGJBj?editors=1010) |
| Nielsen | [Codepen](https://codepen.io/nielsen_dch/pen/LYapvON)|
| Jason | [Codepen](https://codepen.io/bfnrjakt/pen/bGZVPNV) |
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/dyrGroj?editors=1011) |
| skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/QWoNEjb?editors=0011) |
| hua | [CodePen](https://codepen.io/LHua/pen/bGZwMZg?editors=1111) |
| samgu666 | [CodePen](https://codepen.io/orz311013/pen/YzgGORm) |
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/bGZgeyz) ||
| 關關 | [Codepen](https://codepen.io/ashkuan/pen/ExMWrwL) ||
| Ting | [CodePen](https://codepen.io/liara/pen/BabZzLz)|
| 郭芙蘭 | [CodePen](https://codepen.io/flora_Kuo/pen/VwRrROV?editors=1011)|
| 郭芙蘭 | [CodePen](https://codepen.io/ChrisSQR/pen/bGZvgjQ)|
| WA | [CodePen](https://codepen.io/ldddl/pen/ZEPZNEL)|
| yuan! | [CodePen](https://codepen.io/townyuan/pen/ExMxNzz) |
<!-- 快速複製
| | [CodePen]() |
-->
Sign in with Wallet
Connect another wallet