跳到主要內容
前端開發

JavaScript ES6:解構賦值

2020 年整理的陣列、字串與物件解構賦值筆記。

W

解構賦值是將右邊的值賦予給左邊的變數,有點像鏡射的概念。 如果左右兩邊數量不同,右邊多餘的值不會進行賦值。

陣列解構

範例:將陣列裡的值賦予變數。逗號之間沒有變數時,會跳過該位置。

陣列解構依序取得值、只取前兩個值,以及用空位跳過中間元素

交換變數

解構賦值可以直接交換變數,不需要第三個暫存變數。

使用陣列解構交換 aa 與 bb,輸出結果由 aa bb 變成 bb aa

拆解字串

將 hello 字串解構成五個字元並逐一輸出

物件解構

可以取出物件其中一個值,也可以指定新的變數名稱。

從物件取出 aa 屬性,並示範將 aa 改名成 gg

物件與陣列也能一起解構。

同時解構物件的 ll 屬性與 tt 陣列第二個元素,輸出 test 與 bb

預設值

陣列解構可以設定預設值。

陣列只有 cc 一個值時,testa 取得 cc,testb 使用預設值 bb

物件解構改名時也能設定預設值。

從空物件解構 testc 並改名為 ming,最後使用預設值 aa

分享這篇