---
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 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
回報區
---
| 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)|
Sign in with Wallet
Connect another wallet