---
tags: React 直播班 - 2024 冬季班
---
# 🏅 Day 5 - 陣列操作 2、Bootstrap Utilities 1

參考文章: https://wcc723.github.io/javascript/2017/06/29/es6-native-array

### map 介紹
> 1. 為 JavaScript 的陣列方法，可以用來「修改陣列元素」。
> 2. 不會影響原來的陣列，而是會透過函式內所回傳的值組合成一個新的陣列。
> 3. map() 需要設定回傳值，如果不設定則會回傳 undefined

舉例:

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]

let arr = [1,2,3,4];
let newArr = arr.map((item) => {
  /* 假設不設定回傳 */
});
console.log(newArr); // 結果為: [undefined, undefined, undefined, undefined]

題目（使用 CodePen 作答）
---
請使用 map() 操作 array 陣列，賦予 newArray 陣列元素。結果如下圖:


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


參考：Bootstrap [背景](https://getbootstrap.com/docs/5.3/utilities/background/#background-color) 與 [顏色](https://getbootstrap.com/docs/5.3/utilities/colors/) 通用類別

## 回報流程

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


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

console.log(newArray);

- Bootstrap -
https://codepen.io/yen-kg/pen/jOgZpOr

-->

回報區
---
| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| Sonia | [CodePen](https://codepen.io/YUJOU/pen/dPbvJbX?editors=1011) |
| Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/qEWrxPY) |
| Toung | [CodePen](https://codepen.io/Toung/pen/zxOwOJP)|
| 泊岸 | [CodePen](https://codepen.io/qoq77416416/pen/vEBmBVb?editors=1011) |
| 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/ogvWvJa) |
| Jasmine Lin | [CodePen](https://codepen.io/Jasmine-Lin-the-vuer/pen/RNbVbzm) |
| 4chan | [CodePen](https://codepen.io/ijuolaqc-the-looper/pen/zxOwYxj) |
| tim | [CodePen](https://codepen.io/jskrtivy-the-animator/pen/yyBbLNo?editors=1011) |
|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/bNbWGVe?editors=1011)|
| Lobinda | [CodePen](https://codepen.io/Lobinda/pen/RNbVwPX) |
| Satar | [CodePen](https://codepen.io/SatarKuo/pen/QwLvWgg?editors=1011) |
| 蘑菇星星 | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/LEPyEzR?editors=1111) |
| Nocab | [CodePen](https://codepen.io/PeihanWang/pen/MYgmYpR?editors=1011) |
| Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/PwYmPvp) |
| Amanda | [CodePen](https://codepen.io/cym199922/pen/GgKmZmw) |
| ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/QwLvNOw?editors=1111)|
| .michelle0417 | [CodePen](https://codepen.io/michelle0417/pen/WbejxLX) |
| Aaron 謝宗佑 | [CodePen](https://codepen.io/aaron-hsieh/pen/JoPNRdj) |
| Cami | [CodePen](https://codepen.io/irisLife/pen/gbYWwXX) |
| yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/ZYzKBEG) |
| Tammy | [CodePen](https://codepen.io/Tammy_Tsai/pen/xbKdPGz) |
| 邵|[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/EaYmoYJ?editors=1111)|
| Rogan|[CodePen](https://codepen.io/RoganHsu/full/JoPNLpx)|
| andy|[CodePen](https://codepen.io/andygggg/pen/ByBRrvp?editors=1111)|
| Rothy|[CodePen](https://codepen.io/ChloeHsu1/pen/wBwdYNw)|
| Kaya |[CodePen](https://codepen.io/kayaribi/pen/MYgmzOO)|
| 蕾蕾 leilei | [CodePen](https://codepen.io/Leileisme/pen/qEWmQKv?editors=1111) |
| CrystalLala | [CodePen](https://codepen.io/crystallala/pen/zxOwMeM) |
| jimmy.0706 | [CodePen](https://codepen.io/JimmyMao/pen/WbejmBZ?editors=1010) |
| shiou | [CodePen](https://codepen.io/shiou-ho/pen/OPLgLOd?editors=1111) |
|ollie|[CodePen](https://codepen.io/daiyy97/pen/xbKdGmW?editors=0011)|
|Jun|[CodePen](https://codepen.io/jun12079/pen/MYgoYaq)|
| Rochel |[Codepen](https://codepen.io/rochelwang1205/pen/vEBZLNL)|
| 阿佑 | [CodePen](https://codepen.io/ans9323052/pen/ZYzyOLJ) |
| Johnson | [CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/yyBXMrr) |
| LinaChen | [CodePen](https://codepen.io/LinaChen/pen/mybwwmZ) |
| 爆漿 | [CodePen](https://codepen.io/nvdwwlbx-the-vuer/pen/MYgoOwb?editors=1111) |
|mercury2508.| [CodePen](https://codepen.io/Mercury2508/pen/emORQPV) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/RNbZQBQ?editors=1011) |
|a1phaki(小k)|[codepen](https://codepen.io/a1phaki/pen/vEBJjJO)|
|1457 | [CodePen](https://codepen.io/1457dys/pen/WbeELyX) |
|嚼勁先生 | [CodePen](https://codepen.io/James520284/pen/VYZzJpd) |
| Joannehu | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/wBwPJww?editors=1011) |
| Mike | [CodePen](https://codepen.io/mike2049/pen/zxORQqR?editors=1011) |
| yun-lin | [CodePen](https://codepen.io/yunlinhsu/pen/MYgqQGW?editors=1010) |
| Edie | [CodePen](https://codepen.io/eku10rei/pen/zxObPeY?editors=1011) |
| .ztion | [CodePen](https://codepen.io/ztion/pen/YPKgLOL?editors=1111) |
| chris | [CodePen](https://codepen.io/chris-chen-the-selector/pen/PwYgxJG?editors=1010) |
| yaoling.liang | [CodePen](https://codepen.io/Yao-Ling-L-/pen/qEBbvGE?editors=1112) |
| Jim | [CodePen](https://codepen.io/JimChou/pen/qEBbeMr) |
| KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/wBvgvNw?editors=1011) |
| 姜承 | [CodePen](https://codepen.io/Troy0718/pen/emYrXeY) |
| Chuang | [CodePen](https://codepen.io/uidoytjq-the-solid/pen/wBvYqYY?editors=1010) |
| jinliu214 | [CodePen](https://codepen.io/jinliu214/pen/oggEyLE?editors=1000) |

<!-- 快速複製
| | [CodePen]() |
-->