iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 11
0
Modern Web

一步一腳印-紮紮實實學es6系列 第 11

解構賦值

今天開始來玩玩ES6的新東西

物件前面已經理解得七七八八了
其實關於物件繼承
還有許多東西要補充
我等鐵人賽完再好好補完這些筆記

雖然說時間像肥肉一樣,擠一擠就有了
但每天要擠...真的不容易

今天來點輕鬆的小技巧
可以讓我們少打一點程式碼,肌鍵炎的機率少一點^^

什麼是解構賦值呢?

白話的說,就是本來我們要一個一個去發禮物的

一個禮物給一個孩子

現在呢 我們可以把禮物集中在一起

然後請js 先生幫我們拆箱(解構)

然後孩子就會自己去領(賦值)對應的禮物了!

以下分三種情況來討論

  • 陣列
  • 物件
  • 函數

陣列的解構賦值

一般我們要宣告多個變數可能會這樣子寫

let a=4,b=5,c=6; //一個一個變數宣告

但現在我們可以這樣

let [a,b,c]=[4,5,6]

你可能會說
明明沒少打多少程式碼好嗎
無聊。
but !!!
有發現嗎 這是將一個陣列直接取出元素
以前可能需要用迴圈去處理陣列
或是用陣列的索引將元素取出,放到變數
現在可以直接用變數名解構「陣列」了哦

有沒有很方便!?

你說

這個看起來要全部對應耶
如果我有一個陣列有100個元素,那我要打100個英文來對應嗎??
怎麼可能打這麼多變數 ,有些沒用到怎麼辦呢?
放心好了 ,解構賦值會特地加進這個功能
就表示不會這麼難用

//如果有空缺的,就直接空著
let [a1,a2,,a4]=[1,2,3,4,5,6,7,8,9] //中間少了a3, 第5個元素以後都不取
console.log(a1,a2,a4)
//a1=1,a2=2,a4=4

https://ithelp.ithome.com.tw/upload/images/20181011/20110579t5YdWLpJp8.png

欸 那麼如果是陣列中的陣列也可以嗎?
我們來試一下

let [b0,b1,[b20,b21],b3]=[1,2,[33,44],5,6,7,8,9] 
console.log(b20,b21);
//33,44

不過要是空缺很多的話,就不建議用這種方式
直接取對應索引,去陣列中取值就好了

物件的解構賦值

物件的解構賦值的格式跟陣列很像

但必須要給賦值的物件指定一樣的物件屬性名

完全聽~~~ 不懂!

呃…那直接看例子

//我們先宣告一個obj ,當作之後要被解構的物件
let obj={age:14,length:10}

// 宣一個要被解構的物件,裡面要有一樣的屬性名
 
let {length:length_from_obj,age:age_from_obj}=obj
//在這邊,次序無關緊要,因為有屬性名繫結
//

https://ithelp.ithome.com.tw/upload/images/20181011/20110579eCK3wr17h3.png

結果成功解構賦值
https://ithelp.ithome.com.tw/upload/images/20181011/20110579L8F5WwAJ25.png

有人可能有疑問
那這邊可不可以只取某個值呢?
也就是像陣列一樣的只有部份取值

答案是肯定的
https://ithelp.ithome.com.tw/upload/images/20181011/20110579V1wTjj4IOV.png

也可以巢狀解構,也就是物件裡有陣列的解構賦值
大家可以自行嘗試看看

函數的解構賦值

這個好像比較特別!?
咱們來研究看看

在這邊是指函數的「參數」也可以解構賦值

啥意思呢,就是可以傳入一個集合

在函數內調用時,可以直接解構

...

好,還是看不懂

看例子最快

function abc({param1,param2,param3}){
console.log(param1,param2,param3)
}
abc({param3:30,param1:10})

是不是很好用呢!
https://ithelp.ithome.com.tw/upload/images/20181011/201105794EdCDTbz98.png

當然也能在參數用陣列的解構賦值嘍!

今天太累,先寫到這


上一篇
ES6 的 Class 、super 的特例與繼承
下一篇
函數的特點(一) 函數呼叫與IIFE(1)
系列文
一步一腳印-紮紮實實學es630

1 則留言

0
deh
iT邦新手 4 級 ‧ 2019-12-31 09:45:19

前顯易懂
雖然當下懂了但還是記不住..

我要留言

立即登入留言