解构与构造数据截然相反。 例如，它不是构造一个新的对象或数组，而是逐个拆分现有的对象或数组，来提取你所需要的数据。
ES6使用了一种新模式来匹配你想要提取的数值, 解构赋值就是采用了这种模式。 该模式会映射出你正在解构的数据结构，只有那些与该模式相匹配的数据，才会被提取出来。
被解构的数据项位于赋值运算符 = 的右侧，可以是任何数组和对象的组合，允许随意嵌套。用于给这些数据赋值的变量个数不限。
数组解构
数组解构 使用一个数组作为一个数据项，你可以根据 数组模式 （用于从数组中匹配你所需要的数值）从这个数组里面提取数值给一个或者多个变量赋值。
数组模式 是根据数值的位置来鉴别哪些值是你想要提取的。它必须能精确地映射数组的结构，来要让数组模式中的每个变量都被赋上 被解构数组中 位置与之相对应的值。
举几个例子来帮助我们理解吧：
数组模式示例
把数组中所有的数值赋给一个个单独的变量
// 设置数组 const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // 把数组解构赋值给变量。数组模式位于赋值运算符 `=` 的左侧，被结构的数组在 // 其右侧。 const [ironMan, cap, blackWidow] = avengers; // ironMan = 'Tony Stark' // cap = 'Steve Rogers' // blackWidow = 'Natasha Romanoff' // 输出 ironMan: ironMan;
提取除第一个外的所有数值
const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // 我们不用用到Tony const [, cap, blackWidow] = avengers; // ironMan = Error: undefined // cap = 'Steve Rogers' // blackWidow = 'Natasha Romanoff' // 输出 cap: cap;
提取除第二个外的所有数值
const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // cap 缺失 const [ironMan, , blackWidow] = avengers; // ironMan = 'Tony Stark' // cap = Error: undefined // blackWidow = 'Natasha Romanoff' // 输出 blackWidow: blackWidow;
提取除最后一个外的所有数值
const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // ironMan vs cap const [ironMan, cap] = avengers; // ironMan = 'Tony Stark' // cap = 'Steve Rogers' // blackWidow = Error: undefined // 输出 blackWidow: ironMan;
嵌套数组
这种匹配模式也支持嵌套数组，只要保证赋值运算符 = 左侧的数组模式与右侧的数组结构相匹配即可。再次说明一下，= 左边的变量都会被赋上 = 右侧数组中位置与之相对应的值。 无论你怎么深层次地嵌套，仍可以对它们进行解构。
解构嵌套的数组
// Destructuring Nested Arrays const avengers = [ 'Natasha Romanoff', ['Tony Stark', 'James Rhodes'], ['Steve Rogers', 'Sam Wilson'] ]; // Avengers and their partners const [blackWidow, [ironMan, warMachine], [cap, falcon]] = avengers; // blackWidow = 'Natasha Romanoff' // ironMan = 'Tony Stark' // warMachine = 'James Rhodes' // cap = 'Steve Rogers' // falcon = 'Sam Wilson' // Output warMachine: warMachine;
从深层嵌套的数组中提取一个值
// 从该数组中提取 Pepper Potts const avengers = [ 'Natasha Romanoff', [['Tony Stark', 'Pepper Potts'], 'James Rhodes'], ['Steve Rogers', 'Sam Wilson'] ]; // Destructure const [ , // 跳过 'Natasha Romanoff' [[ , // 跳过 'Tony Stark' hera // Pepper Potts 赋值给变量 'hera' ]]] = avengers; // 请注意：你也可以这样写 // const [, [[, hera ]]] = avengers; // 输出 hera: hera; // hera = 'Pepper Potts'
运用rest操作符捕获所有剩余项
如果你想要获取特定的数组项，并且把剩余的项归在一个数组，那么你可以这样运用 rest操作符 来解构：
// 通过rest操作符解构 const avengers = ['Natasha Romanoff', 'Tony Stark', 'Steve Rogers']; const [blackWidow, ...theOthers] = avengers; theOthers; // blackWidow = 'Natasha Romanoff' // theOthers = ['Tony Stark', 'Steve Rogers'] // 输出 theOthers: theOthers;
对象解构
对象解构就更神奇了，尤其是当你需要从一个复杂的、深层嵌套的对象中取值时，其作用更加明显。重申一下，对象解构与数组解构用的是同样的规则（即在赋值运算符左侧创建一个 对象模式， 使它的变量位置与 = 右侧对象的值位置相匹配）。
在对象解构中，你需要指明那些需要被提取值的属性名称，以及将要被赋值的变量名。跟数组解构一样，我们需要在赋值运算符左边先创建一个对象模式来映射被解构的对象。