一:數(shù)組的解構(gòu)賦值
ES6允許按照一定模式,從數(shù)組和對象中提取值,對變量進(jìn)行賦值,這被稱為解構(gòu)(Destructuring)。
本質(zhì)上,這種寫法屬于“模式匹配”,只要等號兩邊的模式相同,左邊的變量就會被賦予對應(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 '
二:對象的解構(gòu)賦值
對象的解構(gòu)與數(shù)組有一個(gè)重要的不同。
數(shù)組的元素是按次序排列的,變量的取值由它的位置決定;
而對象的屬性沒有次序,變量必須與屬性同名,才能取到正確的值。
例一:
var ? ?{ ?foo , bar ?} ?= ?{ ?foo : " aaa ", bar : " bbb " ?};
foo ?// ?"aaa";
//和順序無關(guān)
var? ? {bar, foo }? =? {? foo : " aaa ", bar : " bbb "? };
foo? //? "aaa";
//變量沒有對應(yīng)的同名屬性
var? ? {baz}? =? {? foo : " aaa ", bar : " bbb "? };
baz ?// undeefined
例二:
如果變量名與屬性名不一致,必須寫成下面這樣。
var? ? { ?foo :?baz ?}? =? {? foo : " aaa ", bar : " bbb "? };
baz // 'aaa'
例三:
解構(gòu)也可以用于嵌套結(jié)構(gòu)的對象。
var ?o = {
? ? p : [
? ? ? ? ? ? ' hello ',
? ? ? ? ? ? { y: ' world ' }
? ? ]
};
var ?{ p : ?[ x , { ?y } ] ?} = o;
x // hello;
y // world;
例四:
對象的解構(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} );
上面的寫法會報(bào)錯(cuò),因?yàn)镴avaScript引擎會將{ x } 理解成一個(gè)代碼塊,從而發(fā)生語法錯(cuò)誤。只有不將大括號寫在行首,避免JavaScript將其解釋為代碼塊,才能解決這個(gè)問題。
例六:
對象的解構(gòu)賦值,可以很方便地將現(xiàn)有對象的方法,賦值到某個(gè)變量。
let ?{ ?log , sin , cos ?} ?= ?Math ?;
上面代碼將Math對象的對數(shù)、正弦、余弦三個(gè)方法,賦值到對應(yīng)的變量上,
三:解構(gòu)賦值用途
(1)從函數(shù)返回多個(gè)值
例一:
// 返回一個(gè)數(shù)組
function ? example () { ?return[ 1 , 2 , 3 ]; }
var ?[ a , b , c ] ?= ?example();
// 返回一個(gè)對象
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? ) {
? ? // ...
}