Notación de corchete de objeto Javascript ({Navegación} =) en el lado izquierdo de asignar
No había visto esta sintaxis antes y me pregunto de qué se trata.
var { Navigation } = require('react-router');
Los corchetes de la izquierda arrojan 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 puede iluminarme?
Se llama asignación de desestructuración y forma parte del estándar ES2015 .
La sintaxis de asignación de estructuración es una expresión de JavaScript que permite extraer datos de matrices u objetos utilizando una sintaxis que refleja la construcción de matrices y objetos literales.
Fuente: Referencia de asignación de desestructuració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;
Esta es una tarea desestructurante . 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;
var { Navigation } = require('react-router');
... utiliza la desestructuración para lograr lo mismo que ...
var Navigation = require('react-router').Navigation;
... pero es mucho más legible.
Es una nueva característica en ES6 para desestructurar objetos.
Como todos sabemos, aquí se está llevando a cabo una operación de asignación, 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, require('react-router')el método devuelve un objeto con un par clave-valor, algo como:
{ Navigation: function a(){},
Example1: function b(){},
Example2: function c(){}
}
Y si quisiéramos tomar una clave en ese objeto devuelto, digamos Navigationa una variable, podemos usar la desestructuración de objetos para eso.
Esto sólo será posible únicamente si tenemos la llave en la mano.
Entonces, después de la declaración de asignación, la variable local Navigationcontendráfunction a(){}
Otro ejemplo se parece a este.
var { p, q } = { p: 1, q:2, r:3, s:4 };
console.log(p) //1;
console.log(q) //2;
en lugar de
const salary = personnel.salary
const sex = personnel.sex
const age = personnel.age
simplemente
const {salary, age, sex} = personnel
