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;