ES6學習之變數的解構賦值，es6解構賦值

ES6學習之變數的解構賦值，es6解構賦值

變數的解構賦值

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 // undefinedz //[]

不完全解構

如果等號左邊的模式只匹配等號右邊數組的一部分，解構依然可以成功，這種情況叫做不完全解構。

let [x,y] = [1,2,3]x //1y //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 // 1var [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}]} = objx //'hello'y //'world'

這時p是模式，不是變數，因此不會被賦值。

對象的解構賦值也可以指定預設值，預設值的生效條件是，對象的屬性值嚴格等於undefined。

var {x=3} = {x:undefined}x //3var {x=3} = {x:null}x //null

如果解構模式是嵌套對象，而且子物件所在的父屬性不存在，那麼將會報錯。

var {foo:{bar}} = {baz:'baz'}

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家學習或者使用ES6能帶來一定的協助，如果有疑問大家可以留言交流。