更新2024.09.01
Hi，大家好，我是Tony，是一個對於JavaScript有一點點概念的新手。

挑戰第23天，接下來剩下一個禮拜了！
今天的學習內容是：**JavaScript 解構賦值 (Destructuring Assignment) **

學習內容來自
彭彭老師JavaScript 解構賦值 Destructuring Assignment
https://www.youtube.com/watch?v=AMwRSPh2G3U&list=PL-g0fdC5RMbqW54tWQPIVbhyl_Ky6a2VI&index=28

昨天的學習內容：[Day 22] JavaScript 箭頭函式 (Arrow Function)
https://ithelp.ithome.com.tw/articles/10346847

1. 什麼是 解構？賦值？

解構賦值是兩個動作，經常會連在一起動作。
顧名思義，先解構，在賦值，

• 解構：把陣列或物件的資料拆開
• 賦值：將拆開的資料分別放入各別的變數

2. 陣列的解構賦值 (用中括號[])

將陣列的資料分開賦值給變數，在按照順序做對應。

• 傳統的做法：

傳統的做法是一筆一筆來操作。
一行一行寫，把每個資料放到變數中。

<script>
    let arr=[3,4,5];
    let d1=arr[0];
    let d2=arr[1];
    let d3=arr[2];
</script>

• 解構賦值的語法：

利用解構賦值就能直接把陣列資料拆解，
放到對應的變數名稱中。

<script>
    let arr=[3,4,5];
    let [d1,d2,d3]=arr;
</script>

3. 陣列解構賦值的變形

1. 宣告與賦值可以分開來寫
   下面範例就是寫了陣列後，宣告變數，再賦值。

<script>
    let arr=[3,4,5];
    let d1,d2,d3;
    [d1,d2,d3]=arr;
</script>

2. 解構賦值可以有預設值得概念
   先看下方範例

<script>
    let arr=[3,4];
    let d1,d2,d3;
    [d1,d2=2,d3-5]=arr;
</script>

陣列資料有3、4兩筆，
放數變數中，
原本d1沒有資料，放入第一筆資料，就變成3。
d2預設值是2，會被放入第二筆資料，2被覆蓋掉變成4。
d3預設值是5，但陣列沒有資料了，所以保留預設值還是5。

4. 物件的解構賦值 (用大括號{})

再陣列的解構賦值中，是用按照資料的順序，
但是物件的解構賦值，是按照物件成員的名稱做對應。

• 傳統的做法：

一樣是需要一筆一筆去寫，
才能將資料放到對應的變數。

<script>
    let obj={x:3,y:4};
    let x=obj.x;
    let y=obj.y;
</script>

• 解構賦值的語法：

利用解構賦值就能直接把陣列資料拆解，
放到對應的變數名稱中。

<script>
    let obj={x:3,y:4};
    let {x,y}=obj;
</script>

5. 物件解構賦值的變形

1. 宣告與賦值可以分開來寫
   注意：物件解構賦值，不和宣告一起執行時，要多加()

<script>
    let obj={x:3,y:4};
    let x,y;
    ({x,y}=obj); //物件解構賦值，不和宣告一起執行時，要多加() 
</script>

2. 也有預設值得概念

<script>
    let obj={x:3};
    let x,y;
    ({x,y=5}=obj);
</script>

今天的內容尚未補足，
但由於時間不夠先上傳到這邊。
大家明天見。