【 JavaScript ES6 】解構賦值 Destructuring assignment

內容

• 學習目標
• 前置準備作業
• 陣列
  • 陣列解構
  • 陣列解構設預設值
  • 陣列解構忽略元素
  • 剩餘部份變成另一個陣列元素
  • 互換數值
  • 陣列與迴圈
• 物件
  • 物件解構
  • 物件解構設預設值
  • 物件中包含另一個物件
  • 物件解構指定新名稱
  • 解構函式參數
  • 物件與迴圈

學習目標

• 學習 JavaScript ES6 中的 陣列 與 物件 解構

前置準備作業

• 已安裝 Node.js
• 已安裝 Visual Studio Code

陣列解構

• 原始寫法

  • 程式
  • 執行結果
    

• 解構寫法

  • 程式
  • 說明
    • 第三行使用陣列解構進行縮寫
  • 執行結果
    

陣列解構設預設值

• 寫法
  • 程式
  • 說明
    • 第三行使用陣列解構並設定初值
  • 執行結果
    

陣列解構忽略元素

• 寫法
  • 程式
  • 說明
    • 第三行透過 , 來忽略陣列元素
  • 執行結果
    

剩餘部份變成另一個陣列元素

• 寫法
  • 程式
  • 說明
    • 第三行透過 ... 將原始陣列最後的剩餘部份變為另一個陣列元素
  • 執行結果
    

互換數值

• 原始寫法

  • 程式
  • 執行結果
    

• 改良寫法

  • 程式
  • 說明
    • 第五行可直接將變數值當成 Key 來使用
  • 執行結果
    

陣列與迴圈

• 解構
  • 程式
  • 說明
    • 第六行透過迴圈方式依序取出陣列中各數值再使用陣列解構來取得各數值中的 firstName 、 lastName 與 isEmployee
  • 執行結果
    

物件解構

• 原始寫法

  • 程式
  • 執行結果
    

• 解構寫法

  • 程式
  • 說明
    • 第六行進行解構取物件的 Key
  • 執行結果
    

物件解構設預設值

• 寫法
  • 程式
  • 說明
    • 第六行使用物件解構並設定初值
  • 執行結果
    

物件中包含另一個物件

• 寫法
  • 程式
  • 執行結果
    

物件解構指定新名稱

• 寫法
  • 程式
  • 說明
    • 第六行取出物件中對應的 Key 值後再將此 Key 重新名命為 : 之後的名稱
  • 執行結果
    

解構函式參數

• 原始寫法

  • 程式
  • 執行結果
    

• 解構寫法

  • 程式
  • 說明
    • 第一行函式參數透過物件解構取得對應的 Key 值
  • 執行結果
    

物件與迴圈

• 解構
  • 程式
  • 說明
    • 第六行透過迴圈方式依序取出陣列中各數值再使用物件解構來取得各數值中的 firstName 、 lastName 與 isEmployee
  • 執行結果
    

Reference

• MDN

GitHub

• ArcherHuang @ GitHub

List of blogs

• https://oranwind.org/author/archer/
• https://learningsky.io/author/archer/