JavaScript陣列解構賦值

ES2015之前，變數的賦值格式非常固定，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼
let webName="螞蟻部落";
let url;
url="http://www.softwhy.com"

上面是已經司空見慣不能再簡單的變數賦值方式，宣告的同時賦值或者先宣告再賦值。

ES2015開始新增多種賦值方式，本文介紹其中的陣列解構賦值，其他結構賦值參閱相關文章。

陣列解構賦值程式碼演示如下：

[JavaScript] 純文字檢視 複製程式碼
let [webName, url, address,age] = ["螞蟻部落", "www.softwhy.com", "青島市南區",4];
console.log(webName,url,address,age);

程式碼執行效果截圖如下：

成功實現了為變數的賦值效果，陣列結構賦值解釋如下：

按照指定模式從右側陣列中提取值，然後給左側陣列相同模式的變數進賦值，這就是陣列結構賦值。

陣列解構賦值程式碼例項：

[JavaScript] 純文字檢視 複製程式碼
let [webName, [[url,address], age]] = ["螞蟻部落", [["www.softwhy.com","青島市南區"], 4]];
console.log(webName);
console.log(url);
console.log(address);
console.log(age);

程式碼執行效果截圖如下：

賦值成功，由此可見巢狀的陣列結構也可以實現解構賦值。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let [webName, , age] = ["螞蟻部落", "www.softwhy.com", 4];
console.log(webName);
console.log(age);

上面的程式碼雖然在模式中空缺了一個變數，不過依然可以進行賦值。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let [webName,age] = ["螞蟻部落"];
console.log(webName);
console.log(age);

如果解構賦值不成功，那麼變數值為undefined。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let [webName,age] = ["螞蟻部落",4,"www.softwhy.com"];
let [x,[y],z] = [1, [2,3,4], 5];
console.log(webName);
console.log(age);
console.log(x);
console.log(y);
console.log(z);

左邊的模式可以不完全匹配右邊的陣列。

等號右側是非陣列：

如果等號右側不是陣列，那麼就要分情況處理:

（1）.如果是物件，那麼判斷是否具有Iterator介面。

（2）.如果是值型別，那麼首先轉換為物件，然後再判斷這個物件是否具有Iterator介面。

只要一個結構具有Iterator介面都可以進行陣列結構賦值。

關於Iterator介面可以參閱ES2015 Iterator遍歷器一章節。

[JavaScript] 純文字檢視 複製程式碼
let [num] = 8;
let [bool] = true;
let [un] = undefined;
let [nan] = NaN;
let [nu] = null;
let [obj] = {};

程式碼都會報錯。右邊值，要麼無法轉換為物件，要麼轉換後的物件沒有Iterator介面，{}本身就沒有此介面。

再來看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let obj = {};
obj[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};
let [a,b,c]=obj;
console.log(a);
console.log(b);
console.log(c);

只要有遍歷器介面，就可以使用陣列解構賦值。

關於上面的function* () {}函式可以參閱ES2015 Generator()一章節。

陣列解構賦值預設值：

解構賦值可以為模式中的變數指定預設值。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let [num = 5] = [];
let [webName, url = "softwhy.com"] = ["螞蟻部落"]; 
let [age, address = "青島市南區"] = [4, undefined];
console.log(num);
console.log(webName,url);
console.log(age,address);

解構賦值，如果對應的值嚴格等於（===）undefined，那麼就使用預設值。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let [num = 5] = [null];
console.log(num);

儘管null==undefined，但是null!==undefined，所以預設值不會生效。

[JavaScript] 純文字檢視 複製程式碼
function func(){
  console.log("螞蟻部落");
  return "螞蟻部落";
}
let [webName = func()] = ["antzone"];

如果沒有滿足使用預設值的條件，那麼預設值的函式是不會被執行的。

[JavaScript] 純文字檢視 複製程式碼
let [x = 1, y = x] = []; 
//下面的程式碼會報錯，因為y在宣告前就使用了 
let [x = y, y = 1] = []

let宣告的變數一定要先宣告再使用，否則就會報錯。