前言

我們經常定義許多對象和數組，然后有組織地從中提取相關的信息片段。在ES6中添加了可以簡化這種任務的新特性：解構。解構是一種打破數據結構，將其拆分為更小部分的過程。本文將詳細介紹ES6解構賦值，下面話不多說了，來一起看看詳細的介紹吧

數組的解構賦值

基本用法

ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為結構。

在ES6之前想要為變量賦值，只能指定其值，如下：

let a = 1;let b = 2

而在ES6中可以寫成這樣，如下：

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

值得注意的是，等式兩邊的值要對等，這樣左邊的變量才會被賦上右邊對應的值，如果不對等左邊的值將會出現undefined，如下寫法：

let [foo,[[bar],baz]] = [1,[[2],3]]foo // 1bar // 2baz // 3

注意：只有左右兩邊的 格式一定要對等，數量可以不對等。

let [a,b,c] = [1,2]a = 1, b = 2, c = undefinedlet [a,,c] = [1,2,3]a = 1, c = 3let [a, ...b] = [1,2,3]a = 1, b = [2,3]let [a] = []let [b,a] = [1]a = undefined

還有一種情況，等號左邊為數組，但是等號右邊為其他值，將會報錯。如下：

let [a] = 1;let [a] = false;let [a] = NaN;let [a] = undefined;let [a] = null;let [a] = {};以上都會報錯

但是如果左邊為數組，右邊為字符串，將會取字符串的第一個下標的值

let [a] = '121321' a = '1'let [a] = 'adgasg' a = 'a'

對于Set結構，同樣可以使用數組的解構賦值。

let [x,y,z] = new Set([1,2,3])x = 1, y = 2, z = 3

默認值

解構賦值允許指定默認值

let [a = 3] = [] // a:3let [a = 3,b] = [,4] // a:3 b:4let [a = 3,b] = [5,4] // a:5 b:4

特殊

let [a = 3] = [undefined] // a:3let [a = 3] = [null] // a:null

Tips: 在es6中使用嚴格相等運算符，在結構賦值中如果需要默認值生效，則應對等的值為undefined的時候才會采用默認值，否則還是使用賦值。上面中null 不嚴格等于undefined++

如果默認值的賦值為一個表達式，只有當等號右邊的賦值沒有值為undefined的時候，才會取表達式中的值，如下：

function demo(){ console.log('demo')}let [a = demo()] = [] // a: demolet [a = demo()] = [1] // a : 1

對象的解構賦值

與數組的不同點是，數組的元素必須和賦值的元素要位置一致才能正確的賦值，而對象的解構賦值則是等號兩邊的變量和屬性同名即可取到正確的值。否則值為 undefined