JavaScript对象的方括号表示法：在左侧使用赋值（{ Navigation } =）

Question

我以前没有见过这种语法，想知道它是什么意思。

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

左边的花括号会引发语法错误：

unexpected token {

我不确定webpack配置的哪个部分进行了转换，也不知道这种语法的目的是什么。这是一种Harmony的东西吗？有人能给我解释一下吗？

Answer 1

这是解构赋值。它是ECMAScript 2015的一个新特性。

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

等同于：

var AppRegistry = React.AppRegistry;
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.View;

Answer 2

它被称为解构赋值，是ES2015标准的一部分。

对象解构

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

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

 // 分配新的变量名
 var {p: foo, q: bar} = o;

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

数组解构

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

// 不使用解构
var one   = foo[0];
var two   = foo[1];
var three = foo[2];

// 使用解构
var [one, two, three] = foo;