---
tags: Vue 直播班 - 2022 春季班
---
# 🏅 Day 5
###### tags: `Vue 直播班 - 2022 春季班`
參考文章: 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/Bingbingboom/pen/QWMPBRr) `...` 的部分，嘗試練習套用這些樣式，並呈現出下方圖片畫面
參考：Bootstrap [背景](https://bootstrap5.hexschool.com/docs/5.1/utilities/background/) 與 [顏色](https://bootstrap5.hexschool.com/docs/5.1/utilities/colors/) 通用類別
回報流程
---
請同學依照下圖教學觀看解答、回報答案:
回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)
<!-- 解法:使用es6模板字串符語法
let newArray = [];
newArray = array.map((item) => {
return `${item.name} ${item.age} 歲囉`;
});
console.log(newArray);
- Bootstrap -
https://codepen.io/Bingbingboom/pen/yLomMJp
-->
回報區
---
| 報數 |組別/名字 | codepen / 其他回饋 |
|:--------:| -------- | -------- |
|1| Larry | https://codepen.io/larrylinr5/pen/BawYgrE |
|2| AllenW | https://codepen.io/AllenW/pen/bGoLPKX?editors=1011 |
|3| Karen Huang | https://codepen.io/Coding_Snorlax/full/abLVyRz |
|4| Liu | https://codepen.io/feng-chi-liu/pen/RwLQzmv?editors=1111 |
|5| Yof | https://codepen.io/yangyof/pen/GRMyNWQ?editors=1010 |
|6| Charlotte Lee | https://codepen.io/charlotte-lee/pen/rNGJEZy?editors=1010 |
|7| 有廖先生(Rain)|https://codepen.io/billpop741/pen/MWEQNYm |
|8|威爾|https://codepen.io/WILL_Wu/pen/GRMQVQJ |
|9|Terry21|https://codepen.io/feng0409/pen/WNZMVOo?editors=1112 |
|10|Izumi 泉|https://codepen.io/izumi-dev/pen/QWqmLyQ |
|11|Henry Wu|https://codepen.io/dkcmlaww-the-flexboxer/pen/ExwEYXq |
|12| 肉鬆 | https://codepen.io/klrkicog/pen/qBPoWXd?editors=1111 |
|13| 柴貓 | https://codepen.io/shibacat/pen/vYeRBrm |
|14| Henry | https://codepen.io/kaohenry9287/pen/jOGzNZe |
|15| Sheep | https://codepen.io/SheepNDW/pen/RwLMbgK |
|16| Wilson| https://codepen.io/ittaxcjv-the-reactor/pen/ExwEYrV?editors=1011 |
|17| 阿牛 | https://codepen.io/a-hsien-wu/pen/GRMxKpN |
|18|andersonshen|https://codepen.io/luxyenni-the-bold/pen/RwLMbqZ |
|19|Yummyniya|https://codepen.io/yummyniya/pen/poWLobz |
|20|Beanhuang|https://codepen.io/Beanhuang/pen/dyVmyQK?editors=1011 |
|21|Evan Chiang|https://codepen.io/piskesocute/pen/LYzdYor|
|22|yu|https://codepen.io/yuu9916/pen/GRMxgpb?editors=1111|
|23| Iris Huang | https://codepen.io/ythuang/pen/GRMxgER |
|24| 黃士桓 | https://codepen.io/shr-huan-huang/pen/RwLMPKo?editors=1011 |
|25| tingyu | https://codepen.io/dgltu/pen/QWqmjGR?editors=1001 |
|26|群嘉|https://codepen.io/efzdamnp-the-lessful/pen/mdBxeMj?editors=1010|
|27|Fleur|https://codepen.io/swwlee/pen/abLYvxV |
|28|咖咖|https://codepen.io/gon790219/pen/gOGeaQE|
|29|Pei Ying|https://codepen.io/Pei-Ying/pen/BawroMg|
|30|hua|https://codepen.io/hahahazzz123/pen/RwLMrwd?editors=1111|
|31|Rick Tzeng|https://codepen.io/rick917jp6/pen/NWaYxGG
|32|JohnLu|https://codepen.io/jiangshuuu/pen/NWaXXWb?editors=1001|
|33|POPEYE|https://codepen.io/popeye_ux/pen/VwMXerO|
|34|Benson|https://codepen.io/soul81624/pen/YzrawRK|
|35|Vicky|https://codepen.io/hyxfish27/pen/wvrmMwv |
|36|Jess_wu|https://codepen.io/jess1104/pen/poWLbzm?editors=0010 / to 2 AllenW .text-info 裡也可以寫成這樣優 ```<span v-for="item in mapTest ">{{item}},</span> ``` 謝謝yo，但結果圖好像是要陣列哈 by Allen|
|37|Empty wu|https://codepen.io/emptywu/pen/OJxvRvM |
|38|ShaoYu|https://codepen.io/shaoyukao/pen/Bawrpzq|
|39|Himi|https://codepen.io/Himi/pen/vYeRgPV|
|40| Meng | https://codepen.io/MGHN/pen/VwMXPNB?editors=0011 |
|41|Tim Lin|https://codepen.io/TimmyLin/pen/bGovqqE|
|42|陳暐中|https://codepen.io/wei-z/pen/dyVmvax|
|43|Yunei|https://codepen.io/Yunei/pen/dyVmzbj|
|44|Howard|https://codepen.io/yawdnhbm/pen/zYEWWLN|
|45|Abbie|https://codepen.io/Abbie0704/pen/MWEVXmq|
|46|我是泇吟|https://codepen.io/kljuqbxs/pen/XWeZvKV|
|47|Bonnie|https://codepen.io/bonnieli1414/pen/eYGMxBP?editors=1011 |
|48|Steve|https://codepen.io/ycsteve/pen/dyVmLXq?editors=1111
|49|CloThEs |https://codepen.io/bogwdnxx-the-sans/pen/OJxvYRW|
|50|AKI|https://codepen.io/akichen27/pen/dyVmEZY|
|51|Yuri|https://codepen.io/wenfisht/pen/eYGMaPo|
|52|Jhen|https://codepen.io/cheng-jhen/pen/PoJRrbe?editors=1111|
|53|kevinhes|https://codepen.io/kevinhes/pen/bGovPRO?editors=1000|
|54|許敏鑫|https://codepen.io/uilaadhw/pen/rNGdErL|
|55|Mylène|https://codepen.io/hamajibashi/pen/qBPoebo|
|56|shio|https://codepen.io/shioyen/pen/eYGMqGE|
|57|Gill|https://codepen.io/Gill-Chin/pen/gOGzYmL?editors=1010|
|58|Judy|https://codepen.io/judy86101166/pen/mdBLbGW |
|59|Jerry|https://codepen.io/rteyfwwd-the-scripter/pen/ExwLxYa?editors=1111
|60|大衛|https://codepen.io/exnsrpjc/pen/zYEjYbN?editors=1111
|61|Otis|https://codepen.io/humming74/pen/YzrLyML?editors=1111
|62|Alicia Lo|https://codepen.io/dkcyhyre/pen/ExwLPxX
|63|Jordan|https://codepen.io/jordan-ttc-design/pen/YzrLqdG|
|64|FuChang|https://codepen.io/fuchang830714/pen/ExwLNjd|
|65|Laura|https://codepen.io/minminn/pen/mdBLMXY|
|66|Aaron Tu|https://codepen.io/aarontu/pen/NWaMapg|
|67|Will|https://codepen.io/ncrdpepc-the-lessful/pen/eYGMwzY?editors=1011|
|68|Elaine Liu|https://codepen.io/elaine7598/pen/XWeqevL?editors=1010|
|69|Ron|https://codepen.io/long-sian-liang/pen/dyVeZON |
|70|Arista|https://codepen.io/arista-hsieh/pen/PoJeEaY |
|71|浩|https://codepen.io/Ahoyyyy/pen/NWaMMWZ|
|72|pete.chen1024|https://codepen.io/JIAN-RONG/pen/dyVeeKQ?editors=1011|
|73|Calon|https://codepen.io/Calon0118/pen/eYGrPox|
|74|Leo Song|https://codepen.io/sunnylaba/pen/WNZJaLM?editors=1011|
|75|Gui|https://codepen.io/guitimliu/pen/zYEjyrZ
|76|Alvin|https://codepen.io/Alvin20201116/pen/QWqxber|
|77|Steven Chan|https://codepen.io/Steven1220/pen/rNGKVER?editors=1011 |
|78|Judy ☻|https://codepen.io/hsiaohan/pen/gOGKrrp?editors=1010 |
|79|DDDDK|https://codepen.io/dkklee/pen/rNGKLyX |
|80|Erin Huang|https://codepen.io/ErinHuang/pen/VwMdbmO |
|81|Yuan|https://codepen.io/yuanluo13542/pen/abLKMme |
|82|Hedy|https://codepen.io/hhhsuan41/pen/LYzBWXQ |
|83|dOvOb|https://codepen.io/gezzgrwj-the-styleful/pen/rNGZOar?editors=1111
|84|阿武|https://codepen.io/samwnkyat/pen/WNZgoQN |
|85|Scottie|https://codepen.io/wow767t/pen/KKXxXwp?editors=1111|
|86|Jasper|https://codepen.io/li-jasper/pen/QWqVoZQ
|87|Clara Cai|https://codepen.io/Clara-Snowy/pen/abLaxgp
|88| Sihle Huang | https://codepen.io/bugbug777/pen/ZEXMKMX |
|89|Riley|https://codepen.io/jjpxbprd/pen/zYEmOKZ|
|90|Dobe|https://codepen.io/lisebee/pen/ff00edbdadf523d9598aec98e85c01f4?editors=1111|
|91|YC|https://codepen.io/YCLu/pen/LYzXpzq |
|92|William_O^2|https://codepen.io/CodingTrain_1/pen/PoJxvGe|
|93|Anna|https://codepen.io/kycrleao/pen/QWqzWLw?editors=1011|
|94|Jason Chen|https://codepen.io/jason60810/pen/vYevyEm |
|95|王老明|https://codepen.io/adonismis/pen/oNGJEmG?editors=1001 |
|96|mei|https://codepen.io/Shila-Chen/pen/BawvXdQ |
|97|安志|https://codepen.io/lwmtsgek/pen/dyVaOEV?editors=1011|
|98|PeiChi|https://codepen.io/pei-chi-tsai/pen/WNZPMyY?editors=1010|
|99|Jerry Yen|https://codepen.io/JerryYen/pen/rNGRNrj|
|100|肉桂卷|https://codepen.io/ginnlee/pen/YzrMgPp?editors=1011|
|101|Carol Li|https://codepen.io/carolli834/pen/WNZqrXV?editors=1111|
|102|Yashien Lin|https://codepen.io/YashienLin/pen/eYGwwdP?editors=1010|
|103|阿劍| https://codepen.io/seonkuraito/pen/JjrxXVW |
|104|andyii|https://codepen.io/gultrotpybyvue/pen/PoJMbWr?editors=1111|
|105|2/WA|https://codepen.io/ldddl/pen/GROKyrE|
|106|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/abVzaGr?editors=1011
|107|許閔翔|https://codepen.io/oupbzfxq-the-scripter/pen/zYPoORE?editors=1111
|108|Van|https://codepen.io/fbacojji-the-selector/pen/rNYKJmX?editors=1111 |
Sign in with Wallet
Connect another wallet