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

Question

我以前从未见过这种语法，我想知道它到底是怎么回事。

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

左边的括号抛出语法错误:

unexpected token {

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

Answer 1

它叫做 destructuring assignment它是 ES2015 standard 的一部分.

The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.

Source: Destructuring assignment reference on MDN

对象解构

 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;