---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 Day 6 - 陣列操作 3、Bootstrap Utilities 2
參考文章: 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/hexschool/pen/YzvjeEX) 中 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 作答）
## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
<!-- 解答：
newArray = array.filter((item) => {
return item.age <= 18;
});
// 也可以簡寫成
newArray = array.filter(item => item.age <= 18);
- Bootstrap -
https://codepen.io/hexschool/pen/gOKjvoL
-->
回報區
---
| Discord | CodePen / 答案 |
| ---------------- |:----------------------------------------------------------------------------:|
| Aaron Shih#3879 | [CodePen](https://codepen.io/aaron00366/pen/VwBwawd?editors=1111) |
| 冬天#5215 | [CodePen](https://codepen.io/winter_/pen/wvxvKQp) |
| Wendy3#5615 | [CodePen](https://codepen.io/wendy03/pen/QWBWjJx) |
| 大頭#8116 | [CodePen](https://codepen.io/d22495521/pen/LYBYpvN?editors=0012) |
| Sean#3825 | [CodePen](https://codepen.io/sean_1215/pen/yLqLYZG?editors=1111) |
| WeiJ#7376 | [CodePen](https://codepen.io/weijlin/pen/xxJxwoG) |
| 大衛#4869 | [CodePen](https://codepen.io/exnsrpjc/pen/wvxvKZm?editors=1011) |
| 米米#1824 | [CodePen](https://codepen.io/Jameshsu0407/pen/RwBwWmV?editors=1111) |
| 薯餅#3581 | [CodePen](https://codepen.io/ColdingPoTaTo/pen/mdjdeZw) |
| bakiii | [codepen](https://codepen.io/aki168/pen/abKewJz) |
| AuroraC#6539 | [codepen](https://codepen.io/AuroraC/pen/ZEjEbPZ) |
| DIO大人#4776 | [codepen](https://codepen.io/oscar-2283/pen/ExpxPaj) |
| hannahTW#2224 | [codepen](https://codepen.io/hangineer/pen/OJwJMLQ?editors=1001) |
| 阿榮#8277 | [CodePen](https://codepen.io/mogzbvfl-the-reactor/pen/abjbdoO) |
| popeye | [Codepen](https://codepen.io/popeye_ux/pen/ZEjEQpz) |
| 威0#6919 | [codepen](https://codepen.io/n0918679182/pen/mdjdVOp?editors=0012) |
| 黑白兔#0684 | [codepen](https://codepen.io/johnny329/pen/QWBWyGY) |
| ABOOS#6276 | [codepen](https://codepen.io/guhungyin/pen/JjBjGNb?editors=1111) |
| kenki100#0068 | [Codepen](https://codepen.io/ken100/pen/mdjdVEq) |
| yuyu#6310 | [Codepen](https://codepen.io/yuyu0905/pen/wvxvMdY?editors=1111) |
| RJRS#9430 | [CodePen](https://codepen.io/RJRS/pen/bGjGVOv) |
| JY#5712 | [CodePen](https://codepen.io/judy_123/pen/XWBWmvr) |
| RyanC#6960 | [CodePen](https://codepen.io/RyanYD/pen/BaPajQP) |
| 心幻羽#0056 | [CodePen](https://codepen.io/linglingsyu/pen/BaVeLjy?editors=1111) |
| JackC#0411 | [CodePen](https://codepen.io/key0329/pen/BaPajJG) |
| MotoRin#2616 | [CodePen](https://codepen.io/sakimoto/pen/wvxvMPQ?editors=0012) |
| Winnie#1306 | [Codepen](https://codepen.io/WinnieWuWinnie/pen/gOjOPvj?editors=1101) |
| Jill Lee#0809 | [Codepen](https://codepen.io/chi-ling-lee/pen/QWBWyQR?editors=1111) |
| mandylai#4055 | [Codepen](https://codepen.io/mandy-lai-2/pen/KKBKVgY?editors=1111) |
| Alex#9978 | [Codepen](https://codepen.io/datsxzqg-the-selector/pen/abjbdYB?editors=1011) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/dyjyMbe) |
| yaru#6308 | [CodePen](https://codepen.io/lszaietc/pen/rNrNeBj?editors=1011) |
| LHchien33#6232 | [CodePen](https://codepen.io/lin_chien/pen/NWBWNWK) |
| 圈圈#4060 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/abjbvPb) |
| Kimi#9564 | [CodePen](https://codepen.io/kimihu91/pen/xxzNqzQ) |
| enolachen#8031 | [CodePen](https://codepen.io/Chen-Enola/pen/GRBRZoe) |
| int#7518 | [Codepen](https://codepen.io/intHuang/pen/GRBRZpz?editors=0011) |
| 魚子醬#5220 | [Codepen](https://codepen.io/haihsuan/pen/wvxvGKV) |
| jimmyFang#9575 | [Codepen](https://codepen.io/pohxiqqo/pen/KKBKzaM) |
| Hilda#7085 | [Codepen](https://codepen.io/vwquikad-the-vuer/pen/RwBwaRE) |
| PeihanWang#2530 | [Codepen](https://codepen.io/PeihanWang/pen/ExpxKEE?editors=1111) |
| Ron Liang#7277 | [Codepen](https://codepen.io/ron-go/pen/jOpOrNL) |
| Rena#6249 | [Codepen](https://codepen.io/aureate0116/pen/ZEjEObo) |
| PH#2731 | [Codepen](https://codepen.io/lokf9527/pen/zYLYBwe) |
| 小夜#3809 | [Codepen](https://codepen.io/Naito_K/pen/YzjzqWJ?editors=1100) |
| Wendy77#8049 | [Codepen]( https://codepen.io/Wendy__/pen/poZobRL?editors=1111) |
| Potatolee#7749 | [Codepen](https://codepen.io/potatoleee/pen/LYBYZaG?editors=1111) |
| 柚子#3958 | [Codepen](https://codepen.io/as6625998/pen/oNMNLQb?editors=1101) |
| Benson#6763 | [CodePen](https://codepen.io/kumashow/pen/RwBwGwg) |
| masterYan#2480 | [CodePen](https://codepen.io/htzwgoqt-the-looper/pen/YzjzGKZ?editors=1101) |
| albee#9121 | [Codepen](https://codepen.io/albee-chang/pen/YzjzGwV?editors=1111) |
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/RwBwaYX?editors=1101) |
| 泊岸#3466 | [CodePen](https://codepen.io/qoq77416416/pen/vYaYXKJ?editors=1112) |
| LinaChen#1796 | [CodePen](https://codepen.io/LinaChen/pen/OJwJNGM) |
| Cheryl#4007 | [Codepen](https://codepen.io/Cheryl-Hsu/pen/WNKNoov?editors=1011) |
| ㄚ翔#8126 | [Codepen](https://codepen.io/engineerjohnson/pen/wvxvoya) |
| jacky010080#0880 | [CodePen](https://codepen.io/Yen-Jung-Chen/pen/BaPaQbK) |
| Amberhh#2465 | [codepen](https://codepen.io/Amberhh/pen/zYLYrRB) |
| 老皮博士#8050 | [codepen](https://codepen.io/li0406/pen/abjbpKe) |
| 小木馬#8760 | [codepen](https://codepen.io/wmmtbcsd/pen/abjbWow) |
| Austyn#0949 | [codepen](https://codepen.io/fish90547/pen/OJwJmQJ) |
| 無名#6427 | [Codepen](https://codepen.io/Nomoney/pen/PoBojPN) |
|yoyo123456#0577|[Codepen](https://codepen.io/hungyoyo/pen/bGjGRdg?editors=1101)|
|出事了阿伯#9923|[Codepen](https://codepen.io/BradpittLai/pen/ExpxvmP?editors=1111)|
|Knock59487#9114|[Codepen](https://codepen.io/Zack88/pen/abjbyLZ)|
|Bella_#1587|[Codepen](https://codepen.io/Chen-Bella/pen/NWBWbZd)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/RwBwLwY)|
|xin#1214|[Codepen](https://codepen.io/SiaoYao/pen/oNMNGJm)|
|Ruby Chen#7452|[Codepen](https://codepen.io/ruby92429/pen/XWBWRZz?editors=1011)|
|Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/qByBqwL)|
|sherlin#4587|[Codepen](https://codepen.io/sherlinKuo/pen/mdjdqmP?editors=1101)|
|JimmyChang#5558|[Codepen](https://codepen.io/JimmyChangWenChi/pen/BaPamzQ)|
|How#5806|[Codepen](https://codepen.io/howtobefine/pen/NWBWwey?editors=1111)|
|Zack_P#1805|[Codepen](https://codepen.io/tmzazirh-the-animator/pen/LYBYeqz?editors=1111)|
|雞腿#6089|[Codepen](https://codepen.io/C-WEi/pen/dyjyJEd?editors=1101)|
|GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922|[Codepen](https://codepen.io/sho666/pen/poZopXJ?editors=1111)|
| YC | [CodePen](https://codepen.io/YCLu/pen/oNMNPPe) |
|柔柔#1716|[Codepen](https://codepen.io/rouchen/pen/xxJxaed?editors=1111)|
|Hazel.#6020|[CodePen](https://codepen.io/Hazelhsieh/pen/GRBRoqy?editors=1012)|
|楊苡安#2752|[CodePen](https://codepen.io/yi-an-yang/pen/wvxvYRK)|
|AkiHico#9239|[CodePen](https://codepen.io/akihico/pen/bGjGQdB?editors=1010)|
|Yishan#4902|[CodePen](https://codepen.io/gdjrehhw-the-animator/pen/abjbPgJ?editors=1100)|
|Fang#4680|[Codepen](https://codepen.io/std95174/pen/yLqLZJO)|
|KC_8685#9343|[Codepen](https://codepen.io/cathy7411/pen/BaPaMmB)|
|Cream#3449|[Codepen](https://codepen.io/frxdwbbi-the-sasster/pen/yLqLZdo?editors=1111)|
|阿沁#8176|[Codepen](https://codepen.io/a8322342/pen/ZEjEPdw)|
|RainJ#3480|[Codepen](https://codepen.io/RainJCode/pen/eYjYoyY?editors=1111)|
|Hironaka#7367|[Codepen](https://codepen.io/Hironaka0815/pen/MWBYgga?editors=0011)|
|艸良#2846|[Codepen](https://codepen.io/momoninainai/pen/xxJbxwy)|
|Asher Xu#9297|[Codepen](https://codepen.io/kirakira72/pen/MWBYYgZ)|
|christina#6185|[Codepen](https://codepen.io/chrisc0210/pen/JjBoYGe)|
|Chi#7605|[Codepen](https://codepen.io/YoChi84/pen/oNMgBPv)|
|CatBoxy#4207|[Codepen](https://codepen.io/nekoboxy/pen/MWBWKxK)|
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/gOjbmoo?editors=1100)|
|yoyo#1003|[Codepen](https://codepen.io/pen/poZvwNr)|
|阿鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/bGjNLVZ?editors=1100)|
|Barret#1119|[codepen](https://codepen.io/barret0720/pen/WNKbzLZ?editors=1111)
|Bassjim#0118|[codepen](https://codepen.io/unrtxbaq/pen/JjBovYj?editors=1111)
|RainLiao#2616|[codepen](https://codepen.io/billpop741/pen/eYjmmxp)
|Chaya#3412|[Codepen](https://codepen.io/ChiaoJiao/pen/vYaEVLR?editors=1111)
| cbs#9007 |[Codepen](https://codepen.io/wasdjk/pen/qByEJXV)|
|shiuan#4721 |[Codepen](https://codepen.io/prankaChang/pen/ZEjYVyZ?editors=1111)|
|Tami#6742|[Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/oNMgrXQ)|
|Jeff#6077|[Codepen](https://codepen.io/as6625998/pen/oNMNLQb?editors=1101)|
|Judy Wei#6103|[Codepen](https://codepen.io/Judy0718/pen/ExpxNoQ)|
| Eileen#6454 |[Codepen](https://codepen.io/Eileen-io/pen/qBydjwG)|
| yummyniya#7185 | [Codepen](https://codepen.io/yummyniya/pen/zYEjvEq)|
|竹輪#3335|[Codepen](https://codepen.io/chikuwa0120/pen/ZEjGXoW)|
|Fannie#7800|[Codepen](https://codepen.io/dgltu/pen/MWBwXZy?editors=1011)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/BaPoKdq)|
|FiReBrO#0557|[Codepen](https://codepen.io/firebro42/pen/yLqYVom)|
|你看我像是會玩嗎#1866|[Codepen](https://codepen.io/hasagg/pen/MWBaJBv)|
|kevin#6131|[Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/QWBjrLp?editors=1011)|
|ChloeLo#4858|[Codepen](https://codepen.io/chloelo/pen/rNrOKYV)|
|Wei#2330|[Codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/bGjVKYQ)|
|Paul#7426|[CodePen](https://codepen.io/paul-1997/pen/JjBYBrL?editors=1011)|
popcorn_3q#9893|[CodePen](https://codepen.io/arnyrpqt-the-sasster/pen/GRBoKXd?editors=1111)|
| Hsiu#8767 | [CodePen](https://codepen.io/amy-hsiu/pen/xxJZEGa?editors=1111) |
| hungya#0773 | [CodePen](https://codepen.io/hungya777/pen/wvxMXgy?editors=1011) |
| kuku#3118 | [Codepen](https://codepen.io/mengting-ku/pen/BaPjxRz) |
| IreneY#0086 | [CodePen](https://codepen.io/HalfPlannedJourney/pen/wvxMjpo) |
| sophiee#7015 | [codepen](https://codepen.io/sophiee2727/pen/WNKwdbQ?editors=1101) |
| PayRoom#8328 | [CodePen](https://codepen.io/water38198/pen/ZEjWVNo) |
| 狸貓#5863 | [CodePen](https://codepen.io/tanuki320/pen/gOjPvbW?editors=1000) |
| 阿蘇#8531 | [CodePen](https://codepen.io/susu3131/pen/BaPzjGj?editors=0011) |
| yuling#1634 | [codepen](https://codepen.io/igzdflpu/pen/BaPzewp) |
| 阿異#4776 | [Codepen](https://codepen.io/yani21399/pen/WNKGebR)|
| YI#0863 | [Codepen](https://codepen.io/YI0305/pen/NWBRJdY?editors=0111)|
|RBC#7632|[CodePen](https://codepen.io/LinChole/pen/JjBRQQb)|
|MengLin#3001|[CodePen](https://codepen.io/aacj2642/pen/mdjWWax)|
| YU#0618 |[CodePen](https://codepen.io/yoken_/pen/abjWjYa) |
| Cookie SSS#6991 | [CodePen](https://codepen.io/sqhjikpa-the-selector/pen/poZrZeJ?editors=1100) |
| Keep #4336 | [CodePen](https://codepen.io/keep-/pen/GRBOEWQ?editors=1111) |
|Tuhacrt#0008| [codepen](https://codepen.io/Tuhacrt/pen/yLqvzBV)|
|周周#3503| [codepen](https://codepen.io/jhoujhou-the-decoder/pen/abjKEvr)|
|Jujubeleven#1036|[Codepen](https://codepen.io/jujubeleven/pen/rNrqWga?editors=1011)|
|Eason#7884|[Codepen](https://codepen.io/ASLEO/pen/abareGw)|
Sign in with Wallet
Connect another wallet