ES6語法總結(jié)(二)變量的解構(gòu)賦值

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


ES6允許按照一定模式,從數(shù)組和對(duì)象中提取值,對(duì)變量進(jìn)行賦值,這被稱為解構(gòu)(Destructuring)。

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

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

解構(gòu)賦值不僅適用于var命令,也適用于let和const命令。

例一:

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

等價(jià)于

var a = 1;

var b = 2;

var c = 3;

例二:

var ?[ foo,[ [ bar ],baz] ] = [ 1,[ [ 2 ],3] ] ;

foo// 1;

bar// 2;

baz// 3

var ?[ ,,third ] = [ "foo","bar","baz" ];

third // "baz"

var ?[ ?head,...tail ?] = [ ?1,2,3,4 ?];

head // ?1;

tail // ?[2, 3, 4]

例三:

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

var ?[ ?foo = true ?] ?= ?[ ];

foo // ?true

[ ?x , ?y = ' b ' ?] ?= ?[ ?'a' ?]

// x='a', y='b'

[ ?x , y = 'b ' ?] ?= ?[ ?' a ' , ?undefined ?]

// x='a', y='b'

例四:

也適用于let和const命令。

let ? ?[ v1 , v2 ,..., vN ] ? ?= ?array ;

const ? [ v1 , v2 ,..., vN ]? ? =? array ;

例五:

Set結(jié)構(gòu),也可以使用數(shù)組的解構(gòu)賦值。

[ ?a , b , c ?] ?= ?new ? Set ( [ " a "," b "," c " ] );

a // ' a '


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


對(duì)象的解構(gòu)與數(shù)組有一個(gè)重要的不同。

數(shù)組的元素是按次序排列的,變量的取值由它的位置決定;

而對(duì)象的屬性沒有次序,變量必須與屬性同名,才能取到正確的值。

例一:

var ? ?{ ?foo , bar ?} ?= ?{ ?foo : " aaa ", bar : " bbb " ?};

foo ?// ?"aaa";

//和順序無關(guān)

var? ? {bar, foo }? =? {? foo : " aaa ", bar : " bbb "? };

foo? //? "aaa";

//變量沒有對(duì)應(yīng)的同名屬性

var? ? {baz}? =? {? foo : " aaa ", bar : " bbb "? };

baz ?// undeefined

例二:

如果變量名與屬性名不一致,必須寫成下面這樣。

var? ? { ?foo :?baz ?}? =? {? foo : " aaa ", bar : " bbb "? };

baz // 'aaa'

例三:

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

var ?o = {

? ? p : [

? ? ? ? ? ? ' hello ',

? ? ? ? ? ? { y: ' world ' }

? ? ]

};

var ?{ p : ?[ x , { ?y } ] ?} = o;

x // hello;

y // world;

例四:

對(duì)象的解構(gòu)也可以指定默認(rèn)值。

var ?{ ?x = 3 ?}={ ?};

x //3

var ?{ x , y = 5 } = { x : 1 };

console.log( x , y )// 1 , 5

例五:

要將一個(gè)已經(jīng)聲明的變量用于解構(gòu)賦值,必須非常小心。

//錯(cuò)誤寫法

var ?x;

{x} = {x:1};

// SyntaxError: syntax error


//正確寫法

( {x} )={x:1};

// 或者

( {x} = {x:1} );

上面的寫法會(huì)報(bào)錯(cuò),因?yàn)镴avaScript引擎會(huì)將{ x } 理解成一個(gè)代碼塊,從而發(fā)生語法錯(cuò)誤。只有不將大括號(hào)寫在行首,避免JavaScript將其解釋為代碼塊,才能解決這個(gè)問題。

例六:

對(duì)象的解構(gòu)賦值,可以很方便地將現(xiàn)有對(duì)象的方法,賦值到某個(gè)變量

let ?{ ?log , sin , cos ?} ?= ?Math ?;

上面代碼將Math對(duì)象的對(duì)數(shù)、正弦、余弦三個(gè)方法,賦值到對(duì)應(yīng)的變量上,

三:解構(gòu)賦值用途


(1)從函數(shù)返回多個(gè)值

例一:

// 返回一個(gè)數(shù)組

function ? example () { ?return[ 1 , 2 , 3 ]; }

var ?[ a , b , c ] ?= ?example();


// 返回一個(gè)對(duì)象

function? example () {

? ? return { foo : 1 , bar : 2 };

}

var ? ?{ foo , bar } ?= ?example ();

(2)函數(shù)參數(shù)的定義

function ?f ( { x , y , z } ) {...}

f ( { x : 1, y : 2 ,z : 3 } )

(3)遍歷Map結(jié)構(gòu)

var ?map = new ?Map();

map.set('first','hello');

map.set('second','world');

for ?( ?let ?[ key , value ] ?of map ) {

? ?console.log( key + " is " + value );

}

// first is hello

// second is world

如果只想獲取鍵名,或者只想獲取鍵值,可以寫成下面這樣。

// 獲取鍵名

for( ?let [ key] ?of map ?) {

? ?// ...

}

// 獲取鍵值

for(? let [ ,value]? of map? ) {

? ? // ...

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容