Javascript Objekt Klammernotation ({Navigation} =) auf der linken Seite des assign

Question

Ich habe diese Syntax nicht zuvor gesehen und frage mich, worum es geht. Die Klammern auf der linken Seite werfen einen Syntaxfehler: „unerwartetes Token {“

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

Ich bin nicht sicher, welcher Teil der webpack Config verwandelt oder was der Zweck der Syntax ist. Ist es eine Harmonie-Sache? Kann mich jemand aufklären?

Answer 1

Es heißt destructuring assignment und es ist Teil der 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

Objekt Destrukturierung

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 Destrukturierung

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

Dies ist destructuring assignment. Es ist eine neue Funktion von ECMAScript 2015.

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

ist das Äquivalent zu:

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

Answer 3

Es ist eine neue Funktion in ES6 Objekte destrukturiert.

Wie wir alle wissen, findet hier eine Zuweisungsoperation statt, was bedeutet, dass der rechte Wert der linken Variablen zugewiesen wird.

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

In dieser Fall require('react-router') Methode gibt ein Objekt mit Schlüssel-Wert Paar soetwas wie

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

Und wenn wir einen Schlüssel in diesem zurückgegebenen Objekt sagen möchten Navigation zu einer Variablen können wir dafür verwenden.

Dies wird nur möglich sein, wenn wir den Schlüssel haben.

So, nach der Zuweisungsanweisung wird lokale Variable Navigation enthalten function a(){}

Ein weiteres Beispiel sieht wie folgt aus.

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'); 

... verwendet Destrukturierung die gleiche Sache wie ...

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

... zu erreichen, aber weit besser lesbar ist.