---
# System prepended metadata

title: "\U0001F3C5 Day 6 - 陣列操作 3、Bootstrap Utilities 2"
tags: [React 直播班 - 2025 冬季班]

---

# 🏅 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://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)|
