---
# System prepended metadata

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

---

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

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


參考：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)|