tags: 鐵人賽 React javascript nodejs vscode

鐵人賽第十天，週末夜晚去看了全民大劇團的~同學會~同鞋，笑中帶淚的劇情，讓我到現在心頭仍暖暖的。

解構 Destructuring Assignment

• 從字面的意義來分析，de-structure就是拆解架構的意思，Assignment就是將拆解的結果，賦予給某個變數。
• 舉個例子，班上的同學問~嘿~你有沒有行動電源，有的話連USB現也借我吧！

• 拆解這句話背後的動機：

- 同學身上的3C包裝有：筆電、手機、行動電源、充電線、耳機...等
- 你想借他3C包內的 “行動電源” 及 “充電線” ～ Desctructuring
- 借到的東西，你暫時放進你的包包裡，準備使用 ~ Assignment

解構Array

• 以上面的例子，我們用Array解構來為大家說明一下

過去我們會這麼寫

let John3CBag = ["Mac", "IPhone", "Portable-power", "USB-line", "Beats"]; 
let getPower = John3CBag[2]; 
let getUSB = John3CBag[3]; 

console.log("getPower=>", getPower)// 印出 getPower=> Portable-power
console.log("getUSB=>", getUSB) // 印出getUSB=> USB-line

現在你可以這麼寫：

• 宣告一個陣列，定義變數在對應的位置，解構並順利取得值。
• 透過逗號並給予空值，就會自動跳過對應的陣列元素，

let John3CBag = ["Mac", "IPhone", "Portable-power", "USB-line", "Beats"]; 
let [ , , getPower, getUSB, ] = John3CBag  // <-- 直接指定一個變數名稱，並放在對應的位置上

console.log("getPower=>", getPower)// 印出 getPower=> Portable-power
console.log("getUSB=>", getUSB) // 印出getUSB=> USB-line

解構Object

• 將解構發揮最淋漓盡致的，我認為是Object，馬上來看看他是如何實現的。
• 我們在第九天鐵人賽有提到下面這個範例，花括號裡面的{a,b}就是解構賦值的一種方式。

let soldiers = {a:1, b:2, c:3, d:4, e:5}
{a, b, ...others} = soldiers

我想重新命名原本的變數

• 當然沒問題，用一個冒號:就能完成這件事情。
• {解構的key值：宣告新的變數名稱，並賦予他解構後的值}

let soldiers = {a:1, b:2, c:3, d:4, e:5}  
{a:numA , b:numB, ...others} = soldiers

console.log(numA) // 1
console.log(numB) // 2

解構並賦予預設值

• 想像一下，我們有一份晚餐購買清單，要請朋友代買，如果對方沒有賣cake?，那就買 我最愛的甜點 = tiramisu吧!

let shopList = {dinner:"Susi", beverage:"coke"}
{cake:myLoveDesset="tiramisu"} = shopList

console.log(myLoveDesset) // tiramisu

解構Object運用在func之中

• 將以上幾點，運用在func 之中，程式碼會變得更容易理解

function createServer({ip, port:serverPort=80}){
  //...  省略code
  console.log(`Server ip=>${ip}:${serverPort}`);
}

myServer = createServer({ip:"localhost"});  // Server ip=>localhost:80

結論

• 解構賦值讓我們可以寫出更加俐落的程式，特別是與Object的結合，就像遇上多年的好朋友一樣，話夾子一開，嘴巴停不了。
• 鐵人賽堅持到第十天，真的不容易，仔細回想我們爬山已經到1/3處囉，再加把勁，我們快登頂囉!ROCK~~~