變量的解構(gòu)賦值

ES6中允許按照一定模式，從數(shù)組和對(duì)象中提取，對(duì)變量進(jìn)行賦值。

數(shù)組的解構(gòu)賦值

var [a,b,c] = [1,2,3];
a // 1;
b // 2;
c // 3;

上面的代碼標(biāo)示可以從數(shù)組中提取值，按照位置的對(duì)應(yīng)關(guān)系對(duì)變量進(jìn)行賦值。

本質(zhì)上，這種寫(xiě)法屬于“模式匹配”，只要等號(hào)兩邊的模式相同，左邊的變量就會(huì)被賦予對(duì)應(yīng)的值。

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]

如果解構(gòu)不成功，變量的值就等于undefined。

let [x,y,z] = ['a']
x // 'a';
y // undefined
z //[]

不完全解構(gòu)

如果等號(hào)左邊的模式只匹配等號(hào)右邊數(shù)組的一部分，解構(gòu)依然可以成功，這種情況叫做不完全解構(gòu)。

let [x,y] = [1,2,3]
x //1
y //2

如果等號(hào)右邊不是數(shù)組，那么將會(huì)報(bào)錯(cuò)。（不具備可遍歷的結(jié)構(gòu)）。

只要某種數(shù)據(jù)結(jié)構(gòu)具有Iterator接口，都可以采用數(shù)組形式的解構(gòu)賦值

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是一個(gè)Generator函數(shù)，原生具有Iterator接口，解構(gòu)賦值會(huì)依次從這個(gè)接口獲取值。

默認(rèn)值

解構(gòu)賦值允許指定默認(rèn)值。

var [foo=true] = [];
foo //true

ES6內(nèi)部使用嚴(yán)格相等于運(yùn)算符(===)判斷一個(gè)位置是否有值。所以，一個(gè)數(shù)組成員如果不嚴(yán)格等于undefined，默認(rèn)值便不會(huì)生效。

var [x = 1] = [undefined]
x // 1

var [x = 1] = [null]
x // null

表達(dá)式也可以作為默認(rèn)值，如果表達(dá)式作為默認(rèn)值的時(shí)候，該表達(dá)式是惰性求值的，只有在用到的時(shí)候才會(huì)求值。

function f(){
 console.log('aaa')
}

let [x = f()] = [1]

在上面的代碼中，函數(shù)f不會(huì)執(zhí)行，是因?yàn)閤能取到值。

默認(rèn)值可以引用解構(gòu)賦值的其他變量，但該變量必須已經(jīng)聲明。

對(duì)象的解構(gòu)賦值

解構(gòu)賦值可以應(yīng)用在數(shù)組上，同樣也可以用于對(duì)象。

 var {foo,bar} = {foo:'aaa',bar:'bbb'}
 foo // 'aaa'
 bar // 'bbb'

對(duì)象的解構(gòu)賦值與數(shù)組有一個(gè)不同點(diǎn)，就是數(shù)組的元素是按次序排序的，變量的取值由它的位置決定，而對(duì)象的屬性沒(méi)有次序，變量必須與屬性同名，才能取到正確的值。

var {bar,foo} = {foo:'aaa',bar:'bbb'}
foo //'aaa'
bar //'bbb'


var {baz} = {foo:'aaa',bar:'bbb'}
baz //undefined

如果變量名與屬性名不一致，那必須寫(xiě)成這樣：

var {foo:baz} = {foo:'aaa'}
baz //'aaa'

實(shí)際上對(duì)象的解構(gòu)賦值是以下的形式簡(jiǎn)寫(xiě)：

var {foo:foo,bar:bar} = {foo:'aaa',bar:'bbb'}

對(duì)象的解構(gòu)賦值的內(nèi)部機(jī)制，是先找到同名屬性，然后再賦給對(duì)應(yīng)的變量，真正被賦值的是后者，而不是前者。

但是，采取上面的寫(xiě)法時(shí)，變量的聲明和賦值是一起的，對(duì)于let和const而言，變量不能重新聲明，所以一旦賦值的變量以前聲明過(guò)，就會(huì)報(bào)錯(cuò)。

對(duì)象的解構(gòu)也可以用于嵌套結(jié)構(gòu)的對(duì)象。

var obj = {
 p: [
  'hello' ,
  {
   y : 'world'
  }
 ]
}

var {p:[x,{y}]} = obj

x //'hello'
y //'world'

這時(shí)p是模式，不是變量，因此不會(huì)被賦值。

對(duì)象的解構(gòu)賦值也可以指定默認(rèn)值，默認(rèn)值的生效條件是，對(duì)象的屬性值嚴(yán)格等于undefined。

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

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

如果解構(gòu)模式是嵌套對(duì)象，而且子對(duì)象所在的父屬性不存在，那么將會(huì)報(bào)錯(cuò)。

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

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家學(xué)習(xí)或者使用ES6能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。