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

Question

Nie widziałem tej składni przed i zastanawiam się, o co w tym wszystkim chodzi. Wsporniki na lewo rzucają błąd składni: „Nieoczekiwany token {”

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

Nie jestem pewien, jaka część config WebPACK przekształca lub jaki jest cel składni jest. Czy to jest rzecz Harmonii? Czy ktoś może mnie oświecić?

Answer 1

Nazywa się destructuring assignment i jest częścią ES2015 standard.

The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.

Source:Destructuring assignment reference on MDN

Przedmiot demontażu struktury

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 

Tablica demontażu struktury

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 2

to destructuring assignment. Jest to nowa funkcja ECMAScript 2015

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

jest równoważny:

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

Answer 3

Jest to nowa funkcja w ES6 do destructure obiektów.

Jak wszyscy wiemy, istnieje tu operacja przypisania, co oznacza, że ​​prawostronna wartość jest przypisywana do zmiennej lewej strony.

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

W tej metodzie przypadek require('react-router') zwraca obiekt z pary kluczy warto niektóre rzeczy jak

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

A jeśli chcielibyśmy wziąć jeden klucz do tego zwróconego obiektu, powiedzmy Navigation do zmiennej, możemy użyć do tego celu Object destructing.

Będzie to możliwe tylko, jeśli mamy klucz do wykonania.

Więc po instrukcji przypisania, zmienna lokalna Navigation będzie zawierać function a(){}

Innym przykładem wygląda tak.

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

Answer 4

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

... używa destructuring osiągnąć to samo co ...

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

... ale jest o wiele bardziej czytelny.