objetos - propiedades javascript

Notación de corchete de objetos Javascript({Navigation}=) en el lado izquierdo de asignar

Question

No he visto esta sintaxis antes y me pregunto de qué se trata.

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

Los corchetes de la izquierda están lanzando un error de sintaxis:

símbolo inesperado {

No estoy seguro de qué parte de la configuración del paquete web se está transformando o cuál es el propósito de la sintaxis. ¿Es una cuestión de armonía? ¿Alguien me puede iluminar?

Answer 1

Es una nueva característica en ES6 para destruir objetos.

Como todos sabemos que hay una operación de asignación que tiene lugar aquí, lo que significa que el valor del lado derecho se asigna a la variable del lado izquierdo.

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

En este caso, el método require(''react-router'') devuelve un objeto con un par de valores clave algo como

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

Y si nos gustaría tomar una clave en ese objeto devuelto, diga Navigation a una variable, podemos usar la destrucción de Objeto para eso.

Esto solo será posible solo si tenemos la clave disponible.

Entonces, después de la instrucción de asignación, la variable local de Navigation contendrá la function a(){}

Otro ejemplo se ve así.

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

Answer 2

Esta es una tarea de desestructuración . Es una nueva característica de ECMAScript 2015.

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

Es el equivalente a:

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

Answer 3

Se llama asignación de desestructuración y es parte del estándar ES2015 .

La sintaxis de asignación de desestructuración es una expresión de JavaScript que permite extraer datos de matrices u objetos utilizando una sintaxis que refleja la construcción de literales de matriz y objeto.

Fuente: Destructura de referencia de asignación en MDN.

Desestructuración de objetos

 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

Desestructuración de matrices

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 4

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

... usa la desestructuración para lograr lo mismo que ...

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

... pero es mucho más legible.