---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 Day 5 - 陣列操作 2、Bootstrap Utilities 1
參考文章: https://wcc723.github.io/javascript/2017/06/29/es6-native-array
### map 介紹
> 1. 為 JavaScript 的陣列方法，可以用來「修改陣列元素」。
> 2. 不會影響原來的陣列，而是會透過函式內所回傳的值組合成一個新的陣列。
> 3. map() 需要設定回傳值，如果不設定則會回傳 undefined
舉例:
```js=
let arr = [1,2,3,4];
let newArr = arr.map((item) => {
return item * 2;
});
console.log(arr); // 結果為: [1, 2, 3, 4]
console.log(newArr); // 結果為: [2, 4, 6, 8]
```
```js=
let arr = [1,2,3,4];
let newArr = arr.map((item) => {
/* 假設不設定回傳 */
});
console.log(newArr); // 結果為: [undefined, undefined, undefined, undefined]
```
題目（使用 CodePen 作答）
---
請使用 map() 操作 array 陣列，賦予 newArray 陣列元素。結果如下圖:
```js=
const array = [
{
name: '小明',
age: 18
},
{
name: '小美',
age: 15
},
{
name: '杰倫',
age: 19
},
{
name: '漂亮阿姨',
age: 22
},
{
name: '老媽',
age: 28
}
];
let newArray = [];
```
Bootstrap Utilities（顏色）
---
在 Bootstrap 中可以運用 `.bg-*` `.text-*` class 前綴來接上主題顏色，
像是：`.bg-primary` , `.text-white`
> 在背景通用類別中，也可以加上 `.bg-gradient` 讓背景有些許漸層，
> 或是運用 `.bg-opacity-*` 讓背景有透明度（注意 CDN 需為 5.1 版以上）
請協助補上此 [Codepen](https://codepen.io/hexschool/pen/XWYBZNP) `...` 的部分，嘗試練習套用這些樣式，並呈現出下方圖片畫面
參考：Bootstrap [背景](https://bootstrap5.hexschool.com/docs/5.1/utilities/background/) 與 [顏色](https://bootstrap5.hexschool.com/docs/5.1/utilities/colors/) 通用類別
## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
<!-- 解答：
使用 ES6 模板字串符語法
let newArray = [];
newArray = array.map((item) => {
return `${item.name} ${item.age} 歲囉`;
});
console.log(newArray);
- Bootstrap -
https://codepen.io/hexschool/pen/mdKjXRe
-->
回報區
---
| Discord | CodePen / 答案 |
| --------------- |:----------------------------------------------------------------------------:|
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/MWxWjqJ?editors=1111) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/GReRjYa) |
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/wvOvzRB?editors=0010) |
| pinyi_9 | [CodePen](https://codepen.io/Wpypy/pen/abMbmXY?editors=1011) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/RwdwGdO)
| 圈圈 | [CodePen](https://codepen.io/wjejfczn-the-bold/pen/PoLoGvo) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/OJqJReP) |
| kuanju27 | [CodePen](https://codepen.io/Eero-Chiao/pen/dyryOba) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/RwdwGmm?editors=1011) |
|Moreene|[CodeOen](https://codepen.io/Moreene/pen/mdodOJb)|
| wei_Rio | [CodePen](https://codepen.io/wei_wu/pen/MWxWbaE?editors=0011) |
| ryan.chou | [CodePen](https://codepen.io/csw8524/pen/XWGWNmE) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/gOEOLLa) |
| Emily | [CodePen](https://codepen.io/Emily2089/pen/QWoWGQq?editors=1011) |
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/poYoNQV?editors=1010) |
| fanshu0303 | [Codepen](https://codepen.io/JuiHsuanLee0303/pen/BabaQgd?editors=1010) |
| Ataraxia | [Codepen](https://codepen.io/ataraxia8888/pen/eYXYgzo) |
| Hedy | [CodePen](https://codepen.io/Hedy_H/pen/eYXYgBa?editors=1010) |
| Peng | [CodePen](https://codepen.io/H-Peng/pen/MWxWJvd) |
| celinelinnn |[CodePen](https://codepen.io/celinephoebe/pen/BabapPP)|
| Chia Pin |[CodePen](https://codepen.io/joker-cat/pen/RwdwpNy)|
| RayRay |[CodePen](https://codepen.io/CityRay/pen/QWoWpvW)|
| stone4584 |[CodePen](https://codepen.io/Royen0506/pen/YzgzZYO?editors=1111)|
| dora | [CodePen](https://codepen.io/dorayu/pen/bGZGgba?editors=1011) |
| cbs |[Codepen](https://codepen.io/wasdjk/pen/WNmNoZO?editors=1111)|
| PoRay | [CodePen](https://codepen.io/raycheng/pen/rNRNyPG?editors=1011) |
| Helen | [CodePen](https://codepen.io/milkteamonster/pen/abMbWNa?editors=1011) |
| haru | [CodePen](https://codepen.io/haru_portfoilo/pen/RwdwVpw?editors=1111) |
| WeiWei崴崴 | [CodePen](https://codepen.io/weiwei324/pen/OJqJmEb) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/GReRmyo?editors=1011) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/GReRERW) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/poYowEQ?editors=1011) |
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/zYbYzRx?editors=1010) |
|Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/oNVNwPZ) |
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/jOJOMoV)|
|Antonio|[Codepen](https://codepen.io/gwhvusel-the-builder/pen/BabaWKb)|
| KUN. | [CodePen](https://codepen.io/barry91205/pen/GReRMKV) |
|荷菓かのり| [CodePen](https://codepen.io/oogxwkvw-the-builder/pen/rNRNzZw?editors=1111) |
| pingshian | [CodePen](https://codepen.io/pingshian0131/pen/rNRNGoQ) |
| elena | [CodePen](https://codepen.io/elena0127abc/pen/mdodBvE) |
| MikeLin | [CodePen](https://codepen.io/MikeLin0701/pen/yLwLPeQ) |
| Oria | [CodePen](https://codepen.io/kajing/pen/NWJWwWX?editors=1011) |
| \_amaaaa | [CodePen](https://codepen.io/Alicia-Chu/pen/WNmNXZg) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/WNmNREg) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/eYXYeLY?editors=1111) |
| 依依 | [CodePen](https://codepen.io/Rita-Yang/pen/mdodqaX?editors=1111) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/LYaYOqW?editors=1011) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/BabamWY) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/JjzjOQE) |
| Yang | [CodePen](https://codepen.io/Yang-J/pen/BabaJaG) |
| Enzo | [CodePen](https://codepen.io/Enzo-Lo/pen/ZEPEvJp?editors=1111) |
| nini1202desu | [CodePen](https://codepen.io/tvxq5206/pen/eYXYyQW?editors=1111) |
| Neil | [CodePen](https://codepen.io/Neil1024/pen/NWJWzNr?editors=1011) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/dyryOgP?editors=1001) |
| Jim | [CodePen](https://codepen.io/asiahedh-the-encoder/pen/QWoWVZj) |
| 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/ZEPEMwe) |
| jenniferchuang | [codePen](https://codepen.io/yujhen/pen/WNmNgBr?editors=1111) |
| MY | [CodePen](https://codepen.io/ahmomoz/pen/OJqJoya?editors=1111) |
| carrie | [CodePan](https://codepen.io/echocarriet/pen/vYPYQXy)|
|Eden|[Codepen](https://codepen.io/iseden/pen/oNVNJzo)|
|貢波波夫|[Codepen](https://codepen.io/mxgrfgcr-the-bashful/pen/gOEOyKE)|
|小夏|[Codepen](https://codepen.io/michaelhsia/pen/Rwdwzba)|
| hsuhsusophie | [CodePen](https://codepen.io/hsuhsusophie/pen/YzgzojV?editors=1111) |
| yuli | [CodePen](https://codepen.io/qlmjined-the-typescripter/pen/zYbxGYP) |
| Rock | [CodePen](https://codepen.io/xiu43317/pen/OJqPVvN) |
| PayRoom |[CodePen](https://codepen.io/water38198/pen/MWxYwZG) |
| Charlotte Lee |[CodePen](https://codepen.io/char849/pen/eYXmJPg) |
| FangFang |[CodePen](https://codepen.io/FangFang09/pen/poYvyJN) |
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/VwRwbXw) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/wvOBWOx)|
| Chris | [CodePen](https://codepen.io/cjtseng07/pen/eYXmdwW) |
| WEI | [CodePen](https://codepen.io/wei-z/pen/gOEbmdq) |
| 翔.(Ben) | [CodePen](https://codepen.io/energy95272z/pen/mdoyMrx?editors=0011) |
| Yuetin | [CodePen](https://codepen.io/Yue9527/pen/LYaEzpB) |
| MDFK | [CodePen](https://codepen.io/maywang/pen/yLwyzpo?editors=0012) |
| Martin | [CodePen](https://codepen.io/markyourpage/pen/abMzVWe) |
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/QWowaEP) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/LYaEQWg?editors=1111) |
| ChihYang | [CodePen](https://codepen.io/hike1707/pen/JjzoZew) |
| ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/KKEweLy?editors=1011) |
| Aaron | [CodePen](https://codepen.io/nzygxhnl-the-scripter/pen/dyrPjKX?editors=1111) |
| jeremyChan | [CodePen](https://codepen.io/nudieisgood/pen/RwdPwNP?editors=1111) |
| adam322 | [CodePen](https://codepen.io/hexschool/pen/XWYBZNP) |
| 保羅 | [CodePen](https://codepen.io/paul-1997/pen/PoLqQoV) |
| c8529 | [CodePen](https://codepen.io/claire210401/pen/MWQqEjm?editors=0012) |
| macihuang | [CodePen](https://codepen.io/macy1215/pen/BabNWOv2) |
| 教練 | [CodePen](https://codepen.io/monkeybear721/pen/mdoJryM) |
| PoWei#8484 | [CodePen](https://codepen.io/harrison-wei-lai/pen/PoLqrBW?editors=1111) |
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/jOJbPME) |
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/RwdWKxP) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/XWGmRXj?editors=1011) |
| xuan | [CodePen](https://codepen.io/xuan0915/pen/JjzYOvV?editors=0011) |
| .zack_p | [CodePen](https://codepen.io/Designer-PH/pen/oNVjqxm?editors=1011) |
| peggy | [CodePen](https://codepen.io/peggylai/pen/Yzgyaow?editors=1010) |
| Vivian2857 | [CodePen](https://codepen.io/vivian_lin/pen/dyrYQQb?editors=1010) |
| Nielsen | [Codepen](https://codepen.io/nielsen_dch/pen/QWojPxJ)|
| owen | [Codepen](https://codepen.io/owen-dong/pen/PoLPvYB?editors=1011)|
| Jason | [CodePen](https://codepen.io/bfnrjakt/pen/qBvOzbM) |
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/eYXJXzR?editors=1011) |
| skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/vYPGKGQ?editors=1000) |
| hua | [CodePen](https://codepen.io/LHua/pen/xxBEzyG?editors=1111) |
| samgu666 | [CodePen](https://codepen.io/orz311013/pen/PoLGyZb) |
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/JjzERga) ||
| 關關 | [Codepen](https://codepen.io/ashkuan/pen/wvOJLPr) |
| Ting | [Codepen](https://codepen.io/liara/pen/ExMXRVN) |
| 郭芙蘭 | [Codepen](https://codepen.io/flora_Kuo/pen/yLwPWeR?editors=1011) |
| ChrisSQR | [Codepen](https://codepen.io/ChrisSQR/pen/LYadWEz) |
| WA | [Codepen](https://codepen.io/ldddl/pen/xxBeNVW) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/gOypKMM) |
<!-- 快速複製
| | [CodePen]() |
-->
Sign in with Wallet
Connect another wallet