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

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

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

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

Ответ 1

Он назвал назначение деструктурирования и частью стандарта ES2015.

Синтаксис назначения деструктуризации - это выражение JavaScript, которое позволяет извлекать данные из массивов или объектов с помощью синтаксис, который отражает конструкцию массивных и объектных литералов.

Источник: Ссылка на назначение назначения для 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;

Ответ 2

Это назначение деструкции. Это новая функция ECMAScript 2015.

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

Является эквивалентом:

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

Ответ 3

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

... использует деструктуризацию для достижения того же...

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

... но гораздо читабельнее.

Ответ 4

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

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

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;