---
# System prepended metadata

title: "\U0001F3C5 課前 Day 4 ｜ JavaScript 展開與其餘"
tags: [2022 React 新手讀書會]

---

---
tags: 2022 React 新手讀書會
---
# 🏅 課前 Day 4 ｜ JavaScript 展開與其餘

展開運算子與其餘運算子都與**陣列**有關，運用的符號都是 `...`

## 展開運算子
### 組合陣列
過去要組合陣列會使用 concat 陣列方法：

```javascript=
let adults = ['爸爸', '媽媽'];
let kids = ['妹妹', '弟弟'];
const family = adults.concat(kids);
console.log(family); // ['爸爸', '媽媽', '妹妹', '弟弟']
```

但藉由 ES6 的`展開運算子`語法，下方程式碼也可達到一樣效果，讓程式碼可以更精簡：

```javascript=
let adults = ['爸爸', '媽媽'];
let kids = ['妹妹', '弟弟'];
const family = [...adults, ...kids];
console.log(family); // ['爸爸', '媽媽', '妹妹', '弟弟']
```

展開運算子實際上是一次又一次的 `return` 陣列中的值
```javascript=
console.log(...adults);
// '爸爸'
// '媽媽'
```

### 淺層複製
陣列有**傳參考**的特性，如果直接將陣列直接賦予到另外一個陣列，當修改其中一個陣列時，另一個也會跟著變動：
```javascript=
let kidsA = ['妹妹', '弟弟'];
let kidsB = kidsA;
kidsB.push('姊姊');
console.log(kidsA); // ['妹妹', '弟弟', '姊姊']
console.log(kidsB); // ['妹妹', '弟弟', '姊姊']
```
由於展開運算子會一次一次地將值寫入，所以他可以淺層複製（淺拷貝 shallow copy）：
```javascript=
let kidsA = ['妹妹', '弟弟'];
let kidsB = [...kidsA];
kidsB.push('姊姊');
console.log(kidsA); // ['妹妹', '弟弟']
console.log(kidsB); // ['妹妹', '弟弟', '姊姊']
```

### 將類陣列轉成純陣列
像是 DOM 陣列可以透過展開運算子轉變為純陣列，使其可以運用陣列的方法：
```javascript=
let doms = document.querySelectorAll('p');
console.log(doms);
let spreadDom = [...doms];
console.log(spreadDom);
```

### 可以將字串拆開
```javascript=
let str = "string";
console.log(...str); // 's','t','r','i','n','g'
```


## 其餘運算子
通常運用在**函式傳入參數的定義**中：
```javascript=
// ...b：其餘參數，會將不確定的傳入參數值們，轉變為陣列做運算
function printFn(a, ...b) {
  console.log('a: ', a, ', b: ', b);
}

printFn(1,2,3);
// a: 1, b: [2, 3]
```
> 注意：在函式傳入參數的定義中，其餘參數需**放在最後**，並且**只能有一個**其餘參數

若是呼叫函式時，其餘參數的值沒有傳入，會變為一個空陣列：
```javascript=
printFn(1); // a: 1, b: []
printFn();  // a: undefined, b: []
```

其餘運算子也會運用在**解構賦值**中：
```javascript=
const [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

// 若是值沒有對應到，一樣會轉為空陣列
const [a, b, ...c] = [1];
console.log(a); // 1
console.log(b); // undefined
console.log(c); // []
```
> 注意：在解構賦值中，其餘運算子一樣需**放在最後**，並且**只能有一個**





## 題目一

請運用展開運算子，優化下方程式碼
```javascript=
const numA = [1,2,3];
const numB = [4,5,6];
const numbers = numB.concat(numA);
```

<!-- 
const numbers = [...numB, ...numA];
-->

## 題目二
下方為其餘參數搭配解構賦值的函式，請先嘗試觀察並手動計算出下方答案，再直接使用程式碼觀看解答
```javascript=
function sumFn(a, ...[x,y]) {
  // console.log(x,y);
  return a + x*y;
}

sumFn(1, 2, 3);         
sumFn(1, 2, 3, 4);      
sumFn('1','2','3','4'); 
sumFn(1);               
```

<!-- 
sumFn(1, 2, 3);         // 7
sumFn(1, 2, 3, 4);      // 7
sumFn('1','2','3','4'); // '16'
sumFn(1);               // NaN 
-->



## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
![](https://i.imgur.com/vftL5i0.png)



回報區
---


|         Discord         |                                              CodePen / 答案                                              |
|:-----------------------:|:--------------------------------------------------------------------------------------------------------:|
|          洧杰           |                                      [CodePen](https://codepen.io/)                                      |
|       yunyun#5215       |                           [CodePen](https://codepen.io/yun_yunni/pen/dymVEZy)                            |
| React-慧茹(拉拉醬)#3414 |                   [CodePen](https://codepen.io/lala-lee-jobs/pen/VwXMOyY?editors=0011)                   |
|         hw#0715         |                             [Codepen](https://codepen.io/Lhwei/pen/VwXMOxL)                              |
|        𝓛𝓊𝒸𝓎#8635        |                            [Codepen](https://codepen.io/lucygirl/pen/MWVEdzP)                            |
|     Bumble幫啵#0255     |                      [Codepen](https://codepen.io/lmpzezvw-the-lessful/pen/JjLrqOq)                      |
|       AllenW#1132       |                      [Codepen](https://codepen.io/AllenW/pen/KKoXLGe?editors=0012)                       |
|       Evonne#7078       |                     [Codepen](https://codepen.io/Hsu1Fang/pen/OJvxYom?editors=0112)                      |
|        LEO#7779         |                            [Codepen](https://codepen.io/nekorice/pen/jOzGoaY)                            |
|     DIANAxAKKO#4298     |                     [Codepen](https://codepen.io/redfire29/pen/qBoPGed?editors=0012)                     |
|        Kimi#2092        |                           [Codepen](https://codepen.io/a3216lucy/pen/PoRJvQW)                            |
|       hobby#6565        |                           [Codepen](https://codepen.io/hobbyling/pen/JjLrqVj)                            |
|      Mr.Sean#3825       |                     [Codepen](https://codepen.io/sean_1215/pen/QWmqRXx?editors=1111)                     |
|        城堡#2126        |                           [Codepen](https://codepen.io/tthcastle/pen/LYdzoME)                            |
|     alphatero#8299      |                           [Codepen](https://codepen.io/alphatero/pen/zYWEVYg)                            |
|      rainbow#3329       |                    [Codepen](https://codepen.io/g901612002/pen/YzaroXN?editors=0011)                     |
|       Paper#1658        |                          [Codepen](https://codepen.io/paper_hsiao/pen/KKoXjPG)                           |
|     Vada Chen #2055     |                            [Codepen](https://codepen.io/vadachen/pen/WNzZByd)                            |
|       布魯諾#7239       |                     [Codepen](https://codepen.io/bruno-yu/pen/KKoXjwG?editors=1011)                      |
|       YuZhun#1362       |                      [Codepen](https://codepen.io/danzhun/pen/oNqGrLz?editors=0011)                      |
|      Eric Su#7798       |                             [Codepen](https://codepen.io/wc-su/pen/eYMGwZw)                              |
|        Rice#8043        |                     [Codepen](https://codepen.io/riecball/pen/YzaroNV?editors=1010)                      |
|   Carolkiki2003#7399    |                            [Codepen](https://codepen.io/wasfzuig/pen/oNqGrWB)                            |
|        SHIN#6075        |                            [Codepen](https://codepen.io/shin9626/pen/dymVBzv)                            |
|       CofCat#9226       |                     [Codepen](https://codepen.io/cofcat456/pen/wvmrLgX?editors=1112)                     |
|       Yiling#4054       |                      [Codepen](https://codepen.io/lin010/pen/GRxMbxx?editors=0011)                       |
|       黃士桓#7654       |                         [codePen](https://codepen.io/shr-huan-huang/pen/wvmrLXQ)                         |
|       Morris#8755       |                     [Codepen](https://codepen.io/morrisss/pen/gOeGNzz?editors=1111)                      |
|     座標33129#8748      |                            [Codepen](https://codepen.io/ad80352/pen/Barwegm)                             |
|     christina#6185      |                           [Codepen](https://codepen.io/chrisc0210/pen/vYReqrp)                           |
|      ChloeLo#4858       |                            [Codepen](https://codepen.io/chloelo/pen/ZExXdaz)                             |
|        Ayre#0016        |                             [Codepen](https://codepen.io/pen/?editors=0011)                              |
|      Timothy#5863       |                   [Codepen](https://codepen.io/timothy_hippo/pen/GRxMbVX?editors=1011)                   |
|       連小艾#0791       |                     [Codepen](https://codepen.io/bolaslien/pen/poLWMzv?editors=0011)                     |
|       Arista#5802       |                          [Codepen](https://codepen.io/arista-hsieh/pen/QWmqejW)                          |
|         Wu#0167         |                           [Codepen](https://codepen.io/Xander0705/pen/ExEwqxW)                           |
|        威爾#1694        |                            [CodePen](https://codepen.io/WILL_Wu/pen/GRxMVNz)                             |
|      Jordan_Tseng       |                   [CodePen](https://codepen.io/tingchun0131/pen/vYReoaP?editors=1011)                    |
|      kevinhes#2881      |                     [codePen](https://codepen.io/kevinhes/pen/WNzZVmG?editors=0012)                      |
|    count1count2#9636    |                    [CodePen](https://codepen.io/souhakusou/pen/JjLrgxa?editors=0012)                     |
|     JanllyGuo#0208      |                            [CodePen](https://codepen.io/kedugaw/pen/PoROYoP)                             |
|     hiYifang #0736      |                            [CodePen](https://codepen.io/hiYifang/pen/yLKzddN)                            |
|       Stacy#1442        |                            [CodePen](https://codepen.io/keebibmh/pen/ExEbYje)                            |
|        m_m#5493         |                           [Codepen](https://codepen.io/minnn7716/pen/xxWPKZQ)                            |
|       easton#3863       |                 [Codepen](https://codepen.io/EastonIsCodingNow/pen/eYMeORj?editors=1111)                 |
|        shoppingq        |                           [CodePen](https://codepen.io/shoppingq/pen/PoROYKG)                            |
|     Sylvia-H #0024      |                          [CodePen](https://codepen.io/Cosmosheart/pen/NWYwKjj)                           |
|        L0F0#8733        |                       [CodePen](https://codepen.io/l0f0/pen/qBoVWyW?editors=0011)                        |
|       眼睛 #0314        |                    [CodePen](https://codepen.io/thrizzacode/pen/mdxqbGr?editors=0011)                    |
|       露易莎#7673       |                    [Codepen](https://codepen.io/louisa-lin/pen/GRxOKPr?editors=1111)                     |
|      fannnny#7112       |                      [Codepen](https://codepen.io/fannyHO/pen/jOzaNXx?editors=0010)                      |
|        小熊#0685        |                             [Codepen](https://codepen.io/pen/?editors=0011)                              |
|        Iris#8462        |                            [Codepen](https://codepen.io/irissamy/pen/OJvOLdg)                            |
|    andersonshen#4675    |                       [Codepen](https://codepen.io/luxyenni-the-bold/pen/bGvYbya)                        |
|       Yukon#2618        |                            [Codepen](https://codepen.io/ukowork/pen/qBoVBbb)                             |
|         JC#8658         |                     [Codepen](https://codepen.io/jcsamoyed/pen/jOzaOJg?editors=0011)                     |
|        ZengZeng         |                            [Codepen](https://codepen.io/tyzyoko/pen/eYMeYrm)                             |
|       Mitour#0672       |                             [Codepen](https://codepen.io/mitour/pen/MWVOYWa)                             |
|      IreneLee#7932      |               [Codepen](https://codepen.io/ntjtcxpt-the-animator/pen/PoROwaM?editors=1010)               |
|       黑白兔#0684       |                           [Codepen](https://codepen.io/johnny329/pen/JjLrgrL)                            |
|       Kelvin#3296       |                          [Codepen](https://codepen.io/kelvinchang/pen/rNdYaeW)                           |
|     Emily Hsi #9066     |                            [Codepen](https://codepen.io/EmilyHsi/pen/QWmObjp)                            |
|        RON#2813         |                             [Codepen](https://codepen.io/Ron115/pen/WNzXvrp)                             |
|     Robert Lo #9653     |                     [Codepen](https://codepen.io/Robert-Lo/pen/NWYwPmr?editors=0012)                     |
|   Midnightdinner#6220   |                           [Codepen](https://codepen.io/woowooyong/pen/mdxqeVw)                           |
|        BEAN#8402        |                     [Codepen](https://codepen.io/Beanhuang/pen/rNdYOwB?editors=0011)                     |
|        shin#5792        |                            [Codepen](https://codepen.io/hah1030/pen/abYVdEE)                             |
|       Tsuei#9284        |                     [Codepen](https://codepen.io/AlbertoLL/pen/zYWPrpE?editors=0011)                     |
|       Emily#3648        |                       [Codepen](https://codepen.io/flien/pen/MWVOKEb?editors=0011)                       |
|      Stanley#2505       |                           [Codepen](https://codepen.io/bigbearada/pen/GRxOoPV)                           |
|       Yihan#5560        |                    [Codepen](https://codepen.io/h513hh513h/pen/oNqobRJ?editors=0011)                     |
|        Rui#5058         |                      [Codepen](https://codepen.io/rui0208/pen/rNdYexv?editors=1011)                      |
|     Tao Doris #5230     |                     [Codepen](https://codepen.io/taomaomao/pen/gOeGJdg?editors=0011)                     |
|       A-Kai#2134        |                    [Codepen](https://codepen.io/kenneth1002/pen/bGvYpqg?editors=0011)                    |
|        Otis#8455        |                     [Codepen](https://codepen.io/humming74/pen/MWVOyXB?editors=1012)                     |
|  charlottelee849#0366   |                   [Codepen](https://codepen.io/charlotte-lee/pen/VwXradL?editors=0012)                   |
|       Yanyan#3555       |                           [codepen](https://codepen.io/wei-yi-lee/pen/ExEbKBB)                           |
|       wiimax#4564       |                           [Codepen](https://codepen.io/willismax/pen/poLdbjQ)                            |
|       ねこ*#9385        |                    [Codepan](https://codepen.io/kunpao0104/pen/JjLOKYd?editors=0012)                     |
|       lloyd#8224        |                           [Codepen](https://codepen.io/thanatus25/pen/RwMjRWp)                           |
|       Claire#2116       |                    [Codepen](https://codepen.io/claire-chang-the-bashful/pen/wvmPWWm)                    |
|       紅豆豆#0518       |                     [Codepen](https://codepen.io/zoseqlpc/pen/GRxOqxQ?editors=1111)                      |
|       灰塵貓#7994       |                     [Codepen](https://codepen.io/rjk66268/pen/QWmOEEV?editors=1111)                      |
|        Mori#5582        |                           [Codepen](https://codepen.io/flower9312/pen/gOeXMve)                           |
|     Dylan_Lin#7320      |                     [Codepen](https://codepen.io/lin-dylan/pen/LYdzKQW?editors=0011)                     |
|      Evileye#0666       |                      [Codepen](https://codepen.io/gn-lin/pen/GRxOjWP?editors=0010)                       |
|      yoshidc#0455       |                            [Codepen](https://codepen.io/yoshiyyc/pen/xxWPEpp)                            |
|        Wins#8457        |                    [Codepen](https://codepen.io/winszhuang/pen/BarmLXo?editors=1112)                     |
|       楓之聲#6945       |                           [Codepen](https://codepen.io/sshane258/pen/OJvObxR)                            |
|       Overy#4545        |                          [Codepen](https://codepen.io/overy-tsai/full/eYMeBgr)                           |
|          moitw          |                      [Codepen](https://codepen.io/tsuifei/pen/qBoVjOd?editors=1010)                      |
|        薯餅#3581        |                         [Codepen](https://codepen.io/ColdingPoTaTo/pen/mdxqJOJ)                          |
|      Evachan#5729       |                      [Codepen](https://codepen.io/Eva-go/pen/dymZVGL?editors=1010)                       |
|      LinaChen#1796      |                            [Codepen](https://codepen.io/LinaChen/pen/KKoyXzq)                            |
|      JessSong#5050      |                           [Codepen](https://codepen.io/jssanji03/pen/ZExaXXo)                            |
|      Double C#7388      |                            [codepen](https://codepen.io/Double-C/pen/MWVOEzB)                            |
|      hahaalin#3209      |                           [codepen](https://codepen.io/shellyPen/pen/VwXrMNv)                            |
|        east#4003        |                       [codepen](https://codepen.io/EastM/pen/BarmwXd?editors=0010)                       |
|           aki           |                             [codepen](https://codepen.io/aki168/pen/RwMjLdR)                             |
|       HedgehogKU        |                   [CodePed](https://codepen.io/hedgehogkucc/pen/YzaEEzW?editors=0010)                    |
|       IceSam#7836       |                            [CodePen](https://codepen.io/sam-hsu/pen/KKoyyRE)                             |
|     SunnyCheng#4113     |                     [CodePen](https://codepen.io/Sunny0509/pen/ExEbbzg?editors=1011)                     |
|        葉秋#2335        |                            [CodePen](https://codepen.io/as880074/pen/xxWPpGd)                            |
|        zzly#9134        |                              [CodePen](https://codepen.io/ly00/pen/mdxqprG)                              |
|     Alex Liao#8538      |                           [CodePen](https://codepen.io/alex0207s/pen/QWmOagw)                            |
|       JarDar#6980       |                           [codepen](https://codepen.io/jardarpen/pen/zYWPpPz)                            |
|      Li-Ninja#0471      |                     [CodePen](https://codepen.io/li-ninja/pen/eYMeyMv?editors=0011)                      |
|      Vivi0225#3634      |                          [Codepen](https://codepen.io/vivian820225/pen/dymZZWO)                          |
|        家洋#6999        |                          [codepen](https://codepen.io/aa235553756/pen/ZExaxQw)                           |
|        小班#3324        |                     [codepen](https://codepen.io/jlhung168/pen/dymZmqW?editors=1111)                     |
|       Seijo#1585        |                    [Codepen](https://codepen.io/SeijoHuang/pen/oNqoqmW?editors=0011)                     |
|         翔#0859         |                          [Codepen](https://codepen.io/energy95272z/pen/xxWPWeR)                          |
|        Nico#8739        |                             [Codepen](https://codepen.io/Nicof2e/pen/ZExaxmE)                             |
|         keep#4336         |                       [Codepen](https://codepen.io/keep-/pen/bGvYvwv?editors=1111)                       |
|       wenyun#2362       |                     [Codepen](https://codepen.io/wenyuncc/pen/KKoyRvd?editors=0011)                      |
|       hungya#0773       |                     [Codepen](https://codepen.io/hungya777/pen/QWmOxJO?editors=0011)                     |
|     kyle890721#1016     |                           [Codepen](https://codepen.io/KYLE890721/pen/gOeXdmZ)                           |
|        niel#2413        |                     [Codepen](https://codepen.io/danielhsu/pen/WNzXgVw?editors=0011)                     |
|       陳sam#9117        |                       [Code](https://codepen.io/euldpliv/pen/KKoyGzm?editors=1111)                       |
|        魚魚#1220        |                     [Codepen](https://codepen.io/vkkkmkbv-the-selector/pen/RwMjqGK)                      |
|       james#1443        |                   [Codepen](https://codepen.io/clothn0105700/pen/MWVOzKZ?editors=0011)                   |
|       Zihur#7755        |                       [Codepen](https://codepen.io/Zihur/pen/jOzaXEj?editors=0011)                       |
|      crowley#7180       |                       [Codepen](https://codepen.io/pon88/pen/qBoPzQm?editors=0011)                       |
|       Chelly#6129       |                     [CodePen](https://codepen.io/chellyhsu/pen/NWYwVzj?editors=1011)                     |
|       Kunda#2800        |                     [CodePen](https://codepen.io/kunda0818/pen/yLKPdQW?editors=0010)                     |
|         GL#2256         |                             [Codepen](https://codepen.io/4genie/pen/rNdYXvy)                             |
|       Kenge#3690        |                             [Codepen](https://codepen.io/pgkusn/pen/xxWPRoK)                             |
|      TedWang#7721       |                    [Codepen](https://codepen.io/wangtaiyan/pen/RwMxbOr?editors=1011)                     |
|        無名#6427        |                      [Codepen](https://codepen.io/Nomoney/pen/WNzdNQM?editors=0012)                      |
|          k.sin          |                      [Codepen](https://codepen.io/sin588/pen/qBopBaE?editors=0011)                       |
|       Rocker#6235       |                           [Codepen](https://codepen.io/RockerLi/pen/abYEbQd``)                           |
|        Neal#0665        |                      [Codepen](https://codepen.io/neallkf/pen/poLpJje?editors=0012)                      |
|     Susie(軒)#6181      |                            [Codepen](https://codepen.io/Codeleaf/pen/zYWpGJm)                            |
|       Renren#8437       |                    [Codepen](https://codepen.io/ehren-chen/pen/gOeoado?editors=0011)                     |
|      Tuhacrt#0008       |                            [Codepen](https://codepen.io/Tuhacrt/pen/GRxyoKx)                             |
|        𝔼.𝕎#4742         |                           [Codepen](https://codepen.io/kidult316/pen/Bardvza)                            |
|       huch09#1426       |                 [Codepen](https://codepen.io/subarashii-huch09/pen/KKoZNjQ?editors=1011)                 |
|      JimHwang#3594      |                     [Codepen](https://codepen.io/jimh1129/pen/MWVrJvZ?editors=1111)                      |
|       Pandaa#7740       |                           [Codepen](https://codepen.io/pandaachu/pen/zYWpZZK)                            |
|           Zoe           |                     [CodePen](https://codepen.io/Zoechiueh/pen/yLKpMOB?editors=0011)                     |
|        emma#3398        |                      [Codepen](https://codepen.io/itsems/pen/vYRpNzZ?editors=1011)                       |
|      布魯布魯#6177      |                    [CodePen](https://codepen.io/akai-huang/pen/GRxyMYp?editors=0011)                     |
|    bonnieli1414#4906    |                   [Codepen](https://codepen.io/bonnieli1414/pen/BarJwvQ?editors=0011)                    |
|        lingxuan         |                   [Codepen](https://codepen.io/lingxuan0618/pen/LYdedyV?editors=1111)                    |
|       KuoMin#4931       |                      [Codepen](https://codepen.io/KuoMin/pen/vYRpJEW?editors=1011)                       |
|     JimmyChang#5558     |                 [Codepen](https://codepen.io/JimmyChangWenChi/pen/YzaYLZY?editors=0012)                  |
|           Ada           |                     [Codepen](https://codepen.io/zggsoagv-the-scripter/pen/YzaYLBO)                      |
|        yuyu#6310        |                     [Codepen](https://codepen.io/yuyu0905/pen/yLKpOdj?editors=0011)                      |
|        Joechiboo        |                           [Codepen](https://codepen.io/joe-chiboo/pen/poLpQgV)                           |
|       史蒂夫#5075       |                           [Codepen](https://codepen.io/TaroPanda/pen/oNqoxNm)                            |
|      Rose Wu#1669       |                            [Codepen](https://codepen.io/Rose-Wu/pen/oNqpVZg)                             |
|       Rikku#1756        |                     [Codepen](https://codepen.io/rikkubook/pen/vYRpwKb?editors=0011)                     |
|      山貓(焜)#7041      |                             [Codepen](https://codepen.io/nopeta/pen/poLpmVw)                             |
|        POKA#2168        |                     [Codepen](https://codepen.io/POKAHSIAO/pen/abYEgab?editors=0011)                     |
|      leoneboy#0851      |                     [Codepen](https://codepen.io/Leoneboy/pen/GRxyaep?editors=1012)                      |
|    真．穎旻粉撕#4995    |                     [CodePen](https://codepen.io/gbnbihif/pen/bGvaXbj?editors=0012)                      |
|        喬喬#2824        |                    [CodePen](https://codepen.io/joanne-wei/pen/PoRErBJ?editors=0011)                     |
|       yolala#7070       |                          [CodePen](https://codepen.io/chiakilalala/pen/jOzYvPJ)                          |
|     whatsupmm#6761      |                      [Codepen](https://codepen.io/meidada/pen/xxWpyKp?editors=1112)                      |
|       Anson #3594       |                   [Codepen](https://codepen.io/huanmingchang/pen/BarYLWO?editors=1012)                   |
|          Judy☻          |                     [Codepen](https://codepen.io/hsiaohan/pen/ExEQoja?editors=0011)                      |
|        anby#7112        |                   [Codepen](https://codepen.io/andy-ch-bo-an/pen/GRxQybw?editors=0011)                   |
|        鉛筆#7763        |                     [Codepen](https://codepen.io/zoeguava/pen/xxWYWbm?editors=0011)                      |
|        彼得#1923        |                            [Codepen](https://codepen.io/shiou-ho/pen/KKoQEwv)                            |
|       Shani#4593        |                            [Codepen](https://codepen.io/ShaniMa/pen/MWVQxVq)                             |
|      Josh DB#3366       | [Codepen](https://codesandbox.io/s/ke-qian-day-4-javascript-zhan-kai-yu-qi-yu-uungtx?file=/src/index.js) |
|       yiwun #0953       |                        [Codepen](https://codepen.io/kagamiakira_IBUN/pen/xxWpwaZ)                        |
|    RayRayHuang#1998     |                         [Codepen](https://codepen.io/hongrueihuang/pen/VwXXWBY)                          |
|        Shau#6400        |                           [Codepen](https://codepen.io/shau-chen/pen/YzaaxQZ)                            |
|      JasonLu#7313       |                                               [Codepen]()                                                |
|      HsuMing#6772       |                           [CodePen](https://codepen.io/hsu860112/pen/ExEEbaR)                            |
|        小夜#3809        |                      [CodePen](https://codepen.io/Naito_K/pen/NWYXOWP?editors=0011)                      |
|      MarsKuo#6015       |                            [CodePen](https://codepen.io/MarsKuo/pen/jOzzZLP)                             |
|     Murmurline#6969     |                           [CodePen](https://codepen.io/murmurline/pen/yLKKjRd)                           |
|     Carol Li #2269      |                    [Codepen](https://codepen.io/carolli834/pen/zYWWYYa?editors=0011)                     |
|      kir4che#7701       |                            [Codepen](https://codepen.io/kir4che/pen/RwMMXvj)                             |
|        蘇蘇#0426        |                           [Codepen](https://codepen.io/sabine1123/pen/vYRjOvQ)                           |
|      NinaKuo#3332       |                          [CodePen](https://codepen.io/ninakuo0814/pen/bGvMVJR)                           |
|    許揚民 Evan#4546     |                    [CodePen](https://codepen.io/gitevanhsu/pen/yLKjZdJ?editors=0011)                     |
|        龜人#7299        |                     [CodePen](https://codepen.io/dullshen/pen/LYdrYyJ?editors=0011)                      |
|         justin          |                   [CodePen](https://codepen.io/just-perfect/pen/jOzKEwz?editors=0010)                    |
|         Louise          |                          [CodePen](https://codepen.io/LouiseHuang/pen/MWVXmRK)                           |
|       toshow#5609       |                             [CodePen](https://codepen.io/toshow/pen/QWmxYoe)                             |
|     CookieSSS#6991      |                     [CodePen](https://codepen.io/sqhjikpa-the-selector/pen/poLZvEd)                      |
|        qing#7665        |                             [CodePen](https://codepen.io/pen/?editors=0011)                              |
|        yaru#6308        |                     [CodePen](https://codepen.io/lszaietc/pen/mdxjmzX?editors=0012)                      |
|        sophiee#7015     |                     [CodePen](https://codepen.io/sophiee2727/pen/YzajaQj?editors=0111)                      |
|Frank#5177|[CodePen](https://codepen.io/Frankhu5150/pen/PoRdRvv?editors=0011)|
|Cherry ZY#4647|[CodePen](https://codepen.io/qoosdd89382/pen/dymqxQE?editors=0010)|
|雪莉#4827|[CodePen](https://codepen.io/utshang216/pen/zYWmOQY?editors=1111)|
|hsiuhsiu #7412|[CodePen](https://codepen.io/hsiuhsiu/pen/QWmZqNq?editors=0012)|
|SleepWalk#1635|[CodePen](https://codepen.io/arthurliinn/pen/NWYOXZd?editors=0012)|
|eching#9183|[CodePen](https://codepen.io/echin/pen/dymQNPM?editors=0011)|
|helen #1041 |[CodePen](https://codepen.io/Tian-Lin/pen/yLKQrey)|
|kancheng#3915 |[CodePen](https://codepen.io/kancheng/pen/PoRxgOL)|
|ninipopo#7983 |[CodePen](https://codepen.io/Robinnini/pen/abYMNBy?editors=1111)|
| beta lin#1445 | [CodePen](https://codepen.io/linbeta/pen/RwMzaKZ) |
| Neuf#3083 | [Codepen](https://codepen.io/yifanneuf/pen/LYmPxYR?editors=1111)|