JavaScript解構賦值的用途

JavaScript解構賦值是ES2015新增，具體可以參閱以下五篇文章：

（1）.JavaScript陣列解構賦值一章節。

（2）.JavaScript物件解構賦值一章節。

（3）.JavaScript函式引數解構賦值一章節。

（4）.JavaScript字串解構賦值一章節。

（5）.JavaScript解構賦值小括號的應用一章節。

下面分享幾個常見的解構賦值的使用：

（1）.交換變數的值：

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

上面程式碼可以將兩個變數的值交換。

（2）.函式一次返回多個值：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let func =()=> [1, 2, 3];
let [a, b, c] = func();
console.log(a);
console.log(b);
console.log(c);

函式返回一個陣列，然後通過陣列解構賦值分別給三個變數賦值。

箭頭函式可以參閱箭頭函式介紹一章節。

上面是陣列的解構賦值，下面再來看一個物件解構賦值程式碼：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let funcObj =()=>{ 
  return {age: 5,url:"www.softwhy.com"}
}
let {age, url} = funcObj();
console.log(age);
console.log(url);

函式返回一個物件直接量，然後進行物件解構賦值操作。

（3）.方便提取json格式資料值：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let jsonData = {
  id: 8,
  status: "ok",
  data: [55, 88]
};
let { id, status, data} = jsonData;
console.log(id)
console.log(status)
console.log(data)

很方便的從json結構物件中提取資料，其實這個就是物件解構賦值。

（4）.給函式設定預設值：

這裡不舉例子了，具體參閱ES2015 函式新增特性一章節。