分配左侧的Javascript对象括号表示法（{Navigation} =）

Question

我以前没有看过这种语法，并且想知道它的全部含义。

var { Navigation } = require('react-router');

左侧的括号引发语法错误：

意外的标记 {

我不确定webpack配置的哪个部分正在转换或语法的目的是什么。这是和谐的事情吗？有人可以启发我吗？

Answer 1

这称为解构分配，它是ES2015标准的一部分。

析构分配语法是一个JavaScript表达式，它可以使用与数组和对象文字的构造类似的语法从数组或对象中提取数据。

对象解构

 var o = {p: 42, q: true};
 var {p, q} = o;

 console.log(p); // 42
 console.log(q); // true

 // Assign new variable names
 var {p: foo, q: bar} = o;

 console.log(foo); // 42
 console.log(bar); // true

阵列解构

var foo = ["one", "two", "three"];

// without destructuring
var one   = foo[0];
var two   = foo[1];
var three = foo[2];

// with destructuring
var [one, two, three] = foo;