---
tags: 2022 React 新手讀書會
---
# 🏅 課前 Day 5｜常見 JS 陣列方法練習
在寫 React 時很常使用陣列方法來進行渲染、判斷等等，因此在真正開始進入到 React 之前，先來練習一下常見的陣列方法吧！
### .forEach()
forEach() 方法會將陣列內的每個元素，皆傳入並執行一次。
```javascript=
const array1 = ['apple', 'banana', 'berry'];
array1.forEach(element => console.log(element));
// expected output: "apple"
// expected output: "banana"
// expected output: "berry"
```
### .map()
map() 方法會建立一個新的陣列，其新陣列的內容是原陣列的每一個元素經由運算後回傳的結果。
```javascript=
const array1 = [1, 3, 5, 7];
const map1 = array1.map(x => x * 5);
console.log(map1);
// expected output: Array [5, 15, 25, 35]
```
### .filter()
filter() 方法會建立一個經函式篩選後，符合條件之結果的新陣列。
```javascript=
const employeeList = [
{name: "John", age: 30},
{name: "Betty", age: 28},
{name: "Candy", age: 25}
];
const result = employeeList.filter(employee => employee.age < 30);
console.log(result);
// [{name: "Betty", age: 28}, {name: "Candy", age: 25}]
```
## 題目
請複製 （右下角 fork）[這個範例](https://codepen.io/hexschool/pen/xxWZREv)，並撰寫 JS 完成題目要求。
## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
<!-- 解答：
練習一解答：
let newMoneyList = moneyList.map(x => ({...x, money: x.money * 5}));
練習二解答：
let filterMoneyList = newMoneyList.filter(people => people.money > 1000);
-->
回報區
---
| Discord | CodePen / 答案 |
|:-----------------------:|:----------------------------------------------------------------------------:|
| DIANAxAKKO#4298 | [Codepen](https://codepen.io/redfire29/pen/JjLOrrz?editors=1012) |
| 𝓛𝓊𝒸𝓎#8635 | [Codepen](https://codepen.io/lucygirl/pen/oNqoGer) |
| Ayre#0016 | [Codepen](https://codepen.io/yichunlin09/pen/JjLOrEw?editors=0010) |
| 布魯諾#7239 | [Codepen](https://codepen.io/bruno-yu/pen/qBoVPpG?editors=0011) |
| Evonne#7078 | [Codepen](https://codepen.io/Hsu1Fang/pen/rNdYGpZ?editors=0011) |
| AllenW#1132 | [Codepen](https://codepen.io/AllenW/pen/VwXrMbo?editors=0012) |
| rainbow#3329 | [Codepen](https://codepen.io/g901612002/pen/OJvOxrp?editors=0011) |
| 黃士桓#7654 | [CodePen](https://codepen.io/shr-huan-huang/pen/ZExaXVq) |
| shoppingq | [CodePen](https://codepen.io/shoppingq/pen/OJvOxoW) |
| Double C#7388 | [Codepen](https://codepen.io/Double-C/pen/jOzaGJz) |
| Eric Su#7798 | [CodePen](https://codepen.io/wc-su/pen/YzaErxK) |
| 座標33129#8748 | [Codepen](https://codepen.io/ad80352/pen/gOeXGJm?editors=1011) |
| L0F0#8733 | [CodePen](https://codepen.io/l0f0/pen/abYVLxg?editors=0011) |
| east#4003 | [CodePen](https://codepen.io/EastM/pen/WNzXXez?editors=0010) |
| Yukon#2618 | [CodePen](https://codepen.io/ukowork/pen/vYRWeaN) |
| m_m#5493 | [Codepen](https://codepen.io/minnn7716/pen/gOeXXpR) |
| Bumble幫啵#0255 | [CodePen](https://codepen.io/lmpzezvw-the-lessful/pen/bGvYoRg) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/OJvOOyx) |
| RON#2813 | [Codepen](https://codepen.io/Ron115/pen/VwXrMGY) |
| ZengZeng | [Codepen](https://codepen.io/tyzyoko/pen/QWmOqVO) |
| LinaChen#1796 | [Codepen](https://codepen.io/LinaChen/pen/mdxqqrm) |
| Iris#8462 | [Codepen](https://codepen.io/irissamy/pen/XWEzzKL?editors=0112) |
| Morris#8755 | [Codepen](https://codepen.io/morrisss/pen/LYdOzrw?editors=1111) |
| Overy#4545 | [Codepen](https://codepen.io/oceanwhale52hz/full/gOeXGxP) |
| HedgehogKU | [CodePen](https://codepen.io/hedgehogkucc/pen/JjLOORd?editors=0011) |
| Arista#5802 | [CodePen](https://codepen.io/arista-hsieh/pen/MWVOOeL) |
| Vada Chen #2055 | [CodePen](https://codepen.io/vadachen/pen/mdxqBqe?editors=0010) |
| christina#6185 | [Codepen](https://codepen.io/chrisc0210/pen/bGvYoyY) |
| Carolkiki2003#7399 | [Codepen](https://codepen.io/wasfzuig/pen/wvmPrYe) |
| ChloeLo#4858 | [Codepen](https://codepen.io/chloelo/pen/gOeXXwx) |
| fannnny#7112 | [Codepen](https://codepen.io/fannyHO/pen/MWVOOOd?editors=0012) |
| JessSong#5050 | [Codepen](https://codepen.io/jssanji03/pen/vYRWeVL) |
| Sylvia-H #0024 | [CodePen](https://codepen.io/Cosmosheart/pen/OJvOOjQ) |
| kevinhes #2881 | [codePen](https://codepen.io/kevinhes/pen/jOzaaQR?editors=0012) |
| IceSam#7836 | [CodePen](https://codepen.io/sam-hsu/pen/PoROOae) |
| wiimax#4564 | [Codepen](https://codepen.io/willismax/pen/zYWPPJv) |
| Yiling#4054 | [Codepen](https://codepen.io/lin010/pen/jOzaYOg?editors=0011) |
| zzly#9134 | [CodePen](https://codepen.io/ly00/pen/KKoyZVK) |
| SHIN#6075 | [CodePen](https://codepen.io/shin9626/pen/QWmOadW) |
| CofCat#9226 | [CodePen](https://codepen.io/cofcat456/pen/mdxqpMQ?editors=1112) |
| JarDar#6980 | [codepen](https://codepen.io/jardarpen/pen/BarmJJg) |
| Tsuei#9284 | [CodePen](https://codepen.io/AlbertoLL/pen/MWVOrXJ?editors=0011) |
| IreneLee#7932 | [CodePen](https://codepen.io/ntjtcxpt-the-animator/pen/KKoyZJg?editors=1011) |
| Yanyna#3555 | [codpen](https://codepen.io/wei-yi-lee/pen/poLdpYR) |
| Timothy#5863 | [codpen](https://codepen.io/timothy_hippo/pen/bGvYayV?editors=0011) |
| Mr.Sean#3825 | [codpen](https://codepen.io/sean_1215/pen/GRxOyGL?editors=1111) |
| LEO#7779 | [codpen](https://codepen.io/nekorice/pen/ZExaXNm) |
| JC#8658 | [Codepen](https://codepen.io/jcsamoyed/pen/QWmOQKp?editors=0011) |
| React-慧茹(拉拉醬)#3414 | [Codepen](https://codepen.io/lala-lee-jobs/pen/KKoyQvX?editors=0011) |
| Stacy#1442 | [Codepen](https://codepen.io/keebibmh/pen/KKoyQav) |
| 葉秋#2335 | [Codepen](https://codepen.io/as880074/pen/OJvOzVr?editors=1112) |
| 薯餅#3581 | [Codepen](https://codepen.io/ColdingPoTaTo/pen/BarmrzJ) |
| Kimi#2092 | [Codepen](https://codepen.io/a3216lucy/pen/OJvOvOv) |
| Seijo#1585 | [Codepen](https://codepen.io/SeijoHuang/pen/QWmOmYo?editors=0010) |
| Paper#1658 | [Codepen](https://codepen.io/paper_hsiao/pen/vYRWjER) |
| 翔#0859 | [Codepen](https://codepen.io/energy95272z/pen/OJvOZgG) |
| hw#0715 | [Codepen](https://codepen.io/Lhwei/pen/xxWPjLX) |
| Nico#8739 | [Codepen](https://codepen.io/Nicof2e/pen/qBoVYpx) |
| wenyun#2362 | [Codepen](https://codepen.io/wenyuncc/pen/BarmxOB?editors=0011) |
| Rice#8043 | [Codepen](https://codepen.io/riecball/pen/vYRWrVN?editors=1011) |
| ねこ*#9385 | [Codepan](https://codepen.io/kunpao0104/pen/zYWPLOX) |
| hungya#0773 | [Codepen](https://codepen.io/hungya777/pen/rNdYrOb?editors=0011) |
| Midnightdinner#6220 | [Codepen](https://codepen.io/woowooyong/pen/wvmPjLa) |
| crowley#7180 | [Codepen](https://codepen.io/pon88/pen/BarmVQK?editors=0011) |
| Yihan#5560 | [Codepen](https://codepen.io/h513hh513h/pen/yLKPEvv) |
| hiYifang #0736 | [Codepen](https://codepen.io/hiYifang/pen/QWmOVbX) |
| Wu#0167 | [Codepen](https://codepen.io/Xander0705/pen/PoROeJL) |
| aki | [codepen](https://codepen.io/aki168/pen/poLddpY) |
| easton#3863 | [Codepen](https://codepen.io/EastonIsCodingNow/pen/ZExaMwK?editors=1111) |
| Dylan_Lin#7320 | [Codepen](https://codepen.io/lin-dylan/pen/PoROdOL?editors=0012) |
| niel#2413 | [Codepen](https://codepen.io/danielhsu/pen/gOeXBaO?editors=0012) |
| charlottelee849#0366 | [Codepen](https://codepen.io/charlotte-lee/pen/xxWPaoj?editors=0012) |
| Rui#5058 | [Codepen](https://codepen.io/rui0208/pen/WNzXaYZ?editors=1111) |
| 紅豆豆#0518 | [Codepen](https://codepen.io/zoseqlpc/pen/XWEzymQ?editors=0011) |
| A-Kai#2134 | [Codepen](https://codepen.io/kenneth1002/pen/dymZQYG?editors=0011) |
| lloyd#8224 | [Codepen](https://codepen.io/thanatus25/pen/xxWPXYB) |
| 魚魚#1220 | [Codepen](https://codepen.io/vkkkmkbv-the-selector/pen/gOeXQLx) |
| james#1443 | [Codepen](https://codepen.io/clothn0105700/pen/NWYwEjz?editors=0012) |
| 灰塵貓#7994 | [Codepen](https://codepen.io/rjk66268/pen/RwMjqej?editors=0011) |
| count1count2#9636 | [Codepen](https://codepen.io/souhakusou/pen/MWVOzGd?editors=0012) |
| Claire#2116 | [Codepen](https://codepen.io/claire-chang-the-bashful/pen/VwXrVNz) |
| Zihur#7755 | [Codepen](https://codepen.io/Zihur/pen/yLKPGJN?editors=0011) |
| Evileye#0666 | [Codepen](https://codepen.io/gn-lin/pen/NWYwoev) |
| YuZhun#1362 | [Codepen](https://codepen.io/danzhun/pen/yLKPdgQ?editors=0011) |
| shin#5792 | [Codepen](https://codepen.io/hah1030/pen/RwMjzxg?editors=1111) |
| yoshidc#0455 | [Codepen](https://codepen.io/yoshiyyc/pen/WNzXqoJ) |
| GL#2256 | [Codepen](https://codepen.io/4genie/pen/xxWPoQV?editors=0110) |
| Wins#8457 | [Codepen](https://codepen.io/winszhuang/pen/BarmgbP?editors=1111) |
| 城堡#2126 | [Codepen](https://codepen.io/tthcastle/pen/WNzXVKb) |
| Kelvin#3296 | [Codepen](https://codepen.io/kelvinchang/pen/VwXrdQZ) |
| Kenge#3690 | [Codepen](https://codepen.io/pgkusn/pen/rNdpBaY) |
| TedWang#7721 | [Codepen](https://codepen.io/wangtaiyan/pen/PoREowp?editors=1011) |
| 無名#6427 | [Codepen](https://codepen.io/Nomoney/pen/KKoZKWx?editors=0012) |
| 眼睛 #0314 | [Codepen](https://codepen.io/thrizzacode/pen/poLpowQ?editors=0011) |
| k.sin | [Codepen](https://codepen.io/sin588/pen/xxWpbwg?editors=0012) |
| Alex Liao#8538 | [CodePen](https://codepen.io/alex0207s/pen/NWYXPGJ) |
| Rocker#6235 | [CodePen](https://codepen.io/RockerLi/pen/eYMyNJG) |
| 家洋#6999 | [CodePen](https://codepen.io/aa235553756/pen/bGvadow) |
| Neal#0665 | [CodePen](https://codepen.io/neallkf/pen/qBopdpg?editors=0012) |
| Ninja#0471 | [CodePen](https://codepen.io/li-ninja/pen/KKoZpGy?editors=0012) |
| Susie(軒)#6181 | [CodePen](https://codepen.io/Codeleaf/pen/oNqpXQK) |
| Tuhacrt#0008 | [CodePen](https://codepen.io/Tuhacrt/pen/jOzYWbj) |
| yunyun#5215 | [CodePen](https://codepen.io/yun_yunni/pen/yLKpeVy) |
| Renren #8437 | [CodePen](https://codepen.io/ehren-chen/pen/poLpjXX?editors=0011) |
| kyle890721#1016 | [CodePen](https://codepen.io/KYLE890721/pen/YzaYqOz) |
| huch09#1426 | [CodePen](https://codepen.io/subarashii-huch09/pen/rNdpWZr?editors=0012) |
| 𝔼.𝕎#4742 | [Codepen](https://codepen.io/kidult316/pen/Bardvza) |
| JimHwang#3594 | [Codepen](https://codepen.io/jimh1129/pen/BarJpYY?editors=1111) |
| 楓之聲#6945 | [codepen](https://codepen.io/sshane258/pen/MWVrpaW?editors=1012) |
| PandaaA#7740 | [Codepen](https://codepen.io/pandaachu/pen/RwMxpxB) |
| Otis#8455 | [Codepen](https://codepen.io/humming74/pen/yLKpbRp?editors=1012) |
| emma#8455 | [Codepen](https://codepen.io/itsems/pen/bGvaRmK?editors=0011) |
| Robert Lo#9653 | [Codepen](https://codepen.io/Robert-Lo/pen/poLprQg?editors=1012) |
| bonnieli1414#4906 | [CodePen](https://codepen.io/bonnieli1414/pen/bGvaoXR?editors=0011) |
| Emily#3648 | [CodePen](https://codepen.io/flien/pen/JjLMOMd?editors=0011) |
| lingxuan | [CodePen](https://codepen.io/lingxuan0618/pen/xxWpWLK) |
| KuoMin#4931 | [CodePen](https://codepen.io/KuoMin/pen/bGvaRoL?editors=1111) |
| 小熊#0685 | [CodePen](https://codepen.io/YuHan0704/pen/gOeoRdX?editors=0011) |
| 露易莎#7673 | [Codepen](https://codepen.io/louisa-lin/pen/vYRpjra?editors=1111) |
| JimmyChang#5558 | [Codepen](https://codepen.io/JimmyChangWenChi/pen/mdxpLLG?editors=0012) |
| Zoe | [Codepen](https://codepen.io/Zoechiueh/pen/ZExvorW?editors=0011) |
| Kunda#2800 | [Codepen](https://codepen.io/kunda0818/pen/gOeozNy?editors=0010) |
| Ada | [CodePen](https://codepen.io/zggsoagv-the-scripter/pen/MWVrXgJ) |
| yuyu#6310 | [CodePen](https://codepen.io/yuyu0905/pen/wvmpxdr?editors=0011) |
| hahaalin#3209 | [CodePen](https://codepen.io/shellyPen/pen/wvmpEJR) |
| Joechiboo | [CodePen](https://codepen.io/joe-chiboo/pen/xxWpQRo) |
| Chelly#6129 | [CodePen](https://codepen.io/chellyhsu/pen/ZExadQV) |
|布魯布魯#6177|[CodePen](https://codepen.io/akai-huang/pen/wvmprNg)|
|Vivi0225#3634|[Codepen](https://codepen.io/vivian820225/pen/yLKPvbP)|
|TaoDoris#5230|[Codepen](https://codepen.io/taomaomao/pen/xxWpmoP?editors=0011)|
史蒂夫#5075 |[Codepen](https://codepen.io/TaroPanda/pen/zYWPEyb)|
Rose Wu#1669|[Codepen](https://codepen.io/Rose-Wu/pen/MWVrxGZ)|
小班#3324|[Codepen](https://codepen.io/jlhung168/pen/XWEVQad?editors=1111)|
Rikku#1756|[Codepen](https://codepen.io/rikkubook/pen/zYWpQwR?editors=0011)|
山貓(焜)#7041|[Codepen](https://codepen.io/pen?template=OJvzYoM)|
| POKA#2168 | [Codepen](https://codepen.io/POKAHSIAO/pen/BarJXBx?editors=0011) |
| ----------------- | ----------------------------------------------------------------- |
| 真．穎旻粉撕#4995 | [CodePen](https://codepen.io/gbnbihif/pen/wvmpVBx?editors=0012) |
| 喬喬#2824 | [CodePen](https://codepen.io/joanne-wei/pen/bGvaXoz?editors=0011) |
| Mitour#0672 | [codepen](https://codepen.io/mitour/pen/QWmQjxx?editors=0011) |
| Emily Hsi #9066 | [codepen](https://codepen.io/EmilyHsi/pen/RwMQawq) |
| andersonshen#4675 | [codepen](https://codepen.io/luxyenni-the-bold/pen/LYdQNov) |
| whatsupmm#6761 | [Codepen](https://codepen.io/meidada/pen/YzaeWYq?editors=1112) |
|EvaLin#4546 | [Codepen](https://codepen.io/evalin0316/pen/QWmQNxG?editors=1112)
| Anson #3594 | [Codepen](https://codepen.io/huanmingchang/pen/jOzZMmR?editors=1012) |
| leoneboy#0851 | [Codepen](https://codepen.io/Leoneboy/pen/oNqEWvq?editors=0012) |
| 時雨#8837 | [Codepen](https://codepen.io/jjustin-35/pen/BarYJox?editors=0011) |
| 連小艾#0791 | [Codepen](https://codepen.io/bolaslien/pen/oNqEpde?editors=0011) |
|Judy☻|[Codepen](https://codepen.io/hsiaohan/pen/rNdJpvx?editors=0011)|
|Mori#5582|[Codepen](https://codepen.io/flower9312/pen/ZExrrWB)|
|anby#7112|[Codepen](https://codepen.io/andy-ch-bo-an/pen/KKoQQmM?editors=0011)|
|鉛筆#7763|[Codepen](https://codepen.io/zoeguava/pen/eYMVMNr?editors=0011)|
|彼得#1923|[Codepen](https://codepen.io/shiou-ho/pen/PoRQgeB)|
|Shani#4593|[Codepen](https://codepen.io/ShaniMa/pen/wvmyOXq)|
|hobby#6565|[Codepen](https://codepen.io/hobbyling/pen/vYRROZQ)|
|yiwun#0953|[Codepen](https://codepen.io/kagamiakira_IBUN/pen/LYddpPM)|
|RayRayHuang#1998|[Codepen](https://codepen.io/hongrueihuang/pen/wvmmeQe)|
|Shau#6400|[Codepen](https://codepen.io/shau-chen/pen/rNddzYB)|
|HsuMing#6772|[CodePen](https://codepen.io/hsu860112/pen/qBooVag)
|小夜#3809|[CodePen](https://codepen.io/Naito_K/pen/rNddJGy?editors=0011)
|MarsKuo#6015|[CodePen](https://codepen.io/MarsKuo/pen/qBooxvy)
|Murmurline#6969|[CodePen](https://codepen.io/murmurline/pen/GRxxBBZ)
| Carol Li #2269|[Codepen](https://codepen.io/carolli834/pen/GRxxYza?editors=0011)|
|Josh DB #3366|[Codepen](https://codesandbox.io/s/ke-qian-day-5-chang-jian-js-zhen-lie-fang-fa-lian-xi-jmetd0?file=/src/index.js)|
|蘇蘇#0426|[Codepen](https://codepen.io/sabine1123/pen/OJvZVGK)|
|NinaKuo#3332 |[CodePen](https://codepen.io/ninakuo0814/pen/qBoYbYZ)|
|阿暟 |[CodePen](https://codepen.io/patrickrrr007/pen/GRxxMMz?editors=1011)|
|許揚民 Evan#4546 |[CodePen](https://codepen.io/gitevanhsu/pen/mdxLvNv?editors=0011)|
| 咻蹦#1526 |[CodePen](https://codepen.io/emmasyu/pen/ZExoZOM)|
| 龜人#7299 |[CodePen](https://codepen.io/dullshen/pen/oNqyNmO?editors=0011)|
|Justin |[CodePen](https://codepen.io/just-perfect/pen/wvmXBbj?editors=0010)|
|Louise|[CodePen](https://codepen.io/LouiseHuang/pen/poLKqwL)|
|toshow#5609|[CodePen](https://codepen.io/toshow/pen/jOzKdoN)|
|CookieSSS#6991|[CodePen](https://codepen.io/sqhjikpa-the-selector/pen/poLZJYz)|
|qing#7665|[CodePen](https://codepen.io/cellur/pen/QWmBdYE?editors=0011)|
|sophiee#7015|[CodePen](https://codepen.io/sophiee2727/pen/mdxjxxv?editors=1111)|
|Cherry ZY#4647|[CodePen](https://codepen.io/qoosdd89382/pen/rNdZXRK?editors=0010)|
|雪莉#4827|[CodePen](https://codepen.io/utshang216/pen/wvmYvvx?editors=1111)|
|SunnyCheng#4113|[CodePen](https://codepen.io/Sunny0509/pen/LYdgLxx?editors=1011)|
|hsiuhsiu #7412|[CodePen](https://codepen.io/hsiuhsiu/pen/XWExzJr?editors=0011)|
|eching#9183|[CodePen](https://codepen.io/echin/pen/zYWMZWE)|
|helen #1041 |[CodePen](https://codepen.io/Tian-Lin/pen/vYRQMjV)|
|kancheng#3915|[CodePen](https://codepen.io/kancheng/pen/JjLeVBp)|
|Eileen#6454|[CodePen](https://codepen.io/Eileen-io/pen/VwXgJGe)|
|ninipopo#7983|[CodePen](https://codepen.io/Robinnini/pen/LYdaZmP?editors=1012)|
|SleepWalk#1635|[CodePen](https://codepen.io/arthurliinn/pen/MWVLGgR?editors=0011)|
|yaru#6308|[CodePen]([https://codepen.io/arthurliinn/pen/MWVLGgR?editors=0011](https://codepen.io/lszaietc/pen/GRxXddg?editors=0011))|
| beta lin#1445 |[CodePen](https://codepen.io/linbeta/pen/WNzqwqq) |
| Neuf#3083 | [Codepen](https://codepen.io/yifanneuf/pen/GRdKrNx?editors=1111)|
| Amy |[CodePen](https://codepen.io/crazzyamy/pen/jOJgoeE?editors=0002)|
| 陳sam | [CodePen](https://codepen.io/euldpliv/pen/NWmbpjw?editors=1112)|
Sign in with Wallet
Connect another wallet