# 🏅 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/) 通用類別

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

console.log(newArray);

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

-->

---

<!-- | 名字 |[Codepen](連結) | -->
| 名字 | 連結 |
| ----------- | -------------------------------------------------------------------------------- |
| Hugh | [Codepen](https://codepen.io/Hugh-Chen/pen/pvyXjGQ) |
| Chia | [Codepen](https://codepen.io/Chia-the-encoder/pen/ogxKogJ) |
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/qEZeVbQ?editors=1111) |
| 7Red | [CodePen](https://codepen.io/cch2655/pen/vEGoWXo) |
| liwen | [CodePen](https://codepen.io/liwenchiou/pen/ByKXmGW?editors=0011) |
| Marco | [CodePen](https://codepen.io/MarcoChiu/pen/vEGoWrO) |
| tanuki | [CodePen](https://codepen.io/tanuki320/pen/RNaXjda?editors=1011) |
| jchunnn | [CodePen](https://codepen.io/jchunnn/pen/OPNKzJg?editors=1011) |
| Naojun | [CodePen](https://codepen.io/NAOJUN/pen/yyOmPxK) |
| 7lun | [CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/QwNeaBz?editors=1111) |
| Jin | [CodePen](https://codepen.io/Jin-L/pen/qEZexbj) |
| Eileen | [CodePen](https://codepen.io/Eileen-io/pen/LENwQJm) |
| Sherry | [Codepen](https://codepen.io/twvyqojd-the-typescripter/pen/zxqgRJd?editors=1010) |
| bon | [CodePen](https://codepen.io/pengpon/pen/yyOmjxW) |
| 星雪糖 | [CodePen](https://codepen.io/vfpofbgm-the-scripter/pen/ogxKyEq?editors=1011) |
| andy | [CodePen](https://codepen.io/ewnblckz-the-styleful/pen/vEGoaOM) |
| Percy | [CodePen](https://codepen.io/Percy-Ku/pen/raeXrxp?editors=1011) |
| RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/yyOmqMz?editors=1011) |
| An | [CodePen](https://codepen.io/bzrpsbjq-the-encoder/pen/LENwBBK?editors=1011) |
| cindy | [CodePen](https://codepen.io/a50134/pen/azNeaad?editors=1111) |
| 登登登 | [CodePen](https://codepen.io/Duncanin/pen/GgZVXbx?editors=1010) |
| FangFang | [CodePen](https://codepen.io/Fang-the-selector/pen/XJdvxVM?editors=1111) |
| JiaMori | [CodePen](https://codepen.io/jiamori/pen/myPNQBy) |
| wind | [CodePen](https://codepen.io/wind7y/pen/XJdvOZM) |
| YUCCC | [CodePen](https://codepen.io/taroooo/pen/ZYWgNdK?editors=1011) |
| cks40660 | [CodePen](https://codepen.io/CKS40660/pen/myPNNdE) |
| Wafa | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/ByzBByq?editors=1011) |
| Jenna | [Codepen](https://codepen.io/abiscc14/pen/Wbxerag) |
| Zem | [Codepen](https://codepen.io/dgldwqlg-the-vuer/pen/qENWYwZ) |
| Rogan | [Codepen](https://codepen.io/dgldwqlg-the-vuer/pen/qENWYwZ) |
| 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/qENWKgp) |
| Zem | [Codepen](https://codepen.io/RoganHsu/pen/ByzBVxM?editors=1111) |
| Tippy | [Codepen](https://codepen.io/Ektodor-Wang/pen/xbOKJGY) |
| ying | [Codepen](https://codepen.io/Lara-Lin/pen/LEZPJeV?editors=1010) |
| esther | [Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/jErNeNX) |
| 社子畢卡索 | [Codepen](https://codepen.io/pen?template=PwzYXrE) |
| 老屠 | [Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/qENWvew?editors=1111) |
| 地瓜 | [Codepen](https://codepen.io/ChippyYU/pen/jErOOBr?editors=1010) |
| Tetsu | [Codepen](https://codepen.io/ttgchang/pen/KwMKKoa) |
| KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/zxBYxQO?editors=1011) |
| Vergil | [CodePen](https://codepen.io/aglgvsie/pen/wBWvJoJ) |
| Owen He | [CodePen](https://codepen.io/owen1120/pen/azZbLKB?editors=0011) |
| nonwa_jeff | [codepen](https://codepen.io/nonwaaa/pen/raLNavR) |
| 平平 | [codepen](https://codepen.io/ypinpin/pen/emzYabp) |
| Eric | [Codepen](https://codepen.io/wc-su/pen/RNRNagg) |
| RyanC | [Codepen](https://codepen.io/RyanYD/pen/ogLgzwR) |
| kashiwatei | [Codepen](https://codepen.io/kashiwatei/pen/pvbvadG) |
| 伊迪 | [Codepen](https://codepen.io/sorryFish/pen/emzmoNG) |
| 舜仁 | [Codepen](https://codepen.io/shunjen/pen/MYeYdmZ) |
| ZoeKang | [Codepen](https://codepen.io/byehywmx-the-animator/pen/GgqgaaQ) |
| Michelle | [Codepen](https://codepen.io/bastar_dize/pen/WbxveeX?editors=1011) |
| CharisLai | [Codepen](https://codepen.io/charislai/pen/NPrqWKe)|
| 主委加碼啦幹 | [Codepen](https://codepen.io/popbob-the-bashful/pen/MYewYBQ?editors=1010)|
| 冠翔 | [Codepen](https://codepen.io/hsrfcdrx-the-bold/pen/GgqJQQm)|
| Miikaa | [Codepen](https://codepen.io/Miikaa/pen/ByzNvPj)|
|小趴|[Codepen](https://codepen.io/papa2415/pen/bNeVMGP)|
|蛋白|[Codepen](https://codepen.io/sjlu-0/pen/JoKGYRY)|
|TWLeoC|[CodePan](https://codepen.io/TWLeoC/pen/yyJMqQV)|
|Wen|[Codepen](https://codepen.io/hsiao-kevin/pen/wBWeapr?editors=1011)|
|Doreen翠翠翠|[Codepen](https://codepen.io/cuei-sian-Wang/pen/jEraRpo?editors=1111)|
|Debby|[Codepen](https://codepen.io/Debby-Yang/pen/MYeXxXa)|