前言

原文標題：5 Interesting Uses of JavaScript Destructuring

原文鏈接：dmitripavlutin.com/5-interesti…

定期回顧我寫的JS代碼，我發現解構運算無處不在。

獲取對象的屬性和訪問數組內容是都是很常用的操作。而解構運算使得這些操作變得非常簡單明了。

在這篇文章中，我將會講解JS解構不同于常見用法的五種使用技巧。

1. 交換變量

常見的交互兩個變量值的方法都需要借助一個額外的變量，看一個簡單的例子：

let a = 1;let b = 2;let temp;temp = a;a = b;b = temp;a; // => 2b; // => 1

temp是一個臨時變量，在例子中存儲了變量a的值，b的值賦給了a，最后把temp的值賦給了b。
解構運算使得交換變量的值變得非常簡單，不需要借助第三個臨時變量：

let a = 1;let b = 2;[a, b] = [b, a];a; // => 2b; // => 1

[a, b] = [b, a]是一個解構運算。在等號的右側，創建了一個數組[b, a]，對應的值為[2, 1]。數組的第一個值2被解構賦值給了a，第二項1被解構賦值給了b。

即使這種方式仍然創建了一個臨時數組，但是解構賦值對于交換變量的值仍然是非常高效簡單的方式。

這種方式并沒有什么限制。你還可以同時交互更多的變量值，比如：

let zero = 2;let one = 1;let two = 0;[zero, one, two] = [two, one, zero];zero; //=> 0one; //=> 1two; //=> 2

你可以交換任意數量的變量值，只是兩個變量值的交換的情況更加常見。

2. 訪問數組

有一個數組，這個數組有可能是空的。有一種需求是訪問任意位置數組元素，如果這個位置為空，則返回一個默認值。
通常情況下有的人可能會使用數組的length屬性做判斷：

const colors = [];let firstColor = "white";if (colors.length > 0) {  firstColor = colors[0];}firstColor;  //=> "white"

幸運的是，數組解構可以更快捷高效的實現相同的效果：

const colors = [];const [firstColor = "white"] = colors;firstColor;  //=> "white"

const [firstColor = "white"] = colors;將colors數組的第一個元素賦值給了變量firstColor。如果這個數組的下標為0的位置上沒有任何元素（注：為undefined時即認為為空），white將作為默認值賦值給firstColor。
數組解構是非常靈活的，如果你只想訪問數組的第二個元素，方法如下所示：

const colors = [];const [, secondColor = "black"] = colors;secondColor;  //=> "black"

在解構表達式的左邊寫一個逗號：意味著數組的第一個元素被忽略掉。colors數組下標為1的元素被解構賦值給了變量secondColor。