Notazione parentesi object Javascript ({Navigazione} =) sul lato sinistro dell’assegnazione

Non ho ancora visto questa syntax e mi sto chiedendo di cosa si tratta.

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

Le parentesi a sinistra lanciano un errore di syntax:

gettone inaspettato {

Non sono sicuro di quale parte della configurazione del pacchetto Web stia trasformando o quale sia lo scopo della syntax. È una cosa di armonia? Qualcuno può illuminarmi?

Si chiama assegnazione destrutturante ed è parte dello standard ES2015 .

La syntax dell’assegnazione destrutturante è un’espressione JavaScript che consente di estrarre i dati da matrici o oggetti mediante una syntax che rispecchia la costruzione di letterali di array e object.

Fonte: riferimento all’assegnazione distruttiva su MDN

Oggetto destrutturante

  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 

Array destrutturante

 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; 

Questo è un incarico destrutturante . È una nuova funzionalità di ECMAScript 2015.

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

È l’equivalente di:

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

… usa la destrutturazione per ottenere la stessa cosa di …

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

… ma è molto più leggibile.

È una nuova funzionalità di ES6 per destrutturare gli oggetti.

Come tutti sappiamo che c’è un’operazione di assegnazione che si svolge qui, il che significa che il valore del lato destro viene assegnato alla variabile del lato sinistro.

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

In questo caso, il metodo require('react-router') restituisce un object con coppia di valori chiave qualcosa del genere

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

E se vorremmo prendere una chiave in quell’object restituito dire Navigation a una variabile, possiamo usare Oggetto che distrugge per quello.

Questo sarà ansible solo se avremo la chiave in mano.

Quindi, dopo l’istruzione di assegnazione, la variabile locale Navigation conterrà la function a(){}

Un altro esempio sembra questo.

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