深入浅出讲解ES6的解构

什么是解构？

解构与构造数据截然相反。 例如，它不是构造一个新的对象或数组，而是逐个拆分现有的对象或数组，来提取你所需要的数据。

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;