es6新增了一種從數組或者對象中獲取指定元素的方式，這種方式就是我們今天要說的解構。

在有解構之前呢，我們獲取數組中的指定元素通常是根據索引去做的：

const arr = [1, 2, 3]; const a = arr[1];

有了解構之后呢，我們便可以使用如下方式快速的去獲取數組中的某個元素：

const arr = [1, 2, 3];const [a, b, c] = arr;console.log(a);console.log(b);console.log(c);

這樣打印出a, b, c的值分別是：

1

2

3

如果我們只想獲取前兩個元素呢，那么我們可以這樣寫：

const arr = [1, 2, 3];const [a, b] = arr;console.log(a);console.log(b);

我們也可以結合擴展運算符獲取數組中指定的多個元素，比如：

const arr = [1, 2, 3];const [a, ...brr] = arr;console.log(a);console.log(brr);

這樣brr就是除了1以外的其他元素組成的數組，打印出a, brr的值分別是：

1

[2, 3]

那如果我們只想獲取數組中的某一個元素呢？比如我只想獲取數組中的2，又該如何去寫呢？

const arr = [1, 2, 3];const [, a] = arr;console.log(a);

以上我們通過一個逗號占位確保我們解構和數組本身的位置是一致的來獲取到特定位置的某個元素。可以看到，解構的出現方便了我們去獲取數組指定位置的一個或多個元素。這也是他在代碼中的一個重要的應用。

說完數組的解構，我們再來聊聊

與數組解構不同的是，對象的解構是根據屬性名去匹配的，因為對象不像數組下標那樣有順序，因此它不能用下標去提取。就比如我們定義一個對象obj，我們想獲取他的name屬性值就可以這樣寫：

const obj = { name: ’wudixiaodoujie’, age : 18};const { name } = obj;console.log(name);wudixiaodoujieconst age = 0;const { age: perAge } = obj;console.log(perAge);18

對象的解構應用還是比較廣的，比如我們需要頻繁的調用對象的某個屬性或方法就可以通過解構將其賦值給一個變量，通過一個變量去調用可以在一定程度上減少代碼量。

以上就是JS ES6中的解構的詳細內容，更多關于JS ES6中的解構的資料請關注好吧啦網其它相關文章！