iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 2
0
Modern Web

ES666系列 第 2

ES6 解構賦值-上 Day2

剛開始看到解購賦值,就被嚇得信心蕩然無存,
一下解構又賦值的會不會很難懂,
但硬著頭皮看了幾個用法後發現其實還蠻方便的,

ES6 使用模式匹配的方式替變數賦值,所宣告變數的模式必須與變數值相符,
以物件來說物件的屬性就是它的模式,而屬性值會被賦與對應的值,

陣列的解構賦值:

以前宣告變數只能一次宣告一個變數並賦與它的內容(依據內容會是不同型別),
現在使用 ES6 的解構賦值能夠讓你一次滿足所有願望,
就讓我們看一下它的使用方式大概會是什麼樣子,

這邊的[]陣列裡的內容可以把它當成不同變數,每個變數分別對應 = 後的各個成員內容,
let 宣告的陣列裡索引值0代表的是 person1 ,等號後的索引值0代表的是person1這個變數的值也就是 "jack"以此類推,等號前後是變數名稱與變數值的關係。

let [person1, age, mood] = ["jack", 18, ["sad", "happy", "excited"]];
console.log(person1); // "jack"
console.log(age); // 18
console.log(mood); // ["sad", "happy", "excited"]

可參考另外兩種變形,不一定要每個欄位都填,它會對與相應的索引互相匹配。

let [, , mood] = [jack, 18, ["sad", "happy", "excited"]];
console.log(mood); // ["sad", "happy", "excited"]

let [person1, ,  mood] = [jack, 18, ["sad", "happy", "excited"]];
console.log(person1); // jack
console.log(mood); // ["sad", "happy", "excited"]

可以看到有個...other的用法 這是 ES6 的展開運算子 可以將剩餘的陣列成員通通塞給 other 這個變數,
如果沒有相對應的值則這個變數的值會是undefined,

let [one, ...other] = [1, 2, 3, 4];
console.log(one); // 1
console.log(other); // [2, 3, 4]

let [a, b, ...z] = ['a'];
console.log(a); // 'a'
console.log(b); // undefined
console.log(z); // []

物件的解構賦值

物件的解構賦值與陣列的差異在於物件的解構是對應屬性名稱,也可對應屬性值,

物件的模式匹配不像陣列需要對應索引值,因此在物件的解構賦值中順序不引響結果。

let { apple, banana } = { apple: "good", banana: "bad" };
console.log(apple) // "good"
console.log(banana) // "bad"

let { banana ,  apple } = { apple: "good", banana: "bad" };
console.log(apple) // "good"
console.log(banana) // "bad"

如果變數與屬性名都沒有對應的名稱則變數的值會是 undefined

let { orange } = { apple: "good", banana: "bad" };
console.log(orange); // undefined

也可以屬性值來當作變數對應等號後方的屬性值,寫法會是類似這樣:

let { apple: "feel" } = { apple: "good", banana: "bad" };
console.log(feel); // "good"


let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
console.log(f); // 'hello'
console.log(l); // 'world'

下篇會再繼續圍繞在解構賦值的其他內容,
可以看到解構賦值讓我們在宣告變數上有了更多彈性,
可以依據自己的使用情境來取捨。


上一篇
ES6 宣告變數新語法 Day1
下一篇
ES6 解構賦值-下 Day3
系列文
ES66624

1 則留言

0
konekoya
iT邦新手 5 級 ‧ 2017-12-22 09:34:59

最後面的範例漏掉 code block 了喔,沒有 syntax highlighting

jimmy92 iT邦新手 5 級‧ 2017-12-22 10:35:19 檢舉

謝謝提醒 :)

我要留言

立即登入留言