JavaScript函式引數解構賦值

解構賦值可以用於函式傳參，就通過程式碼例項做一下介紹。

一.解構賦值簡單介紹：

ES2015新增的解構賦值功能，極大提高了某些操作的便利性。

首先看兩段程式碼例項：

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

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

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

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

上面程式碼演示了最基本的解構賦值操作，本質上就是變數宣告和變數賦值操作。

相關閱讀：

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

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

二.函式引數解構賦值：

本文的標題是“JavaScript函式引數解構賦值”，好像這是ES2015新增的語法功能。

當然上述說法也沒錯，但本質上是解構賦值在函式傳參上的應用。

首先看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼
let func=(webName,url)=>{
  let webName;
}

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

報錯變數重複宣告，函式呼叫後，函式引數部分是宣告並賦值一個變數。

函式內部也有變數webName的宣告，所以導致變數重複宣告。

由此可見，函式引數其實就是待宣告的變數。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let func=([webName,url])=>{
  let str="";
  str=webName+"地址是"+url;
  return str;
}
console.log(func(["螞蟻部落","softwhy.com"]));

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

上述程式碼中，使用陣列解構賦值方式為函式傳參。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let func=({webName,url})=>{
  let str="";
  str=webName+"地址是"+url;
  return str;
}
console.log(func({webName:"螞蟻部落",url:"softwhy.com"}));

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

上述程式碼中，使用物件解構賦值方式為函式傳參。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let func=({webName="螞蟻部落",url}={})=>{
  return [webName,url];
}
console.log(func());
console.log(func({webName:"antzone"}));
console.log(func({webName:"螞蟻部落",url:"softwhy.com"}));

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

由此可見，函式引數的解構賦值也可以結合預設引數使用。

總結如下：

（1）.解構賦值本質是變數宣告和變數賦值。

（2）.函式引數本質是待宣告賦值的變數。

（3）.函式引數解構賦值本質就是解構賦值在函式引數中的應用。