--- 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)|