---
# System prepended metadata

title: "\U0001F3C5 Day 5 - 陣列操作 2、Bootstrap Utilities 1"
tags: [Vue 直播班 - 2022 冬季班]

---

---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 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 陣列元素。結果如下圖:

![](https://i.imgur.com/brnHTk5.png)

```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) `...` 的部分，嘗試練習套用這些樣式，並呈現出下方圖片畫面

![](https://i.imgur.com/tmzE8XB.png)


參考：Bootstrap [背景](https://bootstrap5.hexschool.com/docs/5.1/utilities/background/) 與 [顏色](https://bootstrap5.hexschool.com/docs/5.1/utilities/colors/) 通用類別


## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  
使用 ES6 模板字串符語法
let newArray = [];
newArray = array.map((item) => {
  return `${item.name} ${item.age} 歲囉`;
});

console.log(newArray);

- Bootstrap -
https://codepen.io/hexschool/pen/mdKjXRe

-->




回報區
---


| Discord         |                                CodePen / 答案                                |
| --------------- |:----------------------------------------------------------------------------:|
| ...             |                                     ...         
|王老三#9340|[codepen](https://codepen.io/flynk/pen/PoBYzre?editors=1111)|
| K kill9ker#8028 |       [codepen](https://codepen.io/kill9ker/pen/MWXNRPj?editors=1111)        |
| WeiJ#7376       |               [codepen](https://codepen.io/weij0/pen/xxzvMeN)                |
| Aaron Shih#3879 |      [codepen](https://codepen.io/aaron00366/pen/yLEmwoG?editors=1111)       |
| Wendy#5616      |              [codepen](https://codepen.io/wendy03/pen/BaVXMEW)               |
| bakiii          |               [codepen](https://codepen.io/aki168/pen/VwdoWej)               |
| albee#9121      |      [Codepen](https://codepen.io/albee-chang/pen/mdKNvNE?editors=1111)      |
| YC#2522         |                [CodePen](https://codepen.io/YCLu/pen/JjZqKZr)                |
| JackC#0411      |              [codepen](https://codepen.io/key0329/pen/VwdogoL)               |
| int#7518        |       [Codepen](https://codepen.io/intHuang/pen/yLEmwBq?editors=1011)        |
| 薯餅#3581       |           [Codepen](https://codepen.io/ColdingPoTaTo/pen/GRGVegN)            |
| DIO大人#4776    |             [Codepen](https://codepen.io/oscar-2283/pen/GRGVeJr)             |
| 威0#6919        |      [codepen](https://codepen.io/n0918679182/pen/oNyKVXX?editors=0012)      |
| yuyu#6310       |       [codepen](https://codepen.io/yuyu0905/pen/zYagbrQ?editors=1011)        |
| hannahTW#2224   |       [codepen](https://codepen.io/hangineer/pen/mdKNoER?editors=1111)       |
| AuroraC#6539    |              [codepen](https://codepen.io/AuroraC/pen/bGKXZEY)               |
| 米米#1824       |     [codepen](https://codepen.io/Jameshsu0407/pen/QWxeoGx?editors=1011)      |
| kenki100#0068   |               [Codepen](https://codepen.io/ken100/pen/yLEmwXG)               |
| Jill Lee#0809   |     [Codepen](https://codepen.io/chi-ling-lee/pen/MWXNxrR?editors=1011)      |
| PeihanWang#2530 |      [codepen](https://codepen.io/PeihanWang/pen/RwJXdpK?editors=1011)       |
| Barret#1119     |      [codepen](https://codepen.io/barret0720/pen/vYropQv?editors=1112)       |
| mandylai#4055   |            [codepen](https://codepen.io/mandy-lai-2/pen/WNyVmya)             |
| Kimi#9564       |              [CodePen](https://codepen.io/kimihu91/pen/xxzNqzQ)              |
| LHchien33#6232  |             [CodePen](https://codepen.io/lin_chien/pen/KKeOEYY)              |
| Alex#9978       | [CodePen](https://codepen.io/datsxzqg-the-selector/pen/mdKNozq?editors=1011) |
| ㄚ翔#8126       |          [codepen](https://codepen.io/engineerjohnson/pen/VwdoNvr)           |
| 大衛#4869       |       [codepen](https://codepen.io/exnsrpjc/pen/OJEKqzz?editors=1011)        |
| 威爾#1694       |              [CodePen](https://codepen.io/WILL_Wu/pen/poKMByz)               |
| 大頭#8116       |             [CodePen](https://codepen.io/d22495521/pen/LYrwvRj)              |
| RJRS#9430       |                [CodePen](https://codepen.io/RJRS/pen/zYagbmG)                |
| Benson#6763     |              [CodePen](https://codepen.io/kumashow/pen/YzvmMpa)              |
| Hilda#7085      |         [CodePen](https://codepen.io/vwquikad-the-vuer/pen/XWYvQNj)          |
| yaru#6308       |       [CodePen](https://codepen.io/lszaietc/pen/RwJXOGy?editors=1111)        |
| Cream#3449      | [CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/ZERgZaO?editors=1011)  |
| 阿榮#8277       |        [CodePen](https://codepen.io/mogzbvfl-the-reactor/pen/OJEKGRa)        |
| 心幻羽#0056     |      [CodePen](https://codepen.io/linglingsyu/pen/BaVeLjy?editors=1111)      |
| 魚子醬#5220     |              [CodePen](https://codepen.io/haihsuan/pen/NWzQmmq)              |
Zack_P#1805|[CodePen](https://codepen.io/tmzazirh-the-animator/pen/QWxeRbE?editors=1111)|
|jimmyFang#9575|[CodePen](https://codepen.io/pohxiqqo/pen/qBKeGOM?editors=1011)|
|Wendy77#8049|[CodePen](https://codepen.io/Wendy__/pen/BaVXEga?editors=1011)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/KKeOLam?editors=1010)|
|Cheryl#4007|[Codepen](https://codepen.io/Cheryl-Hsu/pen/WNyVBdp?editors=1011)|
|RainLiao#2616|[Codepen](https://codepen.io/billpop741/pen/BaVXbqV)|
|Potatolee#7749|[Codepen](https://codepen.io/potatoleee/pen/MWXNdLX?editors=1011)|
|阿沁#8176|[CodePen](https://codepen.io/a8322342/pen/NWzQVXd)|
|泊岸#3466|[CodePen](https://codepen.io/qoq77416416/pen/KKeOjPo?editors=1111)|
|ABOOS#6276|[CodePen](https://codepen.io/guhungyin/pen/LYrwKNE)|
|出事了阿伯#9923|[CodePen](https://codepen.io/BradpittLai/pen/Yzvmoyq)|
|楊苡安#2752|[CodePen](https://codepen.io/yi-an-yang/pen/XWYvLjQ?editors=1111)|
|JimmyChang#5558|[CodePen](https://codepen.io/JimmyChangWenChi/pen/bGKXPqL?editors=1011)|
|小夜#3809|[CodePen](https://codepen.io/Naito_K/pen/KKeOLPg)|
|masterYan#2480|[CodePen](https://codepen.io/htzwgoqt-the-looper/pen/QWxeede?editors=1010)|
|Yishan#4902|[CodePen](https://codepen.io/gdjrehhw-the-animator/pen/mdjbbpy?editors=1010)|
|RyanC#6960|[CodePen](https://codepen.io/RyanYD/pen/BaPBBXR?editors=1011)|
|阿異#4776|[CodePen](https://codepen.io/yani21399/pen/wvxwvzP)
|AkiHico#9239|[CodePen](https://codepen.io/akihico/pen/PoBYoJJ?editors=1010)|
|圈圈#4060|[Codepen](https://codepen.io/wjejfczn-the-bold/pen/poKMYKY)|
|老皮博士#8050|[Codepen](https://codepen.io/li0406/pen/MWBgWxN?editors=1111)|
|無名#6427|[Codepen](https://codepen.io/Nomoney/pen/PoavJzp)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/dyjbYZX)|
|Bella_#1587|[Codepen](https://codepen.io/Chen-Bella/pen/yLqBYMR)|
|Bassjim#0118|[Codepen](https://codepen.io/unrtxbaq/pen/OJwLMLw)|
|yoyo123456#0577|[Codepen](https://codepen.io/hungyoyo/pen/eYKqGBV)|
|小潘#8743|[Codepen](https://codepen.io/terrypan1/pen/ExpYPjy)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/BaPBKaa?editors=1011) |
|Judy Wei#6103|[CodePen](https://codepen.io/Judy0718/pen/JjBPGqL)|
|IreneY#0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/WNKewpG)|
|xin#1214|[Codepen](https://codepen.io/SiaoYao/pen/JjBPKyo)|
|冬天#5215|[Codepen](https://codepen.io/winter_/pen/oNMvLRB)|
|LinaChen#1796|[Codepen](https://codepen.io/LinaChen/pen/qByWabr)|
|柚子#3958|[Codepen](https://codepen.io/as6625998/pen/JjBPKqK?editors=1011)|
|Austyn#0949|[Codepen](https://codepen.io/fish90547/pen/BaPBQoa?editors=0011)|
|Fannie#7800|[Codepen](https://codepen.io/dgltu/pen/GRBKEay?editors=1011)|
|鑫鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/jOpNLmg?editors=1001)|
|Amberhh#2465| [codepen](https://codepen.io/Amberhh/pen/abjoyXL?editors=1011) |
|小木馬#8760|[CodePen](https://codepen.io/wmmtbcsd/pen/WNKeZrr)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/rNrBYzR)|
|Hironaka#7367|[codepen](https://codepen.io/hexschool/pen/XWYBZNP?editors=1010)|
|Mia小福#4473|[codepen](https://codepen.io/a0950271/pen/abjoGON)|
|How#5806|[codepen](https://codepen.io/howtobefine/pen/RwBbyVM?editors=1111)|
| Eileen#6454 |[codepen](https://codepen.io/Eileen-io/pen/GRGVadp)|
| CatBoxy#4207 |[codepen](https://codepen.io/nekoboxy/pen/MWXNRpa)|
| enolachen#8031 |[codepen](https://codepen.io/Chen-Enola/pen/yLqBjKN)|
|  cbs#9007  |[Codepen](https://codepen.io/wasdjk/pen/BaPBbxm)|
|雞腿#6089|[Codepen](https://codepen.io/C-WEi/pen/XWBrwgz?editors=1011)|
| Knock59487#9114 |[CodePen](https://codepen.io/Zack88/pen/oNMvKap)| 
| shiuan#4721 |[CodePen](https://codepen.io/prankaChang/pen/gOjObwe?editors=1011)| 
| Sean#3825 |[CodePen](https://codepen.io/sean_1215/pen/dyjbBEO?editors=1011)| 
|Hazel.#6020|[CodePen](https://codepen.io/Hazelhsieh/pen/JjZqEbW?editors=1111)|
|黑白兔#0684|[CodePen](https://codepen.io/johnny329/pen/bGjGEpx)|
|popeye|[codepen](https://codepen.io/popeye_ux/pen/KKBKVqL)|
|MotoRin#2616|[codepen](https://codepen.io/sakimoto/pen/XWBWXRm?editors=0011)|
|JY#5712|[CodePen](https://codepen.io/judy_123/pen/bGjGEaz)|
|Winnie#1306|[Codepen](https://codepen.io/WinnieWuWinnie/pen/LYBYGBj?editors=1011)|
|Ron Liang#7277|[Codepen](https://codepen.io/ron-go/pen/BaPajOM)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/NWBWrPp)
|PH#2731|[Codepen](https://codepen.io/lokf9527/pen/KKBKMNQ)|
|Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/rNrNMoL?editors=1010)|
| 喬喬#2824 |[Codepen](https://codepen.io/joanne-wei/pen/LYBYWdL?editors=1011)|
|sherlin#4587|[Codepen](https://codepen.io/sherlinKuo/pen/wvxvrOG?editors=1111)|
|GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922|[Codepen](https://codepen.io/sho666/pen/zYLYzvm?editors=1111)|
|柔柔#1716|[Codepen](https://codepen.io/rouchen/pen/XWBWPOK)|
|yoyo#1003|[Codepen](https://codepen.io/pen/rNrNPvz)|
|RainJ#3480|[Codepen](https://codepen.io/RainJCode/pen/LYBYaqE?editors=1111)|
|yuling#1634|[codepen](https://codepen.io/igzdflpu/pen/WNKNqgd)|
|christina#6185|[Codepen](https://codepen.io/chrisc0210/pen/vYaEOMM)|
|Chi#7605|[Codepen](https://codepen.io/YoChi84/pen/rNrajJZ)|
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/ExpxdEo?editors=1010)|
|Tami#6742|[Codepen]([https:/](https://codepen.io/wqsdqbjn-the-vuer/pen/QWBwgOM)/)|
|Chaya#3412|[Codepen](https://codepen.io/ChiaoJiao/pen/eYjmLqN?editors=1111)|
| yummyniya#7185 | [Codepen](https://codepen.io/yummyniya/pen/poWLobz)                   |
|Jeff#6077|[Codepen](https://codepen.io/nonwaaa/pen/oNMXYmd)|
|竹輪#3335|[Codepen](https://codepen.io/chikuwa0120/pen/yLqNzYm)|
|Paul#7426|[Codepen](https://codepen.io/paul-1997/pen/YzjXePx?editors=1001)|
|Silvialu#4521|[Codepen](https://codepen.io/Silvia091640/pen/dyjPjQy)|
|你看我像是會玩嗎#1866|[Codepen](https://codepen.io/hasagg/pen/bGjVppx)|
|kevin#1866|[Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/PoBPRrP?editors=1011)|
|ChloeLo#4858|[Codepen](https://codepen.io/chloelo/pen/BaPoxOd)|
|Wei#2330|[Codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/KKBdeqY)|
|popcorn_3q#9893|[Codepen](https://codepen.io/arnyrpqt-the-sasster/pen/qByOyXY)|
|kuku#3118|[Codepen](https://codepen.io/mengting-ku/pen/eYjJNRq)
|Hsiu#8767|[Codepen](https://codepen.io/amy-hsiu/pen/qBybNQy?editors=1111)
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/vYaLpMG?editors=0011)|
|狸貓#5863|[Codepen](https://codepen.io/tanuki320/pen/jOpWYeY?editors=1010)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/xxJZWWP)|
|阿蘇#8531|[CodePen](https://codepen.io/susu3131/pen/Yzjwdrm?editors=1011)|
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/RwBaxbv?editors=1111)|
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/QWBNzog)|
|Eason#7884|[CodePen](https://codepen.io/ASLEO/pen/WNKGemM?editors=1111)|
|YI#0863|[CodePen](https://codepen.io/YI0305/pen/abjmMor?editors=1011)|
|RBC#7632|[CodePen](https://codepen.io/LinChole/pen/gOjwNBv?editors=1111)|
|MengLin#3001|[CodePen](https://codepen.io/aacj2642/pen/vYaxxVW)|
| YU#0618     | [Codepen](https://codepen.io/yoken_/pen/KKBmKda?editors=1010)    |
|Keep#4336|[CodePen](https://codepen.io/keep-/pen/wvxqpyg?editors=1011)|
|Cookie SSS#6991|[CodePen](https://codepen.io/sqhjikpa-the-selector/pen/qByXyZX?editors=1010)|
|周周 #3503|[CodePen](https://codepen.io/jhoujhou-the-decoder/pen/PoBaKYb?editors=1111)|
|Jujubeleven#1036|[Codepen](https://codepen.io/jujubeleven/pen/NWBOrQG?editors=1001)|
