Notation in eckigen Klammern für JavaScript-Objekte: Verwendung der Zuweisung auf der linken Seite ({ Navigation } =)

Question

Ich habe diese Syntax noch nie gesehen und würde gerne wissen, was sie bedeutet.

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

Die geschweifte Klammer links von

führt zu einem Syntaxfehler:

unerwartetes Token {

Ich bin nicht sicher, welcher Teil der Webpack-Konfiguration die Konvertierung durchführt oder welchen Zweck diese Syntax hat. Ist das eine Harmony-Sache? Kann mir das jemand erklären?

Answer 1

这是解构赋值。它是ECMAScript 2015的一个新特性。

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

等同于：

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

Answer 2

它被称为解构赋值，是ES2015标准的一部分。

对象解构

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

数组解构

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

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

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