---
# System prepended metadata

title: "\U0001F3C5 課前 Day 3｜ ES6 陣列解構與強化"
tags: [2022 React 新手讀書會]

---

---
tags: 2022 React 新手讀書會
---
# 🏅 課前 Day 3｜ ES6 陣列解構與強化

陣列同樣也有解構賦值的寫法，本次讀書會使用到的 React Hooks 也經常被使用。

### 陣列解構
以前我們要讀取陣列裡面的值，都會使用如下程式碼來取值：

```javascript=
const family = ['爸','媽','姊姊','哥哥'];

// 一般會這樣寫
const papa = family[0];
const mama = family[1];
const sister = family[2];
const brother = family[3];
```

但藉由 ES6 的`陣列解構`語法，下方程式碼也可達到一樣效果，讓程式碼可以更精簡：

```javascript=
const family = ['爸','媽','姊姊','哥哥'];

// 縮寫版
const [papa, mama, sister, brother] = family;

console.log(papa);    // '爸爸'
console.log(sister);  // '姊姊'
```

若是遇到空的變數，會將值跳過

```javascript=
const family = ['爸','媽','姊姊','哥哥'];
const [papa, , , brother] = family;

console.log(papa);    // '爸爸'
console.log(brother); // '哥哥'
```

若是左邊的變數數量多餘右邊的值，會將多出來的變數賦予 `undefined`

```javascript=
const family = ['爸','媽','姊姊','哥哥'];
const [papa, , , brother, grandpa] = family;  // 有五個變數

console.log(papa);    // '爸爸'
console.log(brother); // '哥哥'
console.log(grandpa); // undefined
```

若是值為**字串**，會將字串拆解為一個一個字元

```javascript=
const family = 'family';
const [papa, , , brother, grandpa] = family;

console.log(papa);    // 'f'
console.log(brother); // 'i'
console.log(grandpa); // 'l'
```

**可以輕易互換變數**

```javascript=
let papa = '爸爸';
let mama = '媽媽';

[papa, mama] = [mama, papa];

console.log(papa); // '媽媽'
console.log(mama); // '爸爸'
```

## 題目一

優化下方將陣列內的值賦予到變數上的寫法

```javascript=
const students = ['安妮', '露璐', '努努', '索娜', '艾希'];
const lulu = students[1];
const nunu = students[2];
const ashe = students[4];
```

## 題目二
請運用陣列解構賦值，將下方 numbers 變數內 1 和 5 對調，變為 `[5, 7, 1]`
```javascript=
let numbers = [1, 7, 5];

[...] = [...]

console.log(numbers);
```


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



回報區
---


|         Discord         | CodePen / 答案                                                               |
|:-----------------------:| ---------------------------------------------------------------------------- |
|          洧杰           | [CodePen](https://codepen.io/)                                               |
|       yunyun#5215       | [CodePen](https://codepen.io/yun_yunni/pen/zYWEZaW)                          |
|       布魯諾#7239       | [CodePen](https://codepen.io/bruno-yu/pen/VwXMpxR?editors=1011)              |
|       Bumble#0255       | [CodePen](https://codepen.io/lmpzezvw-the-lessful/pen/dymVvja)               |
|       Arista#5802       | [CodePen](https://codepen.io/arista-hsieh/pen/LYdzWJM)                       |
|       Evonne#7078       | [CodePen](https://codepen.io/Hsu1Fang/pen/KKoXWbm)                           |
|       AllenW#1132       | [CodePen](https://codepen.io/AllenW/pen/PoRJpeo?editors=0012)                |
|      rainbow#3329       | [CodePen](https://codepen.io/g901612002/pen/MWVEpxO?editors=0011)            |
|       Yukon#2618        | [CodePen](https://codepen.io/ukowork/pen/wvmrJRG)                            |
|       Morris#8755       | [Codepen](https://codepen.io/morrisss/pen/XWEeRJP?editors=1111)              |
|        shoppingq        | [Codepen](https://codepen.io/shoppingq/pen/abYLWzP)                          |
|        Ayre#0016        | [CodePen](https://codepen.io/yichunlin09/pen/MWVEmWQ?editors=0011)           |
|      Eric Su#7798       | [CodePen](https://codepen.io/wc-su/pen/dymVWyB)                              |
|        Rice#8043        | [CodePen](https://codepen.io/riecball/pen/yLKzbOK?editors=0011)              |
|        m_m#5493         | [Codepen](https://codepen.io/minnn7716/pen/PoRJmZz?editors=0011)             |
|        𝓛𝓊𝒸𝓎#8635        | [Codepen](https://codepen.io/lucygirl/pen/PoRJmbb)                           |
|       hobby#6565        | [Codepen](https://codepen.io/hobbyling/pen/PoRJmWb)                          |
|        ZengZeng         | [Codepen](https://codepen.io/tyzyoko/pen/qBoPmWv)                            |
|        LEO#7779         | [Codepen](https://codepen.io/nekorice/pen/VwXMbvZ)                           |
|     DIANAxAKKO#4298     | [Codepen](https://codepen.io/redfire29/pen/LYdzyQE?editors=0012)             |
|  charlottelee849#0366   | [Codepen](https://codepen.io/charlotte-lee/pen/LYdzyRw?editors=0011)         |
|       Yanyan#3555       | [Codepen](https://codepen.io/wei-yi-lee/pen/LYdzyBV)                         |
|     座標33129#8748      | [Codepen](https://codepen.io/ad80352/pen/KKoXmBB?editors=0010)               |
|        Kimi#2092        | [Codepen](https://codepen.io/a3216lucy/pen/zYWEwaQ)                          |
|     christina#6185      | [Codepen](https://codepen.io/chrisc0210/pen/JjLrNOg)                         |
|       Yiling#4054       | [Codepen](https://codepen.io/lin010/pen/KKoXmOr?editors=1011)                |
|         peter#0         | [Codepen](https://codepen.io/JIAN-RONG/pen/eYMGWqw)                          |
|        SHIN#6075        | [Codepen](https://codepen.io/shin9626/pen/PoRJjPQ)                           |
|        威爾#1694        | [CodePen](https://codepen.io/WILL_Wu/pen/eYMGRZO)                            |
|      ChloeLo#4858       | [CodePen](https://codepen.io/chloelo/pen/JjLrNZj)                            |
|      LinaChen#1796      | [CodePen](https://codepen.io/LinaChen/pen/MWVEojM)                           |
|       YuZhun#1362       | [CodePen](https://codepen.io/danzhun/pen/XWEegRm?editors=0011)               |
|     Vada Chen#2055      | [Codepen](https://codepen.io/vadachen/pen/mdxBwpx)                           |
|       Seijo#1585        | [Codepen](https://codepen.io/SeijoHuang/pen/zYWEzJK?editors=0011)            |
|       露易莎#7673       | [Codepen](https://codepen.io/louisa-lin/pen/BarwZqM?editors=1111)            |
|         Wu#0167         | [Codepen](https://codepen.io/Xander0705/pen/YzarxKj)                         |
|       Stacy#1442        | [Codepen](https://codepen.io/keebibmh/pen/GRxMvJz)                           |
|     Sylvia-H #0024      | [Codepen](https://codepen.io/Cosmosheart/pen/XWEeabR)                        |
| React-慧茹(拉拉醬)#3414 | [Codepen](https://codepen.io/lala-lee-jobs/pen/LYdzjRm?editors=0011)         |
|       黃士桓#7654       | [codePen](https://codepen.io/shr-huan-huang/pen/dymVzvq)                     |
|        Iris#8462        | [codePen](https://codepen.io/irissamy/pen/MWVEoEg)                           |
|      Timothy#5863       | [codePen](https://codepen.io/timothy_hippo/pen/PoRJKjM?editors=1011)         |
|        RON#2813         | [Codepen](https://codepen.io/Ron115/pen/KKoXvQN)                             |
|       連小艾#0791       | [Codepen](https://codepen.io/bolaslien/pen/WNzZEKG?editors=0011)             |
|          moitw          | [Codepen](https://codepen.io/tsuifei/pen/qBoPXQQ?editors=1011)               |
|       Mitour#0672       | [Codepen](https://codepen.io/mitour/pen/JjLrrPx?editors=0012)                |
|      IreneLee#7932      | [Codepen](https://codepen.io/ntjtcxpt-the-animator/pen/eYMGGZj?editors=0011) |
|        BEAN#8402        | [Codepen](https://codepen.io/Beanhuang/pen/abYLLQo?editors=0011)             |
|       Emily#3648        | [Codepen](https://codepen.io/flien/pen/ZExXXZP?editors=0011)                 |
|       Easton#3863       | [Codepen](https://codepen.io/EastonIsCodingNow/pen/LYdzOpR)                  |
|       LiuLyn#8458       | [Codepen](https://codepen.io/ouoyy/pen/ExEwbKj)                              |
|        葉秋#2335        | [Codepen](https://codepen.io/as880074/pen/jOzGaMd)                           |
|      JessSong#5050      | [Codepen](https://codepen.io/jssanji03/pen/vYReWBx)                          |
|         JC#8658         | [Codepen](https://codepen.io/jcsamoyed/pen/yLKzPVW?editors=0011)             |
|        Yin#2493         | [Codepen](https://codepen.io/andy888jam/pen/KKoXXOr?editors=0011)            |
|       Overy#4545        | [Codepen](https://codepen.io/oceanwhale52hz/full/vYReWge)                    |
|      hiYifang#0736      | [Codepen](https://codepen.io/hiYifang/pen/ExEwbgV)                           |
|     Robert Lo#9653      | [Codepen](https://codepen.io/Robert-Lo/pen/zYWEPRq)                          |
|     SunnyCheng#4113     | [Codepen](https://codepen.io/Sunny0509/pen/eYMGeMp?editors=0011)             |
|     Emily Hsi #9066     | [Codepen](https://codepen.io/EmilyHsi/pen/RwMLjmB)                           |
|       眼睛 #0314        | [Codepen](https://codepen.io/thrizzacode/pen/mdxBpVa?editors=0011)           |
|       KuoMin#4931       | [Codepen](https://codepen.io/KuoMin/pen/eYMGyZg?editors=1111)                |
|        小熊#0685        | [Codepen](https://codepen.io/YuHan0704/pen/ZExXvma?editors=0011)             |
Midnightdinner#6220      |[Codepen](https://codepen.io/woowooyong/pen/BarwYNL)
fannnny#7112      |[Codepen](https://codepen.io/fannyHO/pen/oNqGExr?editors=0011)
Kunda#2800      |[Codepen](https://codepen.io/kunda0818/pen/dymVdZP)
| count1count2#9636  | [Codepen](https://codepen.io/souhakusou/pen/ZExXrqV?editors=0012)    |
| ------------------ | -------------------------------------------------------------------- |
| Otis#8455          | [Codepen](https://codepen.io/humming74/pen/Barwrzx?editors=0012)     |
| shin#5792          | [Codepen](https://codepen.io/hah1030/pen/eYMGMXZ?editors=0012)       |
| Claire#2116        | [Codepen](https://codepen.io/claire-chang-the-bashful/pen/KKoXRVd)   |
| Li-Ninja#0471      | [Codepen](https://codepen.io/li-ninja/pen/jOzGxdB?editors=0011)      |
| Mr.Sean#3825       | [Codepen](https://codepen.io/sean_1215/pen/qBoPYwL?editors=1111)     |
| A-Kai#2134         | [Codepen](https://codepen.io/kenneth1002/pen/ZExXRpR?editors=0011)   |
| 陳sam              | [Codepen](https://codepen.io/euldpliv/pen/WNzZywO?editors=1111)      |
| Mori#5582          | [Codepen](https://codepen.io/flower9312/pen/VwYeJaL)                 |
| GL#2256            | [Codepen](https://codepen.io/4genie/pen/jOzGKmY)                     |
| JarDar#6980        | [codepen](https://codepen.io/jardarpen/pen/YzarjQx)                  |
| 紅豆豆#0518        | [codepen](https://codepen.io/zoseqlpc/pen/RwMLByQ?editors=0011)      |
| Dylan_Lin#7320     | [CodePen](https://codepen.io/lin-dylan/pen/mdxBjjL?editors=0011)     |
| Kelvin#3296        | [CodePen](https://codepen.io/kelvinchang/pen/vYReawr)                |
| Stanley#2505       | [CodePen](https://codepen.io/bigbearada/pen/yLKzxaJ)                 |
| Kenge#3690         | [CodePen](https://codepen.io/pgkusn/pen/abYLaZL)                     |
| james#1443         | [CodePen](https://codepen.io/clothn0105700/pen/dymVqzq?editors=0011) |
| CofCat#9226        | [CodePen](https://codepen.io/cofcat456/pen/yLKzxba?editors=1111)     |
| hahaalin#3209      | [CodePen](https://codepen.io/shellyPen/pen/NWYaLVR)                  |
| JanllyGuo#0208     | [CodePen](https://codepen.io/kedugaw/pen/ZExJNZN)                    |
| keep#4336            | [CodePen](https://codepen.io/keep-/pen/wvmrEaL?editors=0111)         |
| anby#7112          | [CodePen](https://codepen.io/pen/?editors=0011)                      |
| kyle890721#1016    | [CodePen](https://codepen.io/KYLE890721/pen/vYReVXE)                 |
| Chelly#6129        | [CodePen](https://codepen.io/chellyhsu/pen/oNqGaQj)                  |
| 楓之聲#6945        | [CodePen](https://codepen.io/sshane258/pen/WNzZLjv)                  |
| Evileye#0666       | [CodePen](https://codepen.io/gn-lin/pen/dymVwdg?editors=0010)        |
| Yihan#5560         | [CodePen](https://codepen.io/h513hh513h/pen/bGvoZBj?editors=0011)    |
| hw#0715            | [Codepen](https://codepen.io/Lhwei/pen/eYMGaeL)                      |
| 城堡#2126          | [Codepen](https://codepen.io/tthcastle/pen/GRxMaxj)                  |
| Paper#1658         | [Codepen](https://codepen.io/paper_hsiao/pen/vYRewwy)                |
| whatsupmm#6761     | [Codepen](https://codepen.io/meidada/pen/zYWEzrx?editors=1112)       |
| Carolkiki2003#7399 | [Codepen](https://codepen.io/wasfzuig/pen/OJvxYqj)                   |
| east#4003          | [Codepen](https://codepen.io/EastM/pen/eYMGwXJ?editors=0010)         |
| L0F0#8733          | [Codepen](https://codepen.io/l0f0/pen/abYLeoW?editors=0011)          |
| Double C#7388      | [codepen](https://codepen.io/Double-C/pen/gOeGVaZ)                   |
| 黑白兔#0684        | [codepen](https://codepen.io/johnny329/pen/wvmrVzL)                  |
| Jordan_Tseng       | [codepen](https://codepen.io/tingchun0131/pen/eYMGqrR?editors=1011)  |
| 家洋#6999          | [codepen](https://codepen.io/aa235553756/pen/yLKzmxM)                |
| kevinhes#2881      | [codepen](https://codepen.io/kevinhes/pen/BarwXGN?editors=0012)      |
| Evachan#5729       | [codepen](https://codepen.io/Eva-go/pen/bGvoyaR)                     |
| alphatero#8299     | [Codepen](https://codepen.io/alphatero/pen/zYWPOrL)                  |
| andersonshen#4675  | [Codepen](https://codepen.io/luxyenni-the-bold/pen/wvmPwNr)          |
| 𝔼.𝕎#4742           | [Codepen](https://codepen.io/kidult316/pen/Bardvza)                  |
| Tsuei#9284         | [Codepen](https://codepen.io/AlbertoLL/pen/XWEzXjM?editors=0011)     |
| Rui#5058           | [Codepen](https://codepen.io/rui0208/pen/abYVdRY?editors=1011)       |
| wiimax#4564        | [Codepen](https://codepen.io/willismax/pen/jOzaqwG)                  |
| ねこ*#9385         | [Codepan](https://codepen.io/kunpao0104/pen/bGvoJJp)                 |
| lloyd#8224         | [Codepen](https://codepen.io/thanatus25/pen/dymZMBG)                 |
| yoshidc#0455       | [Codepen](https://codepen.io/yoshiyyc/pen/zYWPBzx)                   |
| 灰塵貓#7994        | [Codepen](https://codepen.io/rjk66268/pen/WNzXxxK?editors=0011)      |
| aki                | [codepen](https://codepen.io/aki168/pen/xxWPEdP)                     |
| Wins#8457          | [codepen](https://codepen.io/winszhuang/pen/GRxMXaR)                 |
| Pandaa#7740        | [codepen](https://codepen.io/pandaachu/pen/PoROWwK)                  |
| yolala#7070        | [codepen](https://codepen.io/chiakilalala/pen/dymZPMm)               |
| 翔#0859            | [codepen](https://codepen.io/energy95272z/pen/oNqoGVg)               |
| HedgehogKU         | [CodePen](https://codepen.io/hedgehogkucc/pen/NWYwaow?editors=0012)  |
| Vivi0225#3634      | [Codepen](https://codepen.io/vivian820225/pen/LYdOOZG)               |
| IceSam#7836        | [CodePen](https://codepen.io/sam-hsu/pen/OJvOOPj)                    |
| zzly#9134          | [CodePen](https://codepen.io/ly00/pen/YzaEYpv)                       |
| Alex Liao#8538 | [CodePen](https://codepen.io/alex0207s/pen/ZExavLO) |
| JimmyChang#5558 | [CodePen](https://codepen.io/JimmyChangWenChi/pen/BarmYZL?editors=0010) |
|wenyun#2362 | [CodePen](https://codepen.io/wenyuncc/pen/gOeXvma) |
|小班#3324 | [CodePen](https://codepen.io/jlhung168/pen/VwXrXMP?editors=1112) |
|Nico#8739 | [CodePen](https://codepen.io/Nicof2e/pen/yLKPKXw) 
|hungya#0773 | [CodePen](https://codepen.io/hungya777/pen/ZExaROv?editors=0011) |
|niel#2413 | [CodePen](https://codepen.io/danielhsu/pen/wvmPEeb?editors=0012) |
|crowley#7180|[CodePen](https://codepen.io/pon88/pen/JjLOPXx?editors=0011)|
|魚魚#1220|[CodePen](https://codepen.io/vkkkmkbv-the-selector/pen/rNdYQNP)|
|Zihur#7755|[CodePen](https://codepen.io/Zihur/pen/abYVRxr?editors=0011)|
|Susie(軒)#6181|[CodePen](https://codepen.io/Codeleaf/pen/NWYwELO)|
|Ryder#7398|[CodePen](https://codepen.io/rider159159/pen/XWEzvzp?editors=0010)|
|Hannah|[CodePen](https://codepen.io/zhanmes/pen/eYMyOrK?editors=0011)|
k.sin|[CodePen](https://codepen.io/sin588/pen/wvmpwNd?editors=0012)|
TedWang#7721|[CodePen](https://codepen.io/wangtaiyan/pen/WNzdeLE?editors=0011)|
無名#6427|[CodePen](https://codepen.io/Nomoney/pen/YzaYzzw?editors=0012)|
Neal#0665|[CodePen](https://codepen.io/neallkf/pen/jOzYOLv?editors=0012)|
Rocker#6235|[CodePen](https://codepen.io/RockerLi/pen/zYWpYWY?editors=1111)|
| 葉岱穎 DEBBYYEH#4696 |     [CodePen](https://codepen.io/bhliyoup/pen/oNqpgKP?editors=1111)     |
|:--------------------:|:-----------------------------------------------------------------------:|
|      emma#3398       |      [CodePen](https://codepen.io/itsems/pen/PoREqNo?editors=1011)      |
|     yiwun #0953      | [CodePen](https://codepen.io/kagamiakira_IBUN/pen/PoREPRE?editors=0010) |
|     Renren #8437     |          [CodePen](https://codepen.io/ehren-chen/pen/GRxypvE)           |
|     Tuhacrt#0008     |            [CodePen](https://codepen.io/Tuhacrt/pen/abYEvrN)            |
|      yuyu#6310       |     [CodePen](https://codepen.io/yuyu0905/pen/yLKpOQv?editors=0011)     |
|      huch09#1426     |     [CodePen](https://codepen.io/subarashii-huch09/pen/XWEVpbO?editors=1011)     |
|      JimHwang#3594     |     [CodePen](https://codepen.io/jimh1129/pen/vYRpggX?editors=1111)     |
|          Zoe           | [CodePen](https://codepen.io/Zoechiueh/pen/JjLMEgR?editors=0011)                                               |
|      布魯布魯#6177     |[CodePen](https://codepen.io/akai-huang/pen/vYRWvqP)|
| bonnieli1414#4906 |[CodePen](https://codepen.io/bonnieli1414/pen/WNzdZJp?editors=0011)|
| Wendy | [Codepen](https://codepen.io/Zhangbun/pen/dymJVwx)|
| Joechiboo | [Codepen](https://codepen.io/joe-chiboo/pen/ZExvxpm)|
| lingxuan |[CodePen](https://codepen.io/lingxuan0618/pen/dymJmNY?editors=1111)|
| Ada_su |[CodePen](https://codepen.io/zggsoagv-the-scripter/pen/JjLMvNN)|
史蒂夫#5075 |[Codepen](https://codepen.io/TaroPanda/pen/QWmqpRv)|
Rose Wu#1669 |[Codepen](https://codepen.io/Rose-Wu/pen/oNqpVbv)|
| 山貓(焜)#7041     | [CodePen](https://codepen.io/nopeta/pen/KKoZYGw)                             |
| ----------------- | ---------------------------------------------------------------------------- |
| Rikku#1756        | [CodePen](https://codepen.io/rikkubook/pen/KKoZLdM)                          |
| leoneboy#0851     | [CodePen](https://codepen.io/Leoneboy/pen/MWVrgZX?editors=0012)              |
| margo#7139        | [CodePen](https://codepen.io/ssuchen_lee/pen/PoRErYz?editors=0011)           |
| 真．穎旻粉撕#4995 | [CodePen](https://codepen.io/gbnbihif/pen/wvmpLJq?editors=0012)              |
| POKA#2168         | [Codepen](https://codepen.io/POKAHSIAO/pen/MWVrMJq?editors=0011)             |
| Judy☻             | [Codepen](https://codepen.io/hsiaohan/pen/qBopzPB)                           |
| 喬喬#2824         | [Codepen](https://codepen.io/joanne-wei/pen/eYMyaor?editors=0011)            |
| Josh DB #3366     | [Codepen](https://codesandbox.io/s/frosty-firefly-rh7uik?file=/src/index.js) |
| Anson #3594       | [Codepen](https://codepen.io/huanmingchang/pen/oNqEjEj?editors=1012)         |
| justin            | [Codepen](https://codepen.io/just-perfect/pen/vYRdKZG?editors=0010)          |
| 鉛筆 #7763        | [Codepen](https://codepen.io/zoeguava/pen/qBoxpvP?editors=0011)              |
| Amy芸 #6575       | [Codepen](https://codepen.io/crazzyamy/pen/xxWYYbX?editors=0001)             |
| Carol Li #2269    | [Codepen](https://codepen.io/carolli834/pen/QWmQryJ?editors=0012)            |
| Shani #4593       | [Codepen](https://codepen.io/ShaniMa/pen/NWYyeQZ)                            |
| 彼得#1923         | [Codepen](https://codepen.io/shiou-ho/pen/PoRQVLw)                           |
| 點了會中毒 #6597  | [Codepen](https://codepen.io/wei-nie/pen/poLaXzr?editors=0012)               |
| RayRayHuang#1998  | [Codepen](https://codepen.io/hongrueihuang/pen/QWmmgQq)                      |
| Shau#6400         | [Codepen](https://codepen.io/shau-chen/pen/ZExxJQP)                          |
| JasonLu#7313      | [Codepen](https://codepen.io/wnptocip/pen/GRxxvGQ?editors=1010)              |
| 小夜#3809         | [Codepen](https://codepen.io/Naito_K/pen/wvmPGJo?editors=0010)               |
| MarsKuo#6015      | [Codepen](https://codepen.io/MarsKuo/pen/PoRROBb)                            |
| Murmurline#6969   | [CodePen](https://codepen.io/murmurline/pen/gOeeaBg)                         |
| Terencedev        | [Codepen](https://codepen.io/terencedev/pen/jOzzeJr)                         |
| 蘇蘇#0426         | [Codepen](https://codepen.io/sabine1123/pen/NWYMqgZ)                         |
| NinaKuo#3332      | [CodePen](https://codepen.io/ninakuo0814/pen/NWYMqQG)                        |
| 咻蹦#1526         | [CodePen](https://codepen.io/emmasyu/pen/yLKjYbo)                            |
| SleepWalk#1635    | [CodePen](https://codepen.io/arthurliinn/pen/dymegrK?editors=0011)           |
| 許揚民 Evan#4546  | [CodePen](https://codepen.io/gitevanhsu/pen/rNdvPgy?editors=0011)            |
| 龜人#7299         | [CodePen](https://codepen.io/dullshen/pen/OJvEJLY?editors=0011)              |
| Louise            | [CodePen](https://codepen.io/LouiseHuang/pen/yLKEbEy)                        |
| yaru#6308  |   [CodePen](https://codepen.io/lszaietc/pen/YzavRMb?editors=0012)           |
|toshow#5629|[CodePen](https://codepen.io/toshow/pen/ZExRwGN?editors=0011)|
|CookieSSS#6991	|[CodePen](https://codepen.io/sqhjikpa-the-selector/pen/QWmBwqq)|
|qing#7665	|[CodePen](https://codepen.io/cellur/pen/jOeZGEj?editors=0011)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/MWVBQpR?editors=1111)|
|Frank#5177|[Codepen](https://codepen.io/Frankhu5150/pen/RwMYMvq?editors=0011)|
|Cherry ZY#4647|[CodePen](https://codepen.io/qoosdd89382/pen/YzaOmgK?editors=0010)|
|雪莉#4827|[CodePen](https://codepen.io/utshang216/pen/dymgbrO?editors=1111)|
|SleepWalk#1635|[CodePen](https://codepen.io/arthurliinn/pen/dymegrK)|
|hsiuhsiu#7412|[CodePen](https://codepen.io/hsiuhsiu/pen/qBoJXev?editors=1111)|
|eching#9183|[CodePen](https://codepen.io/echin/pen/eYMQBrP?editors=0011)|
|helen #1041 |[CodePen](https://codepen.io/Tian-Lin/pen/XWEyOVP)|
|kancheng#3915 |[CodePen](https://codepen.io/kancheng/pen/GRxweVd)|
|ninipopo#7983 |[CodePen](https://codepen.io/Robinnini/pen/ZExwzJJ?editors=1011)|
|Eileen#6454 |[CodePen](https://codepen.io/Eileen-io/pen/XWEOwVe)|
| karakamin#3416 |[CodePen](https://codepen.io/karakamin/pen/rNdbazE)|
| beta lin#1445 | [CodePen](https://codepen.io/linbeta/pen/MWVMKQX)|






