JavaScript ES6 - 解構賦值
簡單來說,解構賦值就是將右邊的值套用到左邊,通常都是在做一些物件或陣列的資料處理時會用上。
未來開發上可能會使用到類似的處理,就筆記一下唄!
前言
在開始之前,可以先試試看,如果想要將以下的陣列 family
的值,賦予到另一個變數上,該怎麼做呢?
1 | let family = ['小明', '杰倫', '阿姨', '老媽', '老爸']; |
我們可以宣告變數,並把值一個一個賦予。
1 | let ming = family[0]; |
除此之外,我們也可以使用 “解構賦值”,來更快地完成這件事。
“解構賦值” 基本介紹
基本 “解構賦值” 的概念,就是將右方的資料 “鏡射” 到左方。
1 | let [ming, jay, auntie, mom, father] = family; |
特性一:數量不對等
如果左右數量不對等,像是這邊只解構賦值前三個變數,那麼就會只對前三個進行解構賦值。
1 | let [ming, jay, auntie] = family; |
特性二:中間缺少值
當中間值缺少,但還是有留 “逗號” 將它隔開的時候,會跳到下一個變數繼續進行解構賦值。
1 | let [ming, jay, , mom, father] = family; |
應用一:交換兩個變數
傳統上,要交換兩個變數其實滿麻煩的,通常我們會宣告一個新的第三方變數 temp
,再來進行交換。
1 | let Goku = '悟空'; |
如果使用 “解構賦值” 來做,就不需要這麼大費周章了!
寫法是將左方的兩個變數,在右方把位置顛倒過來寫。
1 | [Goku, Ginyu] = [Ginyu, Goku]; |
這樣子就能完成兩個變數的交換囉!
從這個例子可以發現:
解構賦值在傳遞資料時是非常 “即時” 的,它不需要透過第三方的變數去做取代,直接就可以將兩個變數做交換。
應用二:拆解字串
我們還可以透過解構賦值的概念,拆解字串的各個字元到單一變數上。
1 | let str = '基紐特攻隊'; |
以上這些都是對 “陣列” 的處理方式,其實它也可以針對 “物件” 來做處理。
物件的解構賦值
透過解構賦值,我們可以從物件中取出 “其中一個值”,並賦予在新的變數名稱上。
下方範例中,左方物件裡面寫的是 “變數” 的名稱,型別為 string。
1 | let GinyuTeam = { |
除此之外,左方變數也可以重新定義它的名稱。
寫法跟剛才很像:
首先,右方物件先被取出值,賦予到左方這個物件的屬性上,接著前方這個屬性可以再重新定義它的名稱。
1 | let { Ginyu: Goku } = GinyuTeam; |
類似做法:展開運算符
其實如果是要讀取物件內的 “所有” 值,並加入到單一變數上的話,也可以使用上篇筆記提到的「展開運算符」。
範例:
1 | let family = { |
延伸問題:複雜的解構
如果哪天出現了一個複雜的解構,我們首先要冷靜下來,一步一步看懂它在寫什麼。
1 | let { |
上面範例的答案會是什麼呢?
答案是 小明 老媽
。為什麼?
麥慌啦!總之我們先從 “右邊” 開始看起。
- 先看右邊,我們可以看到有一個
ming
跟 一個family
。 - 首先右方的
ming
的值,會傳到左方物件的ming
屬性,此外它做了重新命名。
所以,左邊這個Goku
就是小明
啦! - 接著是
family
,右方的family
鏡射到左邊。不過,因為這個, mom
前面有個逗點,所以它是取得第二個位置的變數,也就是老媽
這個值。
“預設值” 的概念
下方範例中,左方的陣列裡已經有賦予值了,現在又要將後方的 ['阿明']
賦予進去,結果會變得如何呢?
1 | let [ming = '小明', jay = '杰倫'] = ['阿明']; |
結果是 阿明 杰倫
,因為第一個會被賦值而取代掉,第二個會用 “預設值”。
因此,我們可以知道如果右方沒有傳值進來,左方會沿用預設值。
範例:
1 | let { family: ming = '小明' } = {}; |
預設的 family
變數重新命名為 ming
,並帶有預設值。
同時,因為右方沒有傳值進來,所以 ming
會繼續使用預設值,就是 小明
這個名稱。
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。