基本用法

ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。

以前，為變量賦值，只能直接指定值。

leta=1;letb=2;letc=3;

ES6 允許寫成下面這樣。

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

上面代碼表示，可以從數組中提取值，按照對應位置，對變量賦值。

本質上，這種寫法屬于“模式匹配”，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。下面是一些使用嵌套數組進行解構的例子。

let[foo,[[bar],baz]]=[1,[[2],3]];foo// 1bar// 2baz// 3let[,,third]=["foo","bar","baz"];third// "baz"let[x,,y]=[1,2,3];x// 1y// 3let[head,...tail]=[1,2,3,4];head// 1tail// [2, 3, 4]let[x,y,...z]=['a'];x// "a"y// undefinedz// []

如果解構不成功，變量的值就等于undefined。

let[foo]=[];let[bar,foo]=[1];

以上兩種情況都屬于解構不成功，foo的值都會等于undefined。

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

let[x,y]=[1,2,3];x// 1y// 2let[a,[b],d]=[1,[2,3],4];a// 1b// 2d// 4

上面兩個例子，都屬于不完全解構，但是可以成功。

如果等號的右邊不是數組（或者嚴格地說，不是可遍歷的結構，參見《Iterator》一章），那么將會報錯。

// 報錯let[foo]=1;let[foo]=false;let[foo]=NaN;let[foo]=undefined;let[foo]=null;let[foo]={};

上面的語句都會報錯，因為等號右邊的值，要么轉為對象以后不具備 Iterator 接口（前五個表達式），要么本身就不具備 Iterator 接口（最后一個表達式）。

對于 Set 結構，也可以使用數組的解構賦值。

let[x,y,z]=newSet(['a','b','c']);x// "a"

事實上，只要某種數據結構具有 Iterator 接口，都可以采用數組形式的解構賦值。

function*fibs(){leta=0;letb=1;while(true){yield a;[a,b]=[b,a+b];}}let[first,second,third,fourth,fifth,sixth]=fibs();sixth// 5

上面代碼中，fibs是一個 Generator 函數（參見《Generator 函數》一章），原生具有 Iterator 接口。解構賦值會依次從這個接口獲取值。

默認值

解構賦值允許指定默認值。

let[foo=true]=[];foo// truelet[x,y='b']=['a'];// x='a', y='b'let[x,y='b']=['a',undefined];// x='a', y='b'

注意，ES6 內部使用嚴格相等運算符（===），判斷一個位置是否有值。所以，如果一個數組成員不嚴格等于undefined，默認值是不會生效的。

let[x=1]=[undefined];x// 1let[x=1]=[null];x// null

上面代碼中，如果一個數組成員是null，默認值就不會生效，因為null不嚴格等于undefined。

如果默認值是一個表達式，那么這個表達式是惰性求值的，即只有在用到的時候，才會求值。

functionf(){console.log('aaa');}let[x=f()]=[1];

上面代碼中，因為x能取到值，所以函數f根本不會執行。上面的代碼其實等價于下面的代碼。

letx;if([1][0]===undefined){x=f();}else{x=[1][0];}

默認值可以引用解構賦值的其他變量，但該變量必須已經聲明。

let[x=1,y=x]=[];// x=1; y=1let[x=1,y=x]=[2];// x=2; y=2let[x=1,y=x]=[1,2];// x=1; y=2let[x=y,y=1]=[];// ReferenceError

上面最后一個表達式之所以會報錯，是因為x用到默認值y時，y還沒有聲明。

對象的解構賦值

解構不僅可以用于數組，還可以用于對象。

let{foo,bar}={foo:"aaa",bar:"bbb"};foo// "aaa"bar// "bbb"

對象的解構與數組有一個重要的不同。數組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

let{bar,foo}={foo:"aaa",bar:"bbb"};foo// "aaa"bar// "bbb"let{baz}={foo:"aaa",bar:"bbb"};baz// undefined

上面代碼的第一個例子，等號左邊的兩個變量的次序，與等號右邊兩個同名屬性的次序不一致，但是對取值完全沒有影響。第二個例子的變量沒有對應的同名屬性，導致取不到值，最后等于undefined。

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

var{foo:baz}={foo:'aaa',bar:'bbb'};baz// "aaa"letobj={first:'hello',last:'world'};let{first:f,last:l}=obj;f// 'hello'l// 'world'

這實際上說明，對象的解構賦值是下面形式的簡寫（參見《對象的擴展》一章）。

let{foo:foo,bar:bar}={foo:"aaa",bar:"bbb"};

也就是說，對象的解構賦值的內部機制，是先找到同名屬性，然后再賦給對應的變量。真正被賦值的是后者，而不是前者。

let{foo:baz}={foo:"aaa",bar:"bbb"};baz// "aaa"foo// error: foo is not defined

上面代碼中，foo是匹配的模式，baz才是變量。真正被賦值的是變量baz，而不是模式foo。

與數組一樣，解構也可以用于嵌套結構的對象。

letobj={p:['Hello',{y:'World'}]};let{p:[x,{y}]}=obj;x// "Hello"y// "World"

注意，這時p是模式，不是變量，因此不會被賦值。如果p也要作為變量賦值，可以寫成下面這樣。

letobj={p:['Hello',{y:'World'}]};let{p,p:[x,{y}]}=obj;x// "Hello"y// "World"p// ["Hello", {y: "World"}]

下面是另一個例子。

varnode={loc:{start:{line:1,column:5}}};var{loc,loc:{start},loc:{start:{line}}}=node;line// 1loc// Object {start: Object}start// Object {line: 1, column: 5}

上面代碼有三次解構賦值，分別是對loc、start、line三個屬性的解構賦值。注意，最后一次對line屬性的解構賦值之中，只有line是變量，loc和start都是模式，不是變量。

下面是嵌套賦值的例子。

letobj={};letarr=[];({foo:obj.prop,bar:arr[0]}={foo:123,bar:true});obj// {prop:123}arr// [true]

對象的解構也可以指定默認值。

var{x=3}={};x// 3var{x,y=5}={x:1};x// 1y// 5var{x:y=3}={};y// 3var{x:y=3}={x:5};y// 5var{message:msg='Something went wrong'}={};msg// "Something went wrong"

默認值生效的條件是，對象的屬性值嚴格等于undefined。

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

上面代碼中，如果x屬性等于null，就不嚴格相等于undefined，導致默認值不會生效。

如果解構失敗，變量的值等于undefined。

let{foo}={bar:'baz'};foo// undefined

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

// 報錯let{foo:{bar}}={baz:'baz'};

上面代碼中，等號左邊對象的foo屬性，對應一個子對象。該子對象的bar屬性，解構時會報錯。原因很簡單，因為foo這時等于undefined，再取子屬性就會報錯，請看下面的代碼。

let_tmp={baz:'baz'};_tmp.foo.bar// 報錯

如果要將一個已經聲明的變量用于解構賦值，必須非常小心。

// 錯誤的寫法letx;{x}={x:1};// SyntaxError: syntax error

上面代碼的寫法會報錯，因為 JavaScript 引擎會將{x}理解成一個代碼塊，從而發生語法錯誤。只有不將大括號寫在行首，避免 JavaScript 將其解釋為代碼塊，才能解決這個問題。

// 正確的寫法letx;({x}={x:1});

上面代碼將整個解構賦值語句，放在一個圓括號里面，就可以正確執行。關于圓括號與解構賦值的關系，參見下文。

解構賦值允許等號左邊的模式之中，不放置任何變量名。因此，可以寫出非常古怪的賦值表達式。

({}=[true,false]);({}='abc');({}=[]);

上面的表達式雖然毫無意義，但是語法是合法的，可以執行。

對象的解構賦值，可以很方便地將現有對象的方法，賦值到某個變量。

let{log,sin,cos}=Math;

上面代碼將Math對象的對數、正弦、余弦三個方法，賦值到對應的變量上，使用起來就會方便很多。

由于數組本質是特殊的對象，因此可以對數組進行對象屬性的解構。

letarr=[1,2,3];let{0:first,[arr.length-1]:last}=arr;first// 1last// 3

上面代碼對數組進行對象解構。數組arr的0鍵對應的值是1，[arr.length - 1]就是2鍵，對應的值是3。方括號這種寫法，屬于“屬性名表達式”，參見《對象的擴展》一章。

字符串的解構賦值

字符串也可以解構賦值。這是因為此時，字符串被轉換成了一個類似數組的對象。

const[a,b,c,d,e]='hello';a// "h"b// "e"c// "l"d// "l"e// "o"

類似數組的對象都有一個length屬性，因此還可以對這個屬性解構賦值。

let{length:len}='hello';len// 5

數值和布爾值的解構賦值

解構賦值時，如果等號右邊是數值和布爾值，則會先轉為對象。

let{toString:s}=123;s===Number.prototype.toString// truelet{toString:s}=true;s===Boolean.prototype.toString// true

上面代碼中，數值和布爾值的包裝對象都有toString屬性，因此變量s都能取到值。

解構賦值的規則是，只要等號右邊的值不是對象或數組，就先將其轉為對象。由于undefined和null無法轉為對象，所以對它們進行解構賦值，都會報錯。

let{prop:x}=undefined;// TypeErrorlet{prop:y}=null;// TypeError

函數參數的解構賦值

函數的參數也可以使用解構賦值。

functionadd([x,y]){returnx+y;}add([1,2]);// 3

上面代碼中，函數add的參數表面上是一個數組，但在傳入參數的那一刻，數組參數就被解構成變量x和y。對于函數內部的代碼來說，它們能感受到的參數就是x和y。

下面是另一個例子。

[[1,2],[3,4]].map(([a,b])=>a+b);// [ 3, 7 ]

函數參數的解構也可以使用默認值。

functionmove({x=0,y=0}={}){return[x,y];}move({x:3,y:8});// [3, 8]move({x:3});// [3, 0]move({});// [0, 0]move();// [0, 0]

上面代碼中，函數move的參數是一個對象，通過對這個對象進行解構，得到變量x和y的值。如果解構失敗，x和y等于默認值。

注意，下面的寫法會得到不一樣的結果。

functionmove({x,y}={x:0,y:0}){return[x,y];}move({x:3,y:8});// [3, 8]move({x:3});// [3, undefined]move({});// [undefined, undefined]move();// [0, 0]

上面代碼是為函數move的參數指定默認值，而不是為變量x和y指定默認值，所以會得到與前一種寫法不同的結果。

undefined就會觸發函數參數的默認值。

[1,undefined,3].map((x='yes')=>x);// [ 1, 'yes', 3 ]

圓括號問題

解構賦值雖然很方便，但是解析起來并不容易。對于編譯器來說，一個式子到底是模式，還是表達式，沒有辦法從一開始就知道，必須解析到（或解析不到）等號才能知道。

由此帶來的問題是，如果模式中出現圓括號怎么處理。ES6 的規則是，只要有可能導致解構的歧義，就不得使用圓括號。

但是，這條規則實際上不那么容易辨別，處理起來相當麻煩。因此，建議只要有可能，就不要在模式中放置圓括號。

不能使用圓括號的情況

以下三種解構賦值不得使用圓括號。

（1）變量聲明語句

// 全部報錯let[(a)]=[1];let{x:(c)}={};let({x:c})={};let{(x:c)}={};let{(x):c}={};let{o:({p:p})}={o:{p:2}};

上面6個語句都會報錯，因為它們都是變量聲明語句，模式不能使用圓括號。

（2）函數參數

函數參數也屬于變量聲明，因此不能帶有圓括號。

// 報錯functionf([(z)]){returnz;}// 報錯functionf([z,(x)]){returnx;}

（3）賦值語句的模式

// 全部報錯({p:a})={p:42};([a])=[5];

上面代碼將整個模式放在圓括號之中，導致報錯。

// 報錯[({p:a}),{x:c}]=[{},{}];

上面代碼將一部分模式放在圓括號之中，導致報錯。

可以使用圓括號的情況

可以使用圓括號的情況只有一種：賦值語句的非模式部分，可以使用圓括號。

[(b)]=[3];// 正確({p:(d)}={});// 正確[(parseInt.prop)]=[3];// 正確

上面三行語句都可以正確執行，因為首先它們都是賦值語句，而不是聲明語句；其次它們的圓括號都不屬于模式的一部分。第一行語句中，模式是取數組的第一個成員，跟圓括號無關；第二行語句中，模式是p，而不是d；第三行語句與第一行語句的性質一致。

用途

變量的解構賦值用途很多。

（1）交換變量的值

letx=1;lety=2;[x,y]=[y,x];

上面代碼交換變量x和y的值，這樣的寫法不僅簡潔，而且易讀，語義非常清晰。

（2）從函數返回多個值

函數只能返回一個值，如果要返回多個值，只能將它們放在數組或對象里返回。有了解構賦值，取出這些值就非常方便。

// 返回一個數組functionexample(){return[1,2,3];}let[a,b,c]=example();// 返回一個對象functionexample(){return{foo:1,bar:2};}let{foo,bar}=example();

（3）函數參數的定義

解構賦值可以方便地將一組參數與變量名對應起來。

// 參數是一組有次序的值functionf([x,y,z]){...}f([1,2,3]);// 參數是一組無次序的值functionf({x,y,z}){...}f({z:3,y:2,x:1});

（4）提取JSON數據

解構賦值對提取JSON對象中的數據，尤其有用。

letjsonData={id:42,status:"OK",data:[867,5309]};let{id,status,data:number}=jsonData;console.log(id,status,number);// 42, "OK", [867, 5309]

上面代碼可以快速提取 JSON 數據的值。

（5）函數參數的默認值

jQuery.ajax=function(url,{async=true,beforeSend=function(){},cache=true,complete=function(){},crossDomain=false,global=true,// ... more config}){// ... do stuff};

指定參數的默認值，就避免了在函數體內部再寫var foo = config.foo || 'default foo';這樣的語句。

（6）遍歷Map結構

任何部署了Iterator接口的對象，都可以用for...of循環遍歷。Map結構原生支持Iterator接口，配合變量的解構賦值，獲取鍵名和鍵值就非常方便。

varmap=newMap();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){// ...}

（7）輸入模塊的指定方法

加載模塊時，往往需要指定輸入哪些方法。解構賦值使得輸入語句非常清晰。

const{SourceMapConsumer,SourceNode}=require("source-map");