---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 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 </h4>`
> （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 ／ 答案 |
| -------- | -------- |
|k kill9ker#8028 |[CodePen](https://codepen.io/kill9ker/pen/RwJXMNG)|
|Aaron Shih#3879 |[CodePen](https://codepen.io/aaron00366/pen/wvXVpyV?editors=1111)|
| WeiJ#7376 | [CodePen](https://codepen.io/weij0/pen/OJEKNeg) |
| 薯餅#3581 | [CodePen](https://codepen.io/ColdingPoTaTo/pen/WNyVxez) |
| Wendy#5615 | [CodePen](https://codepen.io/wendy03/pen/zYagBOQ) |
| yuyu#6310 | [CodePen](https://codepen.io/yuyu0905/pen/WNyVxvJ) |
| bakiii | [CodePen](https://codepen.io/aki168/pen/JjZgKXd) |
| AuroraC#6539 | [CodePen](https://codepen.io/AuroraC/pen/YzvmWqp?editors=1010) |
| albee#9121 | [CodePen](https://codepen.io/albee-chang/pen/zYagBvg?editors=1111) |
| 泊岸#3466 | [CodePen](https://codepen.io/qoq77416416/pen/KKeOzje?editors=1111) |
| PeihanWang#2530 | [CodePen](https://codepen.io/PeihanWang/pen/rNKXLOg) |
| Kimi#9564 | [CodePen](https://codepen.io/kimihu91/pen/xxzNqzQ) |
| 心幻羽#0056 | [CodePen](https://codepen.io/linglingsyu/pen/BaVeLjy?editors=1000) |
| ABOOS#6276 | [CodePen](https://codepen.io/guhungyin/pen/Vwdojvj?editors=1111) |
| 阿榮#8277 | [CodePen](https://codepen.io/mogzbvfl-the-reactor/pen/KKeOMmb) |
| hannahTW#2224 | [Codepen](https://codepen.io/hangineer/pen/eYKqGKj?editors=1111) |
| 大頭#8116 | [CodePen](https://codepen.io/d22495521/pen/abKeZGN?editors=1011) |
| MotoRin#2616 | [CodePen](https://codepen.io/sakimoto/pen/ZERgOag?editors=1011) |
| kenki100#0068 | [Codepen](https://codepen.io/ken100/pen/gOKVMGo) |
| 柔柔#1716 | [Codepen](https://codepen.io/rouchen/pen/wvXVWQY?editors=1011) |
| 黑白兔#0684 | [Codepen](https://codepen.io/johnny329/pen/XWYvKEJ) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/wvXVWRQ) |
| 威0#6919 | [codepen](https://codepen.io/n0918679182/pen/yLEmJrB?editors=0012) |
| ㄚ翔#8126 | [codepen](https://codepen.io/engineerjohnson/pen/NWzQrVJ) |
| Eileen#6454 | [codepen](https://codepen.io/Eileen-io/pen/MWXNeZg) |
| Alex#9978 | [codepen](https://codepen.io/datsxzqg-the-selector/pen/zYagKOK?editors=1111) |
| 米米#1824 | [codepen](https://codepen.io/Jameshsu0407/pen/oNyKzNG) |
| int#7518 | [Codepen](https://codepen.io/intHuang/pen/VwdoKvQ?editors=0011) |
| JackC#0411 | [codepen](https://codepen.io/key0329/pen/RwJXGpe) |
| LHchien33#6232 | [codepen](https://codepen.io/lin_chien/pen/jOKgMwP) |
| 圈圈#4060 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/rNKXLEx) |
| yaru#6308 | [CodePen](https://codepen.io/lszaietc/pen/bGKXwab?editors=1111) |
| JY#5712 | [CodePen](https://codepen.io/judy_123/pen/RwJXGYd) |
| RyanC#6960 | [CodePen](https://codepen.io/RyanYD/pen/gOKVwoy) |
| jimmyFang#9575 | [CodePen](https://codepen.io/pohxiqqo/pen/LYrwRJB?editors=1011) |
| mandylai#4055 | [CodePen](https://codepen.io/mandy-lai-2/pen/ZERgppO) |
| RJRS#9430 | [CodePen](https://codepen.io/RJRS/pen/LYrwbYX) |
| Yiru#0236 | [Codepen](https://codepen.io/yiru94/pen/qBKeNMR) |
| 楊苡安#2752 | [Codepen](https://codepen.io/yi-an-yang/pen/ZERgBjj?editors=1111) |
| Yishan#4902 | [Codepen](https://codepen.io/gdjrehhw-the-animator/pen/GRGVjbV?editors=0011) |
| PH#2731 | [Codepen](https://codepen.io/lokf9527/pen/poKMNxV) |
| Potatolee#7749 | [Codepen](https://codepen.io/potatoleee/pen/xxzvgZx?editors=1011) |
| Jill Lee#0809 | [Codepen](https://codepen.io/chi-ling-lee/pen/GRGVrrv?editors=1111) |
| Rena#6249 | [Codepen](https://codepen.io/aureate0116/pen/mdKNRpB) |
| 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/BaVXpZr?editors=1010) |
| jacky010080#0880 | [CodePen](https://codepen.io/Yen-Jung-Chen/pen/xxzvgzO) |
| 小潘#8743 | [CodePen](https://codepen.io/terrypan1/pen/YzvmZze) |
| LinaChen#1796 | [CodePen](https://codepen.io/LinaChen/pen/vYroxBR) |
| RainLiao#2616 | [CodePen](https://codepen.io/billpop741/pen/QWxedyx) |
| 阿異#4776 | [CodePen](https://codepen.io/yani21399/pen/qBKemVw) |
| masterYan#2480 | [CodePen](https://codepen.io/htzwgoqt-the-looper/pen/MWXNmbO?editors=0011) |
| Tunafin#5340 | [CodePen](https://codepen.io/tunafin/pen/jOKgmXZ) |
| Hilda#7085 | [CodePen](https://codepen.io/vwquikad-the-vuer/pen/poKMwjx) |
| 小夜#3809 | [CodePen](https://codepen.io/Naito_K/pen/jOKgMQr?editors=1011) |
| Bella_#1587 | [CodePen](https://codepen.io/Chen-Bella/pen/YzvmxOR) |
| Barret#1119 | [Codepen](https://codepen.io/barret0720/pen/jOKgmjx?editors=1112) |
| Benson#6763 | [CodePen](https://codepen.io/kumashow/pen/vYroepE) |
| 無名#6427 | [CodePen](https://codepen.io/Nomoney/pen/PoavJzp) |
| 小木馬#8760| [CodePen](https://codepen.io/wmmtbcsd/pen/dyKxJMJ)|
| Yuna Huang#2692| [CodePen](https://codepen.io/Yuna1002/pen/vYrogre)|
|sherlin#4587|[CodePen](https://codepen.io/sherlinKuo/pen/QWxeamb?editors=1111)|
|竹輪#3335|[CodePen](https://codepen.io/chikuwa0120/pen/GRGVyMP)|
|CatBoxy#4207|[CodePen](https://codepen.io/nekoboxy/pen/vYropwP?editors=0010)|
|老皮博士#8050|[CodePen](https://codepen.io/li0406/pen/YzvmYLJ?editors=1111)|
| cbs#9007 |[Codepen](https://codepen.io/wasdjk/pen/ZERgvoL)|
|鑫鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/dyKxJPZ?editors=0012)|
|Cheryl#4007|[Codepen](https://codepen.io/Cheryl-Hsu/pen/vYrodQN)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/zYagWOX)|
|IreneY#0086|[CodePen](https://codepen.io/HalfPlannedJourney/pen/MWXNQmr)|
|xin#1214|[CodePen](https://codepen.io/SiaoYao/pen/ExRqLjN)|
|大衛#4869|[CodePen](https://codepen.io/exnsrpjc/pen/jOKgzEx?editors=0011)|
|Austyn#0949|[CodePen](https://codepen.io/fish90547/pen/XWYvqPg?editors=0011)|
Zack_P#1805|[CodePen](https://codepen.io/tmzazirh-the-animator/pen/ZERgRPM?editors=1111)|
|DIO大人#4776|[CodePen](https://codepen.io/oscar-2283/pen/JjZgBvX)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/JjZqKZr) |
| Cream#3449 | [CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/BaVXEyq?editors=1111) |
|Hazel.#6020|[CodePen](https://codepen.io/Hazelhsieh/pen/JjZqEbW?editors=1111)|
|阿沁#8176|[CodePen](https://codepen.io/a8322342/pen/OJEKGzq)|
|魚子醬#5220|[CodePen](https://codepen.io/haihsuan/pen/PoaMgdg)|
|JimmyChang#5558|[CodePen](https://codepen.io/JimmyChangWenChi/pen/yLEmrYL?editors=1011)|
|AkiHico#9239|[CodePen](https://codepen.io/akihico/pen/ExRqqYK)|
|Bassjim#0118|[CodePen](https://codepen.io/unrtxbaq/pen/LYBPpgR)|
|yoyo123456#0577|[CodePen](https://codepen.io/unrtxbaq/pen/LYBPpgR)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/rNrBVYd?editors=1011) |
|Judy Wei#6103|[CodePen](https://codepen.io/Judy0718/pen/YzjKXBP)|
|柚子#3958|[CodePen](https://codepen.io/as6625998/pen/JjZgqvx?editors=1011)|
|冬天#5215|[CodePen](https://codepen.io/winter_/pen/oNMvLMz)|
|Chaya#3412|[Codepen](https://codepen.io/ChiaoJiao/pen/rNrBegq?editors=1111)|
|Fannie#7800|[CodePen](https://codepen.io/dgltu/pen/qByWjvN?editors=1111)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/vYaBJvz?editors=1101) |
enolachen#8031|[codepen](https://codepen.io/Chen-Enola/pen/WNKeZYj) |
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/poZzdPZ)|
|Hironaka#7367|[codepen](https://codepen.io/Hironaka0815/pen/mdjbVov?editors=0011)|
|Mia小福#4473|[codepen](https://codepen.io/a0950271/pen/BaPBrPJ)|
|How#5806|[codepen](https://codepen.io/howtobefine/pen/YzjKLNE?editors=1111)|
|雞腿#6089|[codepen](https://codepen.io/C-WEi/pen/oNMvmBa?editors=0011)|
| Knock59487#9114 |[CodePen](https://codepen.io/Zack88/pen/VwBZoyr?editors=1112)|
| 喬喬#2824 |[CodePen](https://codepen.io/joanne-wei/pen/eYjYvEm)|
|GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922|[Codepen](https://codepen.io/sho666/pen/VwBwbJJ?editors=1010)|
|yuling#1634|[Codepen](https://codepen.io/igzdflpu/pen/QWxervL)|
|yoyo#1003|[Codepen](https://codepen.io/pen/wvxvQJg)|
|Fang#4680|[Codepen](https://codepen.io/std95174/pen/zYLYyVo)|
|KC_8685#9343|[Codepen](https://codepen.io/cathy7411/pen/LYBYqVe)|
|RainJ#3480|[Codepen](https://codepen.io/RainJCode/pen/JjBjxbM?editors=1111)|
|艸良#2846|[Codepen](https://codepen.io/momoninainai/pen/XWBJrMR?editors=0101)|
|Asher Xu#9297|[Codepen](https://codepen.io/kirakira72/pen/gOjbOPp)|
|christina#6185|[Codepen](https://codepen.io/chrisc0210/pen/ExpajWX)|
|Chi#7605|[Codepen](https://codepen.io/YoChi84/pen/QWBwWJQ)|
|Tami#6742|[Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/yLqyXBb)|
|Jeff#6077|[Codepen](https://codepen.io/nonwaaa/pen/ExpaGXY)|
| yummyniya#7185 | [Codepen](https://codepen.io/yummyniya/pen/eYGMOvX)
| paul#7426 | [Codepen](https://codepen.io/paul-1997/pen/RwBPxeV?editors=1101)|
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/RwBPqyX?editors=0011)|
|Silvialu#4521|[codepen](https://codepen.io/Silvia091640/pen/eYjmjPL)|
|FiReBrO#0557|[codepen](https://codepen.io/firebro42/pen/abjvdGe)|
|Shuo#1596|[codepen](https://codepen.io/chiangchungshuo/pen/XWBmbRm?editors=1111)|
|你看我像是會玩嗎#1866|[codepen](https://codepen.io/hasagg/pen/WNKvjxm)|
|kevin#6131|[codepen](https://codepen.io/xlqjezvc-the-encoder/pen/zYLvWej?editors=1011)|
|ChloeLo#4858|[codepen](https://codepen.io/chloelo/pen/eYjprvj)|
|Wei#2330|[codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/PoBPaje)|
|popcorn_3q#9893|[codepen](https://codepen.io/arnyrpqt-the-sasster/pen/zYLvayK?editors=1112)|
|kuku#3118|[Codepen](https://codepen.io/mengting-ku/pen/rNrxBbe)
|小天#7177|[codepen](https://codepen.io/linyujing/pen/NWBxqPY)|Hsiu8767https://codepen.io/amy-hsiu/pen/yLqeBaw?editors=1112
|hungya#0773|[codepen](https://codepen.io/hungya777/pen/jOpWYWB?editors=1111)|
|狸貓#5863|[Codepen](https://codepen.io/tanuki320/pen/QWBWLPv?editors=0010)|
|PayRoom|[CodePen](https://codepen.io/water38198/pen/RwBaEvw)
|Eason#7884|[CodePen](https://codepen.io/ASLEO/pen/qByNrxM?editors=1111)|
|YI#0863|[CodePen](https://codepen.io/YI0305/pen/gOjwqyL?editors=1111)|
|RBC#7632|[CodePen](https://codepen.io/LinChole/pen/ExpgzQd)|
|Wendy77#8049|[Codepen](https://codepen.io/Wendy__/pen/BaPQjWM)|
|MengLin#3001|[CodePen](https://codepen.io/aacj2642/pen/PoBppBe)|
| YU#0618 | [Codepen](https://codepen.io/yoken_/pen/NWBjKwQ?editors=1011) |
|Keep#4336|[CodePen](https://codepen.io/keep-/pen/abjyJMg?editors=1011)|
|Cookie SSS#6991|[CodePen](https://codepen.io/sqhjikpa-the-selector/pen/xxJLJKg?editors=1010)|
|周周#3503|[CodePen](https://codepen.io/jhoujhou-the-decoder/pen/eYjKWqW?editors=1101)|
|Jujubeleven#1036|[Codepen](https://codepen.io/jujubeleven/pen/poZxyNO?editors=1001)|
Sign in with Wallet
Connect another wallet