Notation entre crochets pour les objets JavaScript : utilisation de l'affectation à gauche ({ Navigation } =)

Question

Je n'ai jamais vu cette syntaxe auparavant et j'aimerais savoir ce qu'elle signifie.

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

L'accolade à gauche de

provoquera une erreur de syntaxe :

jeton inattendu {

Je ne sais pas quelle partie de la configuration du webpack effectue la conversion, ni quel est le but de cette syntaxe. Est-ce une histoire d'Harmony ? Quelqu'un peut m'expliquer cela?

Answer 1

C'est une mission de déstructuration. Il s'agit d'une nouvelle fonctionnalité d'ECMAScript 2015.

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

équivaut à :

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

Answer 2

Cela s’appelle Destructuring Mission et fait partie de la Standard ES2015.

Déstructuration d'objets

var o = {p: 42, q: true};
 var {p, q} = o;

 console.log(p); // 42
 console.log(q); // true 

 // 分配新的变量名
 var {p: foo, q: bar} = o;

 console.log(foo); // 42
 console.log(bar); // true

Déstructuration de tableaux

var foo = ["one", "two", "three"];

// 不使用解构
var one   = foo[0];
var two   = foo[1];
var three = foo[2];

// 使用解构
var [one, two, three] = foo;