---
tags: Vue 直播班 - 2022 春季班
---
# 🏅 Day 6
###### tags: `Vue 直播班 - 2022 春季班`
參考文章: https://wcc723.github.io/javascript/2017/06/29/es6-native-array
#### filter 介紹
> 1. 為 JavaScript 的陣列方法，可以用來「篩選陣列元素」。
> 2. 不會影響原來的陣列，而是會透過函式內所回傳的值組合成一個新的陣列。
舉例:
```js=
let price = [900, 1000, 400, 200, 100];
let newPrice = price.filter(item => {
// 會篩選出「判斷為 true 的陣列元素」
return item > 300;
})
console.log(price); // 結果為: [900, 1000, 400, 200, 100]
console.log(newPrice); // 結果為: [900, 1000, 400]
```
題目 (使用 CodePen 作答)
---
請使用 filter() 操作 array 陣列，篩選出屬性 age <= 18 的陣列元素有哪些，並指派給 newArray。
```js=
const array = [
{
name: '小明',
age: 18
},
{
name: '小美',
age: 15
},
{
name: '杰倫',
age: 19
},
{
name: '漂亮阿姨',
age: 22
},
{
name: '老媽',
age: 28
}
];
let newArray = [];
```
Bootstrap Utilities（間距）
---
觀看 [Bootstrap Spacing](https://bootstrap5.hexschool.com/docs/5.1/utilities/spacing/) 通用類別，
嘗試將此 [Codepen](https://codepen.io/Bingbingboom/pen/abyxaWv) 中 CSS margin、padding 改為使用 Bootstrap 通用類別呈現
> 級數可以到 [符號](https://bootstrap5.hexschool.com/docs/5.1/utilities/spacing/#notation) 中的「size 設定：」查看預設設定，
> 舉例來說：
> `mb-1` 就是 `margin-bottom: 4px`（`$spacer * 0.25` , `$spacer` 預設以 16px 為主）
（使用 Codepen 作答）
回報流程
---
請同學依照下圖教學觀看解答、回報答案:
回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)
<!-- 解答
newArray = array.filter((item) => {
return item.age <= 18;
});
// 也可以簡寫成
newArray = array.filter(item => item.age <= 18);
- Bootstrap -
https://codepen.io/Bingbingboom/pen/PoKgdRe
-->
回報區
---
| 報數 |組別/名字 | codepen / 其他回饋 |
|:--------:| -------- | -------- |
|1|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/KKXoLXR|
|2|Karen Huang| https://codepen.io/Coding_Snorlax/full/jOGzoYx |
|3|Liu| https://codepen.io/feng-chi-liu/pen/OJxvYxm?editors=1111 |
|4| POPEYE | https://codepen.io/popeye_ux/pen/ZEXxNJq |
|5| Henry Wu | https://codepen.io/dkcmlaww-the-flexboxer/pen/VwMXOQe |
|6| Iris Huang | https://codepen.io/ythuang/pen/MWEVdQz |
|7|威爾|https://codepen.io/WILL_Wu/pen/oNGqREX|
|8|AKI|https://codepen.io/akichen27/pen/vYeRwjX|
|9| Larry | https://codepen.io/larrylinr5/pen/rNGdgdR |
|10| Bonnie | https://codepen.io/bonnieli1414/pen/QWqmRmr?editors=1111 |
|11| BeanHuang | https://codepen.io/Beanhuang/pen/KKXoLeB?editors=1011 |
|12| Yof | https://codepen.io/yangyof/pen/WNZzBKJ |
|13| kevin嘉軒 | https://codepen.io/kevin-chang-the-sasster/pen/oNGqRVL |
|14| 肉鬆 | https://codepen.io/klrkicog/pen/xxXWNeG?editors=1011 |
|15| Yunei | https://codepen.io/Yunei/pen/jOGzojQ |
|16|群嘉|https://codepen.io/efzdamnp-the-lessful/pen/mdBxYow?editors=1111|
|17|kk|https://codepen.io/potatokaka/pen/KKXojgY?editors=1011|
|18|我是泇吟|https://codepen.io/kljuqbxs/pen/XWeELgX |
|19|Jhen| https://codepen.io/cheng-jhen/pen/LYzdKLy |
|20|kevinhes|https://codepen.io/kevinhes/pen/VwMXJMM?editors=1101|
|21|Wenfish|https://codepen.io/wenfisht/pen/VwMXJKW|
|22|Sheep| https://codepen.io/SheepNDW/pen/dyVmEQX |
|23|andersonshen| https://codepen.io/luxyenni-the-bold/pen/XWeELzd |
|24|Bella Shya| https://codepen.io/BellaXie/pen/wvrmLxO?editors=1111 |
|25|Himi|https://codepen.io/Himi/pen/KKXojbw|
|26|Empty wu|https://codepen.io/emptywu/pen/YzraodL |
|26|Wilson|https://codepen.io/ittaxcjv-the-reactor/pen/gOGeVbE?editors=1111 |
|27|Charlotte Lee|https://codepen.io/charlotte-lee/pen/PoJRrGe |
|28|Henry|https://codepen.io/kaohenry9287/pen/Yzraomj |
|29|Tim Lin|https://codepen.io/TimmyLin/pen/poWLMNE|
|30|Mylène|https://codepen.io/hamajibashi/pen/mdBxNRg|
|31|AllenW|https://codepen.io/AllenW/pen/XWeELZd|
|32|yu|https://codepen.io/yuu9916/pen/KKXoOBW?editors=1100
|33|許敏鑫|https://codepen.io/MIN-HSIN/pen/WNZzVdx
|34|JohnLu| https://codepen.io/jiangshuuu/pen/NWaXXWb?editors=1111
|35|shio| https://codepen.io/shioyen/pen/zYEjOYm
|36| 黃士桓 | https://codepen.io/shr-huan-huang/pen/xxXjKGM |
|37| Gill | https://codepen.io/Gill-Chin/pen/GRMdKMN |
|38|Vicky|https://codepen.io/hyxfish27/pen/GRMxVaJ |
|39|陳暐中|https://codepen.io/wei-z/pen/dyVebjG |
|40|Judy|https://codepen.io/judy86101166/pen/wvrjvBX |
|41|Jerry| https://codepen.io/rteyfwwd-the-scripter/pen/bGoMGBm?editors=1111
|42|Fleur|https://codepen.io/swwlee/pen/abLGzQj |
|43|Rick Tzeng|https://codepen.io/rick917jp6/pen/bGoMdNg
|44|阿牛|https://codepen.io/a-hsien-wu/pen/wvrjvNZ
|45| 咖咖 | https://codepen.io/gon790219/pen/qBPYOpr |
|46| 大衛 | https://codepen.io/exnsrpjc/pen/OJxZyEa?editors=1101 |
|47| Otis | https://codepen.io/humming74/pen/OJxZMJG?editors=1111
|48|Benson|https://codepen.io/soul81624/pen/rNGvOXW|
|49| tingyu | https://codepen.io/dgltu/pen/BawxjbK?editors=1111 |
|50|Yummyniya| https://codepen.io/yummyniya/pen/zYEjvEq |
|51| Alicia Lo |https://codepen.io/dkcyhyre/pen/ExwLKRB
|52| Terry21 |https://codepen.io/feng0409/pen/eYGrZqa?editors=1112 |
|53|Evan Chiang|https://codepen.io/piskesocute/pen/BawxKeJ|
|54|柴貓|https://codepen.io/shibacat/pen/qBPYqBv|
|55|有廖先生(Rain)|https://codepen.io/billpop741/pen/abLGZQJ|
|56|Laura|https://codepen.io/minminn/pen/RwLyZqz|
|57|Howard|https://codepen.io/yawdnhbm/pen/BawxwLQ|
|58|Aaron Tu|https://codepen.io/aarontu/pen/GRMdMvq|
|59|Will|https://codepen.io/ncrdpepc-the-lessful/pen/eYGrGPx|
|60|Elaine Liu|https://codepen.io/elaine7598/pen/RwLyjGZ?editors=1010|
|61|Arista|https://codepen.io/arista-hsieh/pen/VwMxyVR|
|62|Ron|https://codepen.io/long-sian-liang/pen/poWVaKK |
|63|EasonLin|https://codepen.io/easonlinvscode/pen/jOGxzwd |
|64|浩|https://codepen.io/Ahoyyyy/pen/ZEXooRy|
|65|Calon|https://codepen.io/Calon0118/pen/rNGvQBg|
|66|Leo Song|https://codepen.io/sunnylaba/pen/QWqrJvJ |
|67|Abbie|https://codepen.io/Abbie0704/pen/NWaMYaE|
|68|Gui|https://codepen.io/guitimliu/pen/bGoMOoG |
|69|Jess_Wu|https://codepen.io/jess1104/pen/wvrjRrw?editors=0011 |
|70|Steven Chan|https://codepen.io/Steven1220/pen/GRMGpZE?editors=1111 |
|71|Judy ☻|https://codepen.io/hsiaohan/pen/WNZywdO?editors=1100 |
|72|Alvin|https://codepen.io/Alvin20201116/pen/OJxEyXO?editors=1111|
|73|hua|https://codepen.io/hahahazzz123/pen/mdBKwjq?editors=1111|
|74|Steve|https://codepen.io/ycsteve/pen/OJxEWmz|
|75|DDDDK|https://codepen.io/dkklee/pen/JjrZRmv|
|76|Yuan|https://codepen.io/yuanluo13542/pen/GRMGexM|
|77|peter.chen1024|https://codepen.io/JIAN-RONG/pen/qBPyXpX?editors=1111|
|78|Hedy|https://codepen.io/hhhsuan41/pen/bGojoop|
|79|dOvOb|https://codepen.io/gezzgrwj-the-styleful/pen/BawOovm
|80|FuChang|https://codepen.io/fuchang830714/pen/OJxoyKz|
|81|阿武|https://codepen.io/samwnkyat/pen/dyVqOMK|
| 82 | Sihle Huang | https://codepen.io/bugbug777/pen/XWePgJB |
| 83 | Erin Huang | https://codepen.io/ErinHuang/pen/oNGPwzK |
|84|Scottie|https://codepen.io/wow767t/pen/MWEqEVm?editors=1011|
|85|Jasper|https://codepen.io/li-jasper/pen/dyVqrQo|
|86|Riley|https://codepen.io/jjpxbprd/pen/xxXyKjY|
|87|Dobe|https://codepen.io/lisebee/pen/60cab9190cf7c0485595a4327d2dfb57?editors=1101|
|88|YC|https://codepen.io/YCLu/pen/zYEMBdj|
|89|Willian_O^2|https://codepen.io/CodingTrain_1/pen/zYEMVZP|
|90|ShaoYu|https://codepen.io/shaoyukao/pen/YzrRoyJ|
|91|Anna|https://codepen.io/kycrleao/pen/QWqzWqE?editors=0011|
|92|王老明|https://codepen.io/adonismis/pen/PoJXRwV?editors=1011|
|93|Jason Chen|https://codepen.io/jason60810/pen/vYevoBq |
|93|mei|https://codepen.io/Shila-Chen/pen/gOGZVzw |
|94|Jerry Yen|https://codepen.io/JerryYen/pen/MWExYRX |
|95|安志|https://codepen.io/lwmtsgek/pen/gOGEKoW?editors=1111 |
|96|Clara|https://codepen.io/ClaraChen/pen/jOGRJRg?editors=1111 |
|97|肉桂卷|https://codepen.io/ginnlee/pen/MWERxBg?editors=1111 |
|98|Sean Chang|https://codepen.io/seanchang7/pen/PoJgvJG?editors=1111 |
|99|王老明|https://codepen.io/adonismis/pen/KKXLPgv |
|100|Carol Li|https://codepen.io/carolli834/pen/abLgdeE|
|101|PeiChi|https://codepen.io/pei-chi-tsai/pen/BawgrzR?editors=1010|
|102|Yashien Lin|https://codepen.io/YashienLin/pen/eYGqJgY|
|103|阿劍| https://codepen.io/seonkuraito/pen/dyVaMLV |
|104|andyii| https://codepen.io/gultrotpybyvue/pen/OJOLxdL
|
|105|2/WA|https://codepen.io/ldddl/pen/YzEKYmY|
|106|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/mdqyzWq?editors=1001
|107|許閔翔|https://codepen.io/oupbzfxq-the-scripter/pen/OJObJVM?editors=1111
|108| Van | https://codepen.io/fbacojji-the-selector/pen/WNXyMEg?editors=1101 |
Sign in with Wallet
Connect another wallet