---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 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 / 答案 |
| ---------------- |:----------------------------------------------------------------------------:|
| bftsai | [CodePen](https://codepen.io/BF-Tsai/pen/zYbxrQE?editors=1111) |
| 貢波波夫 | [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/oNVgbrM) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/mdoyVZo) |
| 圈圈 | [CodePen](https://codepen.io/wjejfczn-the-bold/pen/ExMaPqb?editors=0011) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/bGZNEyG) |
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/rNRaxXw?editors=1111) |
| pinyi_9 | [CodePen](https://codepen.io/Wpypy/pen/dyrPGxq?editors=1111) |
| kuanju27 | [CodePen](https://codepen.io/Eero-Chiao/pen/PoLwNwM) |
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/gOEbrYN?editors=1010) |
| ryan.chou | [CodePen](https://codepen.io/csw8524/pen/MWxYyyo) |
|FangFang | [CodePen](https://codepen.io/FangFang09/pen/ExMaKPQ) |
|Emily | [CodePen](https://codepen.io/Emily2089/pen/QWowNdG) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/LYaENma?editors=0011) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/MWxYyLV) |
| celinelinnn |[CodePen](https://codepen.io/celinephoebe/pen/NWJPNej)|
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/qBvEZQw) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/MWxYyLG) |
| Hedy | [CodePen](https://codepen.io/Hedy_H/pen/KKEwzry) |
|Moreene|[CodePen](https://codepen.io/Moreene/pen/yLwyOmj)|
|Leo|[CodePen](https://codepen.io/Aruminiya/pen/jOJErEZ)|
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/rNRaeQr?editors=1100) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/yLwyJPG) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/ZEPYOGq) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/vYPEKwJ?editors=1111) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/rNRaLXa) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/NWJPRbJ?editors=1111) |
| pingshian | [CodePen](https://codepen.io/pingshian0131/pen/abMzmwJ) |
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/OJqPRWa)|
|Eazy|[Codepen](https://codepen.io/Eazychen/pen/ExMagRm?editors=1111)|
|wei_Rio|[Codepen](https://codepen.io/wei_wu/pen/MWxYjRb?editors=1100)|
| Chris | [CodePen](https://codepen.io/cjtseng07/pen/wvOBoaB) |
| Helen | [CodePen](https://codepen.io/milkteamonster/pen/ZEPYpde?editors=1011) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/XWGJjYp?editors=1011) |
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/XWGJNPB) |
| KUN. | [CodePen](https://codepen.io/barry91205/pen/vYPEyJq) |
|smalljie|[CodePen](https://codepen.io/smalljie/pen/JjzoERP)|
| dora | [CodePen](https://codepen.io/dorayu/pen/LYaENda) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/KKEwaRr?editors=1101) |
| MY | [CodePen](https://codepen.io/ahmomoz/pen/PoLwWQJ?editors=1111) |
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/MWxYpYg) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/WNmbRPa) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/ExMaNBr) |
| Eden | [Codepen](https://codepen.io/iseden/pen/gOEbmLj)|
| WEI | [Codepen](https://codepen.io/wei-z/pen/qBvErQp)|
| cbs |[Codepen](https://codepen.io/wasdjk/pen/ExMaWRm?editors=1111)|
| fanshu0303 | [Codepen](https://codepen.io/JuiHsuanLee0303/pen/eYXmRPw) |
| 翔.(Ben) | [Codepen](https://codepen.io/energy95272z/pen/abMzydZ?editors=0011) |
| haru | [CodePen](https://codepen.io/haru_portfoilo/pen/oNVgZry?editors=1111) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/poYvWER?editors=1111) |
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/KKEwXaa) |
| Yuetin | [CodePen](https://codepen.io/Yue9527/pen/yLwyzaM) |
| hsuhsusophie | [CodePen](https://codepen.io/hsuhsusophie/pen/ExMawwR) |
| PoRay | [CodePen](https://codepen.io/raycheng/pen/bGZNoPW?editors=1101) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/dyrPZOo) |
| MDFK | [CodePen](https://codepen.io/maywang/pen/XWGJePY?editors=1011) |
| carrie | [CodePen](https://codepen.io/echocarriet/pen/XWGJzLJ) |
| Martin | [CodePen](https://codepen.io/markyourpage/pen/ExMabqV) |
| Neil | [CodePen](https://codepen.io/Neil1024/pen/LYaEQqv?editors=1101) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/qBvExzG) |
| elena | [CodePen](https://codepen.io/elena0127abc/pen/xxBbYeM) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/WNmbMEG?editors=1111) |
| MikeLin | [CodePen](https://codepen.io/MikeLin0701/pen/ZEPYjYj)|
| ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/oNVgMXv?editors=1111)|
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/ZEPYjKm?editors=1111)|
| Rock | [CodePen](https://codepen.io/xiu43317/pen/dyrPjeM) |
| Aaron | [CodePen](https://codepen.io/nzygxhnl-the-scripter/pen/ExMapBj?editors=1111) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/yLwyGxY) |
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/NWJPogx) |
| Yafan | [CodePen](https://codepen.io/yafanchung/pen/dyrPEbK) |
| nini1202desu | [CodePen](https://codepen.io/tvxq5206/pen/OJqPYeX) |
| \_amaaaa | [CodePen](https://codepen.io/Alicia-Chu/pen/xxBbgoV) |
| ChihYang | [CodePen](https://codepen.io/hike1707/pen/bGZdbgd?) |
| 依依 | [CodePen](https://codepen.io/Rita-Yang/pen/qBvdBbG?editors=1111) |
| jeremyChan | [CodePen](https://codepen.io/nudieisgood/pen/xxBGxVe?editors=1112) |
| PayRoom | [CodePen](https://codepen.io/water38198/pen/poYJbgp)|
| adam322 | [CodePen](https://codepen.io/hexschool/pen/YzvjeEX)|
| Yang | [CodePen](https://codepen.io/Yang-J/pen/wvOBZvX?editors=1100) |
| yuli | [CodePen](https://codepen.io/qlmjined-the-typescripter/pen/YzgXpYB) |
| 保羅 | [CodePen](https://codepen.io/paul-1997/pen/ZEPGrbp) |
| c8529 | [CodePen](https://codepen.io/claire210401/pen/MWQqEjm?editors=0012) |
| Enzo | [CodePen](https://codepen.io/Enzo-Lo/pen/NWJqyZb) |
| macihuamg | [CodePen](https://codepen.io/macy1215/pen/MWxwxjQ) |
| PoWei#8484 | [CodePen](https://codepen.io/harrison-wei-lai/pen/rNRVERR?editors=1111) |
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/wvOKadV) |
| 黃士桓 | [CodePen](https://codepen.io/shr-huan-huang/pen/GRepqXj) |
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/YzgyZxZ) |
| 教練 | [CodePen](https://codepen.io/monkeybear721/pen/ZEPGMMG) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/XWGmRdN?editors=1011) |
| xuan | [CodePen](https://codepen.io/xuan0915/pen/ZEPbaMj?editors=0011) |
| Peng | [CodePen](https://codepen.io/H-Peng/pen/BabomOW) |
| .zack_p | [CodePen](https://codepen.io/Designer-PH/pen/jOJbzaL?editors=1111) |
| peggy | [CodePen](https://codepen.io/peggylai/pen/ExMVEqz?editors=1101) |
| Vivian2857 | [CodePen](https://codepen.io/vivian_lin/pen/WNmQLbM) |
| Nielsen | [Codepen](https://codepen.io/nielsen_dch/pen/yLwYrxr)|
| owen | [Codepen](https://codepen.io/owen-dong/pen/MWxadyw?editors=1010)|
| Jason | [CodePen](https://codepen.io/bfnrjakt/pen/GReomZd) |
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/dyrGrOg?editors=1111) |
| skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/poYybNE?editors=0010) |
| hua | [CodePen](https://codepen.io/LHua/pen/mdorKoM?editors=1111) |
| samgu666 | [CodePen](https://codepen.io/orz311013/pen/KKEgGqe) |
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/WNmRoop) |
| 關關 | [Codepen](https://codepen.io/ashkuan/pen/MWxmoRL) |
| Ting | [CodePen](https://codepen.io/liara/pen/eYXRKWd) |
| 郭芙蘭 | [CodePen](https://codepen.io/flora_Kuo/pen/mdoqYMw?editors=1011) |
| WA | [CodePen](https://codepen.io/ldddl/pen/NWJmVpx) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/KKYpeWQ) |
<!-- 快速複製
| user | [CodePen]() |
--
Sign in with Wallet
Connect another wallet