# 🏅 Day 6 - 陣列操作 3、Bootstrap Utilities 2

參考文章: https://wcc723.github.io/javascript/2017/06/29/es6-native-array

### filter 介紹
> 1. 為 JavaScript 的陣列方法，可以用來「篩選陣列元素」。
> 2. 不會影響原來的陣列，而是會透過函式內所回傳的值組合成一個新的陣列。

舉例：

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。

const array = [
  {
    name: '小明',
    age: 18
  },
  {
    name: '小美',
    age: 15
  },
  {
    name: '杰倫',
    age: 19
  },
  {
    name: '漂亮阿姨',
    age: 22
  },
  {
    name: '老媽',
    age: 28
  }
];
let newArray = [];

Bootstrap Utilities（間距）
---
觀看 [Bootstrap Spacing](https://getbootstrap.com/docs/5.3/utilities/spacing/) 通用類別，
嘗試將此 [CodePen](https://codepen.io/yen-kg/pen/GRVQYyY) 中 CSS margin、padding 改為使用 Bootstrap 通用類別呈現

> 級數可以到 [符號](https://getbootstrap.com/docs/5.3/utilities/sizing/) 中的「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/yen-kg/pen/JjgpmLr
-->

<!-- | 名字 |[Codepen](連結) | -->
| 名字 | 連結 |
| ------------ | ---------------------------------------------------------------------------- |
| Chia | [Codepen](https://codepen.io/Chia-the-encoder/pen/dPXbexN) |
| jchunnn | [Codepen](https://codepen.io/jchunnn/pen/ByzBVBV) |
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/yyJBEEN?editors=1111) |
| cks40660 | [CodePen](https://codepen.io/CKS40660/pen/EayYReW) |
| Sherry | [CodePen](https://codepen.io/twvyqojd-the-typescripter/pen/bNebKaZ) |
| 星雪糖 | [CodePen](https://codepen.io/vfpofbgm-the-scripter/pen/qENWKLV) |
| Rogan | [CodePen](https://codepen.io/RoganHsu/pen/jErNpNb?editors=1111) |
| Eileen | [CodePen](https://codepen.io/Eileen-io/pen/xbOKJPJ) |
| 7Red | [CodePen](https://codepen.io/cch2655/pen/raLBrrd) |
| Zem | [CodePen](https://codepen.io/dgldwqlg-the-vuer/pen/ogLvMVR) |
| Naojun | [CodePen](https://codepen.io/NAOJUN/pen/qENWyKL) |
| 叮咚 | [CodePen](https://codepen.io/pinchieh-lin/pen/LEZPBoo) |
| Marco | [CodePen](https://codepen.io/MarcoChiu/pen/RNRbBad) |
| Hugh | [CodePen](https://codepen.io/Hugh-Chen/pen/dPMBYxp) |
| tanuki | [CodePen](https://codepen.io/tanuki320/pen/EayYeQq) |
| esther | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/JoKPapj) |
| ying | [CodePen](https://codepen.io/Lara-Lin/pen/xbOKayb?editors=1011) |
| Rudy | [CodePen](https://codepen.io/Rudy-crw/pen/RNRbqvw?editors=1100) |
| 小懿 | [Codepen](https://codepen.io/YT-the-vuer/pen/qENWQzw?editors=1111) |
| 7lun | [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/LEZPMNw?editors=1011) |
| cindy | [Codepen](https://codepen.io/a50134/pen/RNRbEKa) |
| andy | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/RNRbEgR?editors=0011) |
| 登登登 | [Codepen](https://codepen.io/Duncanin/pen/WbxeLMz) |
| Percy | [Codepen](https://codepen.io/Percy-Ku/pen/MYegZMR) |
| 社子畢卡索 | [Codepen](https://codepen.io/pen?template=QwELYLJ) |
| An | [Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/azZoPrO?editors=1111) |
| YUCCC | [Codepen](https://codepen.io/taroooo/pen/zxBObZp) |
| 老屠 | [Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/ogLvVaV?editors=1011) |
| wind | [Codepen](https://codepen.io/wind7y/pen/RNRbmOY) |
| Jenna | [Codepen](https://codepen.io/abiscc14/pen/LEZPKQX) |
| 地瓜 | [Codepen](https://codepen.io/ChippyYU/pen/MYeWWom?editors=1010) |
| Tetsu | [Codepen](https://codepen.io/ttgchang/pen/xbOxxJa) |
| Tippy | [Codepen](https://codepen.io/Ektodor-Wang/pen/yyJLyNv) |
| Wafa | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/vEKYGep?editors=1100) |
| KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/xbOxLzv) |
| nonwa_jeff | [codepen](https://codepen.io/nonwaaa/pen/vEKYeNm) |
| Owen He | [codepen](https://codepen.io/owen1120/pen/xbOxPzz?editors=0011) |
| Vergil | [CodePen](https://codepen.io/aglgvsie/pen/ByzamXK) |
| JiaMori | [CodePen](https://codepen.io/jiamori/pen/bNeGOOY) |
| 平平 | [CodePen](https://codepen.io/ypinpin/pen/LEZYovj) |
| Eric | [Codepen](https://codepen.io/wc-su/pen/azZzNLv) |
| RyanC | [Codepen](https://codepen.io/RyanYD/pen/zxBxKPm) |
| kashiwatei | [Codepen](https://codepen.io/kashiwatei/pen/xbObYJV?editors=1011) |
| 舜仁 | [Codepen](https://codepen.io/shunjen/pen/ZYOYNJP) |
| ZoeKang | [Codepen](https://codepen.io/byehywmx-the-animator/pen/KwMwjKj) |
| Michelle | [Codepen](https://codepen.io/bastar_dize/pen/ZYOGzxN?editors=1111) |
| Jin | [Codepen](https://codepen.io/Jin-L/pen/dPXobrv) |
| 主委加碼啦幹 | [Codepen](https://codepen.io/popbob-the-bashful/pen/zxBGxyM?editors=1100) |
| 伊迪 | [Codepen](https://codepen.io/sorryFish/pen/jErPwXP) |
| CharisLai | [Codepen](https://codepen.io/charislai/pen/emzNmYR) |
| Miikaa | [Codepen](https://codepen.io/Miikaa/pen/GgqJVaJ) |
| 冠翔 | [Codepen](https://codepen.io/hsrfcdrx-the-bold/pen/bNedPqQ) |
|小趴|[Codepen](https://codepen.io/papa2415/pen/pvbjVjj)|
|蛋白|[Codepen](https://codepen.io/sjlu-0/pen/ZYOQbdb)|
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/jErBvOV)|
|Wen|[Codepen](https://codepen.io/hsiao-kevin/pen/pvbwEGr?editors=1111)|