15、ES6 陣列的解構賦值
陣列的解構賦值
基本用法ES6允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構（Destructuring）。以前，為變數賦值，只能直接指定值。
//ES5
var a=1;
var b=2;
var c=3;
ES6允許寫成下面這樣。
var [a,b,c]=[1,2,3];
console.log(a); //1
console.log(b); //2
console.log(c); //3
上面程式碼表示，可以從陣列中提取值，按照對應位置，對變數賦值。
本質上，這種寫法屬於“模式匹配”，只要等號兩邊的模式相同，左邊的變數就會被賦予對應的值。下面是一些使用巢狀陣列進行解構的例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
let [foo,[[bar],baz]]=[1,[[2],3]];
console.log(foo); //1
console.log(bar); //2
console.log(baz); //3
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
let [,,third]=["foo","bar","baz"];
console.log(third); //baz
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
let [x,,y]=[1,2,3];
console.log(x); //1
console.log(y); //3
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
let [head,...tail]=[1,2,3,4];
console.log(head); //1
console.log(tail); //[2, 3, 4]
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
let [x,y,...z]=['a'];
console.log(x); //a
console.log(y); //undefined
console.log(z); //[]
</script>
</head>
<body>
</body>
</html>
如果解構不成功，變數的值就等於†‡ˆ‹‡†undefined 。
var [foo]=[];
var [bar,foo]=[1];
以上兩種情況都屬於解構不成功，ˆ‘‘ foo的值都會等於undefined†‡ˆ‹‡† 。
另一種情況是不完全解構，即等號左邊的模式，只匹配一部分的等號右邊的陣列。這種情況下，解構依然可以成功。
let [x,y]=[1,2,3];
console.log(x); //1
console.log(y); //2
let [a,[b],c]=[1,[2,3],4];
console.log(a); //1
console.log(b); //2
console.log(c); //4
上面兩個例子，都屬於不完全解構，但是可以成功。
如果等號的右邊不是陣列（或者嚴格地說，不是可遍歷的結構），那麼將會報錯。
//報錯
let [foo]=1;
let [foo]=false;
let [foo]=NaN;
let [foo]=undefined;
let [foo]=null;
let [foo]={};
上面的表示式都會報錯，因為等號右邊的值，要麼轉為物件以後不具備Iterator介面（前五個表示式），要麼本身就不具備Iterator介面（最後一個表示式）。
解構賦值不僅適用於var命令，也適用於let和const命令。
var [v1,v2,...vn]=array;
let [v1,v2,...vn]=array;
const [v1,v2,...vn]=array;
對於Set結構，也可以使用陣列的解構賦值。
let [x,y,z]=new Set(["a","b","c"]);
console.log(x); //a
console.log(y); //b
console.log(z); //c
事實上，只要某種資料結構具有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();
console.log(sixth); //5
上面程式碼中， fibs是一個Generator函式，原生具有Iterator介面。解構賦值會依次從這個介面獲取值。
------------------------------------------------------------------------
預設值
解構賦值允許指定預設值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
var [foo=true]=[];
console.log(foo); //true
let [x,y='b']=['a'];
console.log(x); //a
console.log(y); //b
let [p,q='b']=['a',undefined];
console.log(p); //a
console.log(q); //b
</script>
</head>
<body>
</body>
</html>
注意，ES6內部使用嚴格相等運算子（=== ），判斷一個位置是否有值。所以，如果一個數組成員不嚴格等於 undefined，預設值是不會生效的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/traceur">
var [x=1]=[undefined];
console.log(x); //1
var [y=1]=[null];
console.log(y); //null
</script>
</head>
<body>
</body>
</html>
上面程式碼中，如果一個數組成員是null ，預設值就不會生效，因為 null 不嚴格等於undefined 。如果預設值是一個表示式，那麼這個表示式是惰性求值的，即只有在用到的時候，才會求值。
function f(){
console.log('aaa');
}
let [x=f()]=[1];
console.log(x); //1
上面程式碼中，因為 x 能取到值，所以函式 f 根本不會執行。上面的程式碼其實等價於下面的程式碼。
let x;
if([1][0]===undefined){
x=f();
}else{
x=[1][0];
}
預設值可以引用解構賦值的其他變數，但該變數必須已經宣告。
let [x=1,y=x]=[];
console.log(x); //1
console.log(y); //1
let [x=1,y=x]=[2];
console.log(x); //2
console.log(y); //2
let [x=1,y=x]=[1,2];
console.log(x); //1
console.log(y); //2
let [x=y,y=1]=[];
console.log(x); //undefined
console.log(y); //1
上面最後一個表示式x之所以是未定義，是因為 x 用到預設值 y 時， y還沒有宣告。