變量的解構賦值
ES6中允許按照一定模式,從數組和對象中提取,對變量進行賦值。
數組的解構賦值
var [a,b,c] = [1,2,3]; a // 1; b // 2; c // 3;
上面的代碼標示可以從數組中提取值,按照位置的對應關系對變量進行賦值。
本質上,這種寫法屬於“模式匹配”,只要等號兩邊的模式相同,左邊的變量就會被賦予對應的值。
let [foo,[[bar],baz]] = [1,[[2],3]]; foo //1; bar //2; baz //3; let [,,third] = ['foo','bar','baz']; third //'baz' let [head,...tail] = [1,2,3,4] head //1; tail //[2,3,4]
如果解構不成功,變量的值就等於undefined。
let [x,y,z] = ['a'] x // 'a'; y // undefined z //[]
不完全解構
如果等號左邊的模式只匹配等號右邊數組的一部分,解構依然可以成功,這種情況叫做不完全解構。
let [x,y] = [1,2,3] x //1 y //2
如果等號右邊不是數組,那麼將會報錯。(不具備可遍歷的結構)。
只要某種數據結構具有Iterator接口,都可以采用數組形式的解構賦值
function* fibs(){ var a = 0; var b = 1; while(true){ yield a; [a,b] = [b,a+b]; } } var [first,second,third,fourth,fifth,sixth] = fibs(); sixth // 5
fibs是一個Generator函數,原生具有Iterator接口,解構賦值會依次從這個接口獲取值。
默認值
解構賦值允許指定默認值。
var [foo=true] = []; foo //true
ES6內部使用嚴格相等於運算符(===)判斷一個位置是否有值。所以,一個數組成員如果不嚴格等於undefined,默認值便不會生效。
var [x = 1] = [undefined] x // 1 var [x = 1] = [null] x // null
表達式也可以作為默認值,如果表達式作為默認值的時候,該表達式是惰性求值的,只有在用到的時候才會求值。
function f(){ console.log('aaa') } let [x = f()] = [1]
在上面的代碼中,函數f不會執行,是因為x能取到值。
默認值可以引用解構賦值的其他變量,但該變量必須已經聲明。
對象的解構賦值
解構賦值可以應用在數組上,同樣也可以用於對象。
var {foo,bar} = {foo:'aaa',bar:'bbb'} foo // 'aaa' bar // 'bbb'
對象的解構賦值與數組有一個不同點,就是數組的元素是按次序排序的,變量的取值由它的位置決定,而對象的屬性沒有次序,變量必須與屬性同名,才能取到正確的值。
var {bar,foo} = {foo:'aaa',bar:'bbb'} foo //'aaa' bar //'bbb' var {baz} = {foo:'aaa',bar:'bbb'} baz //undefined
如果變量名與屬性名不一致,那必須寫成這樣:
var {foo:baz} = {foo:'aaa'} baz //'aaa'
實際上對象的解構賦值是以下的形式簡寫:
var {foo:foo,bar:bar} = {foo:'aaa',bar:'bbb'}
對象的解構賦值的內部機制,是先找到同名屬性,然後再賦給對應的變量,真正被賦值的是後者,而不是前者。
但是,采取上面的寫法時,變量的聲明和賦值是一起的,對於let和const而言,變量不能重新聲明,所以一旦賦值的變量以前聲明過,就會報錯。
對象的解構也可以用於嵌套結構的對象。
var obj = { p: [ 'hello' , { y : 'world' } ] } var {p:[x,{y}]} = obj x //'hello' y //'world'
這時p是模式,不是變量,因此不會被賦值。
對象的解構賦值也可以指定默認值,默認值的生效條件是,對象的屬性值嚴格等於undefined。
var {x=3} = {x:undefined} x //3 var {x=3} = {x:null} x //null
如果解構模式是嵌套對象,而且子對象所在的父屬性不存在,那麼將會報錯。
var {foo:{bar}} = {baz:'baz'}
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家學習或者使用ES6能帶來一定的幫助,如果有疑問大家可以留言交流。