Обозначение привязки объекта Javascript ({Navigation} =) с левой стороны назначать

Question

Я еще не видел этот синтаксис и задаюсь вопросом, что это такое. Кронштейны на левой стороне бросают синтаксическую ошибку: «неожиданный маркер {»

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

я не уверен, что часть WebPack конфигурации трансформирует или что цель синтаксиса. Это вещь Гармонии? Может кто-нибудь просветить меня?

Answer 1

Это называется destructuring assignment, и это часть 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

Объект уничтожение того

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 

Массив уничтожения того

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

Это destructuring assignment. Это новая функция 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 3

Это новая функция в ES6 для destructure объектов.

Как все мы знаем, что здесь выполняется операция назначения, что означает, что значение правой стороны присваивается левой стороне переменной.

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

В этом методе случае require('react-router') возвращает объект с парой ключей значение некоторые вещи, как

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

И если мы хотим взять один ключ в этом возвращенном объекте, скажем Navigation переменной, мы можем использовать для этого Object destructing.

Это возможно только в том случае, если у нас есть ключ.

Таким образом, после того, как оператор присваивания, локальная переменная Navigation будет содержать function a(){}

Другой пример выглядит следующим образом.

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

... использует деструктурирующий для достижения тех же вещей, как ...

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

... но гораздо более удобными для чтения.