JavaScript 解構賦值小括號的應用

不少文章將小括號稱作為強制運算子，這是錯誤的。

在JavaScript中並沒有強制運算子這個概念，小括號是分組運算子。

小括號的用法可以參閱JavaScript 小括號()分組運算子一章節。

解構賦值是ES2015新增的功能，可以參閱如下幾篇文章：

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

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

（3）.字串解構賦值參閱JavaScript字串解構賦值一章節。

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

在結構賦值中經常有分組運算子的應用，下面介紹一下容易出現失誤的應用場景。

一.不能使用小括號的情況：

（1）.宣告中的變數不能用小括號包裹：

[JavaScript] 純文字檢視 複製程式碼
let [(webName)] = ["螞蟻部落"];

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

報錯原因分析如下：

小括號是運算子，它與運算元webName構成一個表示式。

表示式會返回對運算元運算後的值，然而此時變數webName並未被宣告。

又由於變數在宣告之前不能對其取值，所以最終報錯。

再來看如下幾個常見的錯誤使用：

[JavaScript] 純文字檢視 複製程式碼
let {url: (webUrl)} = {url:"softwhy.com"};
function func([(age)]) { return age; };

上述兩行程式碼都會報錯，原因和前面的程式碼是一致的，不再累贅。

（2）.模式整體不能使用小括號：

首先看一段程式碼例項：

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

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

上面實現了陣列解構賦值操作。

左側部分 [webName,url,address]我們可以稱之為模式，它規定了解構賦值採用何種模式。

此模式不能使用小括號包裹，程式碼如下:

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

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

報錯原因分析如下：

因為左側是模式，不是一個表示式或者值等，而運算子會對運算元運算求值，並返回這個值。

怎麼可能使用運算子對一個模式求值呢。

（3）.模式不能使用小括號：

[JavaScript] 純文字檢視 複製程式碼
let {(url):url} = {url:"http://www.softwhy.com"};

上面的程式碼報錯，因為url不是一個普通變數，而是模式，無法使用操作符對其運算求值。

二.可以應用小括號的情形:

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let url;
[(url)] = ["http://www.softwhy.com"];
console.log(url);

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

上面之所以可以用小括號，因為變數url已經宣告，只不過在外部宣告而已。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let url;
({ url:url } = {url:"http://www.softwhy.com"});
console.log(url);

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

上面是在整個解構賦值外面包裹小括號，否則會報錯。

因為大括號會優先被解讀為語句，而不是解構賦值的語法結構。

三.最後總結：

上面講了這麼多，好像繁雜的樣子，其實關鍵在於對運算子的理解，什麼樣的內容可以作為運算元，比如變數、直接量等可以作為運算元，但是不能將解構賦值的模式作為運算元，也不能對未宣告的變數使用運算子，因為不能對未宣告變數取值。