---
tags: React 直播班 - 2024 冬季班
---
# 🏅 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 作答）

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

newArray = array.filter((item) => {
return item.age <= 18;
});

// 也可以簡寫成
newArray = array.filter(item => item.age <= 18);

- Bootstrap -
https://codepen.io/yen-kg/pen/JjgpmLr
-->

回報區
---
| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| 泊岸 | [CodePen](https://codepen.io/qoq77416416/pen/wBwewGQ?editors=1011) |
| lobinda | [CodePen](https://codepen.io/Lobinda/pen/VYZbazd) |
| 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/JoPJPEN) |
| 4chan | [CodePen](https://codepen.io/ijuolaqc-the-looper/pen/PwYjYbd) |
| Toung | [CodePen](https://codepen.io/Toung/pen/RNbgbaQ) |
| Jasmine Lin | [CodePen](https://codepen.io/Jasmine-Lin-the-vuer/pen/NPKgKjm) |
| ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/vEBZBWr?editors=1111)|
| shiou | [CodePen](https://codepen.io/shiou-ho/pen/QwLgLZw?editors=1111) |
| Clove_墨 | [CodePen](https://codesandbox.io/p/sandbox/qtd6ls) |
| Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/OPLgJVL) |
|ollie|[CodePen](https://codepen.io/daiyy97/pen/ogvwNWJ?editors=1101)|
| Satar | [CodePen](https://codepen.io/SatarKuo/pen/OPLgJrR?editors=1111) |
| Jun | [CodePen](https://codepen.io/jun12079/pen/pvzwvEZ) |
| Amanda | [CodePen](https://codepen.io/cym199922/pen/gbYRbox) |
| 蘑菇星星 | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/QwLgwZZ?editors=1101) |
| Yen | [CodePen](https://codepen.io/yuxxxlouyen/pen/jENwEJX?editors=0011) |
|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/bNbRdEO?editors=1111)|
|Kaya|[CodePen](https://codepen.io/kayaribi/pen/GgKEpEK)|
| Tammy | [CodePen](https://codepen.io/Tammy_Tsai/pen/pvzwjQd) |
| Rochel |[Codepen](https://codepen.io/rochelwang1205/pen/QwLgydm?editors=1112)|
| Nocab |[Codepen](https://codepen.io/PeihanWang/pen/WbeOrpM?editors=1111)|
| Noy(Toad) |[Codepen](https://codepen.io/MochiCodingPen/pen/vEBZLvm) |
| andy | [CodePen](https://codepen.io/andygggg/pen/PwYjNaV) |
| CrystalLala | [CodePen](https://codepen.io/crystallala/pen/VYZbVRw) |
| Rothy | [CodePen](https://codepen.io/ChloeHsu1/pen/JoPJKoL) |
| Sonia | [CodePen](https://codepen.io/YUJOU/pen/NPKgbxe?editors=1111) |
| tim | [CodePen](https://codepen.io/jskrtivy-the-animator/pen/jENwBzp?editors=1101) |
| Johnson | [CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/ogvwZrY) |
| LinaChen | [CodePen](https://codepen.io/LinaChen/pen/VYZWWzR) |
| 蕾蕾 leilei | [CodePen](https://codepen.io/Leileisme/pen/KwPqzvP?editors=1111) |
| Aaron 謝宗佑 | [CodePen](https://codepen.io/aaron-hsieh/pen/dPbRReL) |
|邵|[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/dPbRRqE?editors=1111)|
|jimmy.0706|[CodePen](https://codepen.io/JimmyMao/pen/NPKgyre?editors=1111)|
| yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/jENwLjX) |
| 阿佑 | [CodePen](https://codepen.io/ans9323052/pen/EaYXeQB) |
| 爆漿 | [CodePen](https://codepen.io/nvdwwlbx-the-vuer/pen/OPLgoox?editors=1111) |
| mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/dPbRQrE) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/xbKLYaR?editors=1012) |
|a1phaki(小k)|[codepen](https://codepen.io/a1phaki/pen/raBzvzZ)|
|嚼勁先生|[codepen](https://codepen.io/James520284/pen/GgKvbvz)|
| GAVI| [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/emORvEx?editors=1101)|
| Cami | [CodePen](https://codepen.io/irisLife/pen/XJreXVP)|
|Glen_69515|[CodePen](https://codepen.io/glenyaochih/pen/XJrePZB?editors=1111)|
|1457|[Codepen](https://codepen.io/1457dys/pen/YPKroKr)|
| Joannehu | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/YPKEZqd?editors=1111) |
| Mike | [CodePen](https://codepen.io/mike2049/pen/WbezpwP?editors=0011) |
| yun-lin | [CodePen](https://codepen.io/yunlinhsu/pen/OPLaJeK) |
| .ztion | [Codepen](https://codepen.io/ztion/pen/emOXKWG?editors=1111) |
| Edie | [CodePen](https://codepen.io/eku10rei/pen/WbeWNxE?editors=1100) |
| chris | [CodePen]() |
| yaoling.liang | [CodePen](https://codepen.io/Yao-Ling-L-/pen/JojXNBL?editors=1111) |
| Jim | [CodePen](https://codepen.io/JimChou/pen/MYWyaVX?editors=1101) |
| KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/vEYgEYP?editors=1101) |
| Chuang | [CodePen](https://codepen.io/uidoytjq-the-solid/pen/bNGmoEy?editors=1111) |
| jinliu214 | [CodePen](https://codepen.io/jinliu214/pen/YPPaqNL?editors=1100) |

<!-- 快速複製

| user | [CodePen]() |

-->