--- tags: Vue 直播班 - 2022 春季班 --- # 🏅 Day 15 ###### tags: `Vue 直播班 - 2022 春季班` 題目 (請將答案貼上 CodePen) --- 參考: https://wcc723.github.io/javascript/2017/12/25/javascript-destructuring/ (1) 依據提示將以下程式碼用解構方式達成目標 ```js= // 題目一: 請使用解構,取出 name 及 age 的變數 const person = { name: '小明', age: 16 } console.log(name, age); // 結果為 "小明", 16 // 題目二: 請問以下 console.log 的輸出結果為何? let [a, b, c = 4, d = 'New', e] = [1, 2, 3]; console.log(a, b, c, d, e); ``` 參考:https://wcc723.github.io/javascript/2017/12/24/javascript-spread-operator/ (2)依據提示將以下程式碼用展開方式達成目標 ```js= // 題目一: 請使用展開將 arr 的內容併入 arrNew let arr = [1, 2, 3]; let arrNew = [?, 4, 5, 6]; // [1, 2, 3, 4, 5, 6] console.log(arrNew); // 題目二: 請使用展開將 restInfo 的內容併入 MingInfo let restInfo = { sex: '男生', height: 178 } let MingInfo = { name: '小明', age: 20, } ``` (3) 請修改以下程式碼,透過 [參數預設值](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/Default_parameters)、[其餘參數](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/rest_parameters) 的方式完成此範例。 ```js= function getMoney(/* 填入程式碼 */) { return money; } let myMoney = getMoney(); // fruits 是一個陣列 function buySomething(/* 填入程式碼 */) { if(fruits.length > 2) { myMoney -= 200; }else { myMoney -= 100; } console.log(`小明剩下 ${myMoney} 元`); } buySomething('lemon', 'watermelon', 'kiwi'); // 結果為 "小明剩下 300 元" buySomething('lemon', 'watermelon'); // 結果為 "小明剩下 200 元" ``` 回報流程 --- 請同學依照下圖教學觀看解答、回報答案: ![](https://i.imgur.com/QtL8zEW.png) 回報格式如下圖,請在「回報區」使用註解回報答案 (為了統計人數,請同學依序加上「報數」) ![](https://i.imgur.com/L7kyew8.png) <!-- 解答 (1) // 題目一 const person = { name: '小明', age: 16 } const {name, age} = person; console.log(name, age); // 題目二 1, 2, 3, "New", undefined (2) // 題目一 let arr = [1, 2, 3]; let arrNew = [...arr, 4, 5, 6]; console.log(arrNew); // 題目二 let restInfo = { sex: '男生', height: 178 } let MingInfo = { name: '小明', age: 20, ...restInfo } (3) // fruits 是一個陣列 function getMoney(money = 500) { return money; } function buySomething(...fruits) { let myMoney = getMoney(); if(fruits.length > 2) { myMoney -= 200; }else { myMoney -= 100; } console.log(`小明剩下 ${myMoney} 元`); } buySomething('lemon', 'watermelon', 'kiwi'); buySomething('lemon', 'watermelon'); --> 回報區 --- | 報數 |組別/名字 | codepen / 其他回饋 | |:--------:| -------- | -------- | |1|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/KKXboaV| |2| Larry | https://codepen.io/larrylinr5/pen/xxXmWOP?editors=1111 | |3| 肉鬆 | https://codepen.io/klrkicog/pen/LYzMdZd?editors=0011 | |4| Iris Huang | https://codepen.io/ythuang/pen/qBPLoNx | |5| POPEYE | https://codepen.io/popeye_ux/pen/yLzGKVJ | |6| 黃士桓 | https://codepen.io/shr-huan-huang/pen/gOGZeKV?editors=0011 | |7|Yof| https://codepen.io/yangyof/pen/mdBGgNj?editors=1011 | |8|Aaron Tu|https://codepen.io/aarontu/pen/KKXbRzX| |9|Wenfish|https://codepen.io/wenfisht/pen/RwLEywb| |10|有廖先生(Rain)|https://codepen.io/billpop741/pen/GRMPdBN| |11|AllenW|https://codepen.io/AllenW/pen/Jjrwvrq| |12|群嘉|https://codepen.io/efzdamnp-the-lessful/pen/JjrwvOQ?editors=1111| |13|Jasper|https://codepen.io/li-jasper/pen/WNZLJWJ | |14|Empty Wu|https://codepen.io/emptywu/pen/mdBaKew | |15|Gill|https://codepen.io/Gill-Chin/pen/qBPLYpe?editors=0011 | |16|Elaine Liu|https://codepen.io/elaine7598/pen/gOGZzLr?editors=0010| |17|Yunei| https://codepen.io/Yunei/pen/poWqKrm | |18|威爾|https://codepen.io/WILL_Wu/pen/ZEXVRRY| |19|hua|https://codepen.io/hahahazzz123/pen/rNGoKpV?editors=1111| |20|Bella Shya|https://codepen.io/BellaXie/pen/ExwGRbP?editors=0011| |21|kevinhes|https://codepen.io/kevinhes/pen/abLPKaB?editors=0012| |22|Henry|https://codepen.io/kaohenry9287/pen/MWEZBwy| |23| Kelvin Hsu | https://codepen.io/kelvin001/pen/mdBajbG?editors=0010 | |24|John|https://codepen.io/jiangshuuu/pen/NWaXXWb |25|Laura|https://codepen.io/minminn/pen/OJxrZMX| |26|Himi|https://codepen.io/Himi/pen/mdBajpg| |27|陳暐中|https://codepen.io/wei-z/pen/VwMqBoO?editors=0011| |28|Tim Lin|https://codepen.io/TimmyLin/pen/VwMqBJN| |29|Howard|https://codepen.io/yawdnhbm/pen/yLzQmME| |30|dOvOb|https://codepen.io/gezzgrwj-the-styleful/pen/jOGXvWw?editors=1111 |31|Scottie|https://codepen.io/wow767t/pen/XWeoPpP| |32|Pei Ying|https://codepen.io/Pei-Ying/pen/zYEyavO?editors=0011| |33|Sheep| https://codepen.io/SheepNDW/pen/VwMqGwO | |34|Calon|https://codepen.io/Calon0118/pen/XWeoPXB| |35|tingyu| https://codepen.io/dgltu/pen/zYEyJPy?editors=0011 | |36|Charlotte Lee| https://codepen.io/charlotte-lee/pen/MWEZXNK?editors=0010 | |37|Henry Wu| https://codepen.io/dkcmlaww-the-flexboxer/pen/QWqzZbV?editors=0011 | |38|DDDDK| https://codepen.io/dkklee/pen/YzrdJpV | |39|Arista| https://codepen.io/arista-hsieh/pen/bGoOmLQ | |40|andersonshen|https://codepen.io/luxyenni-the-bold/pen/jOGXQVP | |41|YC|https://codepen.io/YCLu/pen/eYGQZjB | |42|我是泇吟|https://codepen.io/kljuqbxs/pen/ZEXVVQr| |43|Rick Tzeng|https://codepen.io/rick917jp6/pen/WNZLLXZ?editors=0012 |44|AKI|https://codepen.io/akichen27/pen/XWeoOVb | |45|Terry21|https://codepen.io/feng0409/pen/oNGJyEW?editors=0012 | |46|Yummyniya|https://codepen.io/yummyniya/pen/abLPgyV| |47|Otis|https://codepen.io/humming74/pen/eYGbwev?editors=0011 | |48| Vicky | https://codepen.io/hyxfish27/pen/RwLEzLE | |49| Liu | https://codepen.io/feng-chi-liu/pen/ZEXwOEb?editors=1111 | |50|Steven Chan|https://codepen.io/Steven1220/pen/bGozeOd?editors=1011 | |51|shio|https://codepen.io/pen/?editors=1111 | |52|Jason Chen|https://codepen.io/jason60810/pen/RwLvpWX | |53|海底藍|https://codepen.io/registermar3/pen/abLXVXq?editors=1011 | |54|Bonnie|https://codepen.io/bonnieli1414/pen/PoJVbPK?editors=1112 | |55|柴貓|https://codepen.io/shibacat/pen/zYEeRzO | |56|小K|https://codepen.io/kelen1995/pen/wvrNNPm | |57|咖咖|https://codepen.io/gon790219/pen/bGoOzgj | | 58 | Sihle Huang | https://codepen.io/bugbug777/pen/LYzqvmv | |59|Jordan Tseng|https://codepen.io/jordan-ttc-design/pen/BawbBmJ?editors=1011| |60|Anna|https://codepen.io/kycrleao/pen/rNGRVeP| |61|Judy☻|https://codepen.io/hsiaohan/pen/VwMRpmg?editors=0011| |62|Benson|https://codepen.io/soul81624/pen/GRMeymV | |63|阿武|https://codepen.io/samwnkyat/pen/MWExQBx |64|Gui|https://codepen.io/guitimliu/pen/LYzaQmG |65|mei|https://codepen.io/Shila-Chen/pen/bGoZxPq| |66|Evan Chiang|https://codepen.io/piskesocute/pen/MWExLrz| |67|kk|https://codepen.io/potatokaka/pen/eYGwEBp?editors=0011| |68|Abbie|https://codepen.io/Abbie0704/pen/xxXoYgz| |69| Meng | https://codepen.io/MGHN/pen/bGoPLLe?editors=0012 | |70| 肉桂卷 |https://codepen.io/ginnlee/pen/KKXjyoG?editors=0011| |71| Jerry Yen |https://codepen.io/JerryYen/pen/OJxKYJd| |72|許敏鑫|https://codepen.io/MIN-HSIN/pen/WNXewzv?editors=1111 |73|Jerry|https://codepen.io/rteyfwwd-the-scripter/pen/WNXeBoq| |74|阿劍| https://codepen.io/seonkuraito/pen/VwMgaOr | |75|Hedy| https://codepen.io/hhhsuan41/pen/WNZmEPj?editors=1112 | |76|Bruno Yu| https://codepen.io/bruno-yu/pen/MWOWYKP?editors=1111| |77| ShaoYu | https://codepen.io/shaoyukao/pen/mdqdoNe | |78|Riley|https://codepen.io/jjpxbprd/pen/mdqyyZM?editors=1111| |79|2/WA|https://codepen.io/ldddl/pen/dyZPOZz| |80|FuChang|https://codepen.io/fuchang830714/pen/oNGmvme| |81|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/rNYORea?editors=1011 | |82|andyii|https://codepen.io/gultrotpybyvue/pen/podeLOe| |83|Mylène|https://codepen.io/hamajibashi/pen/NWwgqwz| |94|大衛|https://codepen.io/exnsrpjc/pen/yLpJxqP?editors=1011 | |95|Carol Li|https://codepen.io/carolli834/pen/abYRQEZ?editors=1011 |