web-dev-qa-db-ja.com

assignの左側のJavascriptオブジェクトブラケット表記（{Navigation} =）

私は以前にこの構文を見たことがなく、それがすべてなのか疑問に思っています。

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

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

予期しないトークン{

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

javascriptwebpackecmascript-6
93
captainill

destructuring assignment と呼ばれ、 ES2015標準 の一部です。

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

出典：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;
100
Matt Ball

これは、 分解割り当て です。これは、ECMAScript 2015の新機能です。

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

以下と同等です：

var AppRegistry = React.AppRegistry;
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.View;
106
Rudolf Manusachi
var { Navigation } = require('react-router');

...デストラクチュアリングを使用して、同じことを達成します...

var Navigation = require('react-router').Navigation;

...しかし、はるかに読みやすいです。

11
Cliff Hall

これは、オブジェクトを分解するES6の新機能です。

ここで割り当て操作が行われていることは誰もが知っているとおりです。つまり、右側の値が左側の変数に割り当てられています。

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

この場合、require('react-router')メソッドは、キーと値のペアを持つオブジェクトを返します。

{ Navigation: function a(){}, Example1: function b(){}, Example2: function c(){} }。

そして、返されたオブジェクトの1つのキーを変数に渡す場合は、Navigationを使用して、そのために Object destructing を使用できます。

これは、キーが手元にある場合にのみ可能です。

したがって、割り当てステートメントの後、ローカル変数Navigationにはfunction a(){}が含まれます。

別の例は次のようになります。

_var { p, q } = { p: 1, q:2, r:3, s:4 };
console.log(p) //1;
console.log(q) //2;
_
3
Rajendra kumar Vankadari