javascript - assign の左側に Javascript オブジェクト ブラケット表記 ({ Navigation } =)

Question

私はこれまでこの構文を見たことがなく、それが何であるか疑問に思っています。

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

左側の括弧は構文エラーをスローしています:

予期しないトークン {

webpack構成のどの部分が変換されているのか、または構文の目的が何なのかわかりません。ハーモニーの事ですか？誰かが私を啓発できますか？

Answer 1

これは構造化代入と呼ばれ、 ES2015 標準の一部です。

構造化代入構文は、配列リテラルとオブジェクト リテラルの構築を反映した構文を使用して、配列またはオブジェクトからデータを抽出できるようにする JavaScript 式です。

出典: MDN の Destructuring 代入リファレンス

オブジェクトの分解

 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;

Answer 2

これは破壊代入です。ECMAScript 2015 の新機能です。

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

以下と同等です:

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