ES6 解構賦值

解構賦值 ( Destructuring assignment ) 是 Javascript ES6 的新特性，用來提取陣列 ( Array ) 或物件 ( Object ) 中的資料，成為獨立變數。

解構賦值在指定敘述式的左側宣告變數用來接收從右側來源解開的資料:

    const x = [1, 2, 3, 4, 5]
    const [y, z] = x
    console.log(y) // 1
    console.log(z) // 2

參考了 從ES6開始的JavaScript學習生活-解構賦值 中提及的定義:

The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.

指出這個語法的使用方式，就類似鏡子般，將左右兩側的變數與資料呈現對應。

以下整理比較常用到的幾種基本用法 :

• 陣列解構賦值
• 物件解構賦值
• 非物件或非陣列解構賦值

陣列解構賦值

1. 基本用法

   const [a, b] = [1, 2] // a=1, b=2
   

2. 先宣告變數，再賦值

   let a, b 
   [a, b] = [1, 2] // a=1, b=2
   

3. 略過某些值 ( 變數和資料的位置是相互呼應的 )

   const [a, , b] = [1, 2, 3] // a=1, b=3
   

4. 使用其餘運算子

   const [a, ...b] = [1, 2, 3, 4] // a=1, b=[2, 3 ,4]
   

5. 字串 (從非物件及非陣列資料取值時，布林、數字、字串皆不能做物件解構，但字串可以做陣列解構，其餘兩者不行)

   const str = 'hello'
   const [a, b, c, d, e] = str // a='h', b='e', c='l', d='l', e='o'
   

6. 交換賦值

   const a = 1, b = 2
   [a, b] = [b, a] // a=2, b=1
   

7. 無對應位置的賦值會回傳 undefind

   const [, , , a, b] = [1, 2, 3] // a= undefind, b=undefind
   

物件解構賦值

目前在程式撰寫中，常常碰到需要取值物件資料的情況，過去的寫法如下:

const obj = {
    name: 'Ding',
    age: 33,
    Nationality: 'TW'
}

const name = datas.name

參考 JavaScript ES6 語法糖 - 解構賦值介紹 中特別提到物件解構賦值的特性:

首先，必須強調一個觀念。物件的解構賦值強調的是屬性名稱，屬性名稱必須相互對應才能取到值，反之則會無法取值

和陣列按照順序的特性比較不同的地方，是用屬性名稱 ( key ) 對應取值。
以下整理幾種常見用法:

1. 基本的物件解構賦值

   之前比較常用的是縮寫，其實那是因為我們假設在完整寫法中的 key:value 取名一致的原因。

    ```
    const obj = {
        name: 'Ding',
        age: 33,
        Nationality: 'TW'
    }
   
    let {name : name, age : age} = obj //完整寫法
    let {name, age} = obj //縮寫, name = 'Ding', age = 33
    ```
   

   而在取名不一致的情況下，我們可以看到冒號前的值是對應屬性名稱，真正賦值的是冒號後的變數，而這個用法我們可以用來更改變數的名稱:

    const members = {
        member1 : 'Anna',
        member2 : 'Ben',
        member3 : 'Cindy',
    }
   
    let {member1 : number1, member2 : number2} = members
    console.log(member1, member2) // undefind
    console.log(number1, number2) // 'Anna', 'Ben'
   

   而冒號前的值是對應屬性名稱的原因，如果無法對應，則回傳 undefind

    const members = {
        member1 : 'Anna',
        member2 : 'Ben',
    }
   
    let {member3 : number1} = members
    console.log(number1) // undefind
   

2. 物件解構的其餘運算用法

    const members = {
        member1 : 'Anna',
        member2 : 'Ben',
        member3 : 'Cindy',
        member4 : 'Dennis',
        member5 : 'Eva',
    }
   
    const {member1, member2, ...rest} = members
    console.log(rest) // { member3: 'Cindy', member4: 'Dennis', member5: 'Eva' }
   

解構賦值時的預設值

等號左邊的 pattern 中是可以設定預設值的，當對應值不存在 ( 即無法賦值 ) 時，則返回預設值

1. 陣列解構賦值預設值

     const [isValid = true] = []
     console.log(isValid) // true
   

2. 物件解構賦值預設值

    const {message: msg = 'hello'} = {} 
    console.log(msg) // 'hello'
   
    const { x = 3 } = {}
    console.log(x) // 3
   

以上是關於解構賦值基本用法的整理，未來有更詳盡的整理會再加入這篇文章。