解構-陣列 詳解及各種使用場景。

1.ES6中引入了新的取值方法：解構
這篇文章主要講其中一種模式的使用—陣列解構，另一種物件模式的結構參看我的另一篇文章。

使用格式： let [變數名,…]=[陣列元素]； 賦值的時候是一一對應的，第一個變數取到的值是對應陣列內第一個元素。
這裡結構只能對陣列，物件使用。

let [x,y,z]=undefined;    
let [a,b,c]=null;
//報錯，因為undefined   null 均不能轉化為obj

let  [x,y,z]='abc';
console.log(x,y,z);//  a   b   c;
//這裡瀏覽器將字串abc隱式轉化為了obj=====new  String('abc');
 

所以其實任何可以轉化為obj，array的都可以使用解構。
原來需要取陣列內的值：

let  arr=[1,2,3];
let  x=arr[0],
      y=arr[1],
      z=arr[2];

有了解構之後會非常的簡便，下面來看下怎麼使用吧。

各種使用場景：

1. 獲取陣列內的元素。

/*第一種使用*/
let arr=[1,2,3];
let [x,y,z]=arr;      ======     let  [x,y,z]=[1,2,3];
console.log(x,y,z);//  1,2,3

情況1：當變數數量與陣列內的元素個數不對應時，此時後面沒有元素對應的變數，值將為undefined

let  [x,y,z]=[1,2];
console.log(x,y,z);//    1    2   undefined

情況2：當陣列內有空位元素時，其實此時該位置的值預設為undefined。

let [x,y,z]=[1,,2];     //此時陣列===   [1,undefined,2]
console.log(x,y,z); //   1  undefined  2;

當然這些變數也可以有預設值：寫法如下

let [x,y,z=3]=[2];
console.log(x,y,z);//    2   undefined    3

這裡遵循如果沒有匹配到對應元素，則若有預設值，則取預設值，若無還是undefined(就相當與你聲明瞭變數，卻沒有為它賦值)。
情況3：當有預設值，且又匹配到對應的元素時：

let [x,y=6,z=3]=[1,2];
console.log(x,y,z); //   1   2   3

這裡可以看到 x沒有取預設值6，而是取了匹配值2，這裡其實預設值是遵循一個惰性取值，只有當沒有匹配到元素時(這裡可以理解為匹配值將預設值覆蓋了)，才會取預設值。當然當陣列的值為undefined時除外，此時變數會取預設值。

let [x=1,y=6,z]=[undefined,2,3];
console.log(x,y,z); // 1   2   3

可以看到x匹配到了值，但是元素為undefined，最終還是取預設值了。而y匹配到的值並不為undefined，所以將預設值覆蓋了。

2. 函式引數的使用：
   這裡需要知道如果 函式引數 採用解構模式，則函式必須傳入實參，否則會報錯。而且引數必須是以陣列形式傳入。

/*原始寫法*/
function test(x,y,z){
	console.log(x,y,z);
}
test();//undefined  undefined  undefined
/*解構寫法*/			
function test2([x,y,z]){
	console.log(x,y,z);
}
test2();//報錯

還有需要知道引數預設值與預設傳參的區別，形式引數(形參)有預設值，並不代表傳了實參。看一個例子：

function test([x=1,y=2,z=3]){
	console.log(x,y,z);
}
test();//報錯

這裡還是會報錯，因為還是沒有傳入引數
正確預設傳參：

function test([x,y,z]=[1,2,3]){
	console.log(x,y,z);
}
test();//1,2,3

這裡如果傳入引數，則會把預設傳的陣列引數覆蓋：

function test([x,y,z]=[1,2,3]){
	console.log(x,y,z);
}
test([6,,6]);//6   undefined   6

這裡有人可能會問為什麼不是 6 2 6，當值為undefined時不是取預設值麼。
說的好，其實這裡面 2 只是預設傳入的引數，不是引數變數的預設值，所以不要搞混。

//這樣才是預設值
function test([x=1,y=2,z=3]){
	console.log(x,y,z);
}
test([,,]);//1  2  3        [, ,]====[undefined,undefined,undefined]

解構的巢狀使用

let  [x,[y],z]=[1,[2],[]];
console.log(x,y,z);//1  2   []

其實巢狀使用，還是遵循以上規則。只是多套了一層或幾層陣列而已。