Notacja nawiasu obiektu JavaScript ({Nawigacja} =) po lewej stronie przypisania

108

Nie widziałem wcześniej tej składni i zastanawiam się, o co w tym wszystkim chodzi. 

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

Nawiasy po lewej stronie generują błąd składniowy:

nieoczekiwany znak {

Nie jestem pewien, która część konfiguracji pakietu internetowego jest przekształcana ani jaki jest cel składni. Czy to kwestia Harmonii? Czy ktoś może mnie oświecić?

javascript webpack ecmascript-6 kapitan
źródło
W twojej webpack.config.jsprawdopodobnie masz jsx-loaderz harmonyflagą włączona
Paolo Moretti

Odpowiedzi:

112

Nazywa się to przydziałem destrukcji i jest częścią standardu ES2015 .

Składnia przypisania destrukturyzacji jest wyrażeniem JavaScript, które umożliwia wyodrębnianie danych z tablic lub obiektów przy użyciu składni, która odzwierciedla konstrukcję tablic i literałów obiektowych.

Źródło: odniesienie do przypisania destrukturyzacji w MDN

Destrukcja obiektów

 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

Destrukturyzacja macierzy

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;
Matt Ball
źródło
4
Dzięki. Przyjmuję to i zadam kolejne pytanie. Teraz, gdy wiem, jaka jest składnia, muszę dowiedzieć się, czego nadal nie kompiluje w moim projekcie.
kapitan
Webpack korzysta z Esprimy i będzie obsługiwał es6 po opublikowaniu Esprima 2.0 . Do tego czasu możesz użyć jednego z programów ładujących es6, które skompilują go do es5: github.com/conradz/esnext-loader github.com/Couto/6to5-loader github.com/shama/es6-loader
Johannes Ewald
2
Głosowałem negatywnie na to rozwiązanie, ponieważ nie odnosiło się ono do podanego przez niego przykładu, który nie został przedstawiony w rozwiązaniu. Pierwszy przykład pokazuje niszczenie literału obiektu. Drugi przedstawia niszczoną tablicę. Ale kwestionowany przykład jest następujący: var {Navigation} = require ('respond-router'); Ponadto w podanym przez niego przykładzie szelki są zbędne.
AndroidDev,
2
@AndroidDev możesz zasugerować zmianę; PO z pewnością wydawało się, że odpowiedź była zadowalająca.
Matt Ball
1
Masz jakiś pomysł, dlaczego nazewnictwo jest „wsteczne”? To znaczy var {newVarName: oldVarName} = varSource;wygląda bardzo podobnie do { newVarName: varSource.oldVarName }lub scope.newVarName = varSource.oldVarName;, ale te są oczywiście błędne. Czy istnieje praktyczny powód, dla którego stare / istniejące nazwy znajdują się po lewej stronie :?
ruffin
114

To jest destrukcyjne zadanie . To nowa funkcja ECMAScript 2015.

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

Jest odpowiednikiem:

var AppRegistry = React.AppRegistry;
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.View;
Rudolf Manusachi
źródło
17 
var { Navigation } = require('react-router');

... wykorzystuje destrukturyzację, aby osiągnąć to samo, co ...

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

... ale jest znacznie bardziej czytelny.

Cliff Hall
źródło
3
To bezpośrednio odpowiada na zadane pytanie i prawdopodobnie jest najlepszą odpowiedzią do przeczytania w pierwszej kolejności, podczas gdy niektóre z wcześniejszych odpowiedzi są bardziej szczegółowe.
Mallory-Erik
3
Bardziej zwięzłe ... tak. Bardziej czytelne - nie do końca. Ten ostatni przykład jest bardziej wyraźny i wykorzystuje bardziej fundamentalne konstrukcje, przez co jest bardziej czytelny - ale dla eksperta ten pierwszy jest bardziej wydajny.
Brian,
5

To nowa funkcja w ES6 do niszczenia obiektów.

Jak wszyscy wiemy, odbywa się tutaj operacja przypisania, co oznacza, że ​​wartość po prawej stronie jest przypisywana zmiennej po lewej stronie.

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

W tym przypadku require('react-router')metoda zwraca obiekt z parą klucz-wartość

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

A jeśli chcielibyśmy wziąć jeden klucz w tym zwróconym obiekcie, powiedz Navigationdo zmiennej, możemy użyć do tego niszczenia obiektów .

Będzie to możliwe tylko wtedy, gdy będziemy mieć klucz w środku.

Tak więc po instrukcji przypisania zmienna lokalna Navigationbędzie zawieraćfunction a(){}

Inny przykład wygląda tak.

var { p, q } = { p: 1, q:2, r:3, s:4 };
console.log(p) //1;
console.log(q) //2;
Rajendra kumar Vankadari
źródło