深入浅出讲解ES6的解构

标签:帮助中心    日期:2018-05-11 10:05    录入:汇盛国际平台    浏览:

  

[es6,解构,es6,解构赋值,es6]深入浅出讲解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;
  
  

从深层嵌套的数组中提取一个值  

  
  
  // 从该数组中提取 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;
 
★★★小编:汇盛国际注册 整理文章,欢迎大家转载 ★★★