web-dev-qa-db-fra.com

Notation du support d'objet Javascript ({Navigation} =) sur le côté gauche de l'attribution

Je n'ai jamais vu cette syntaxe auparavant et je me demande de quoi il s'agit.

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

Les crochets à gauche génèrent une erreur de syntaxe:

jeton inattendu {

Je ne sais pas quelle partie de la configuration du webpack est en train de transformer ou quel est le but de la syntaxe. Est-ce une chose Harmony? Quelqu'un peut-il m'éclairer?

javascriptwebpackecmascript-6
93
captainill

Cela s'appelle affectation de déstructuration et cela fait partie de la norme ES2015 .

La syntaxe d'affectation destructurante est une expression JavaScript qui permet d'extraire des données de tableaux ou d'objets à l'aide d'une syntaxe qui reflète la construction des tableaux et des littéraux d'objet.

Source: Référence d'affectation de la destruction sur MDN

Déstructuration d'objets

 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

Déstructuration des baies

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

C'est affectation de déstructuration . C'est une nouvelle fonctionnalité d'ECMAScript 2015.

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

Est l'équivalent de:

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

... utilise la déstructuration pour obtenir la même chose que ...

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

... mais est beaucoup plus lisible.

11
Cliff Hall

C'est une nouvelle fonctionnalité dans ES6 pour détruire des objets.

Comme nous savons tous qu'une opération d'affectation a lieu ici, ce qui signifie que la valeur du côté droit est affectée à la variable du côté gauche.

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

Dans ce cas, la méthode require('react-router') renvoie un objet avec une paire valeur/clé quelque chose comme

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

Et si nous voulons prendre une clé dans cet objet retourné, disons Navigation à une variable que nous pouvons utiliser Destruction d'objet pour cela.

Cela ne sera possible que si nous avons la clé en main.

Ainsi, après l'instruction d'affectation, la variable locale Navigation contiendra function a(){}

Un autre exemple ressemble à ceci.

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