Обозначение скобок объекта Javascript ({Navigation} =) слева от assign

108

Я раньше не видел этого синтаксиса, и мне интересно, о чем он вообще. 

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

Скобки слева выдают синтаксическую ошибку:

неожиданный маркер {

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

javascript webpack ecmascript-6 капитаниль
источник
В вашем у webpack.config.jsвас, вероятно, есть jsx-loaderс harmonyвключенным флагом
Паоло Моретти

Ответы:

112

Это называется деструктурирующим назначением и является частью стандарта 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;
Мэтт Болл
источник
4
Спасибо. Я приму это и задам другой вопрос. Теперь, когда я знаю, каков синтаксис, мне нужно выяснить, что он все еще не компилирует в моем проекте.
captainill
Webpack использует Esprima и будет поддерживать es6 после публикации Esprima 2.0 . А пока вы можете использовать один из загрузчиков es6, которые скомпилируют его до es5: github.com/conradz/esnext-loader github.com/Couto/6to5-loader github.com/shama/es6-loader
Йоханнес Эвальд,
2
Я проголосовал против этого решения, потому что в нем не учитывался приведенный им пример, который не показан в решении. В первом примере показано деструктурирование литерала объекта. Второй показывает деструктуризацию массива. Но ставится под сомнение следующий пример: var {Navigation} = require ('response-router'); Кроме того, в приведенном им примере скобки не нужны.
AndroidDev
2
@AndroidDev, вы можете предложить правку; ОП, похоже, нашел ответ удовлетворительным.
Мэтт Болл,
1
Есть идеи, почему [пере] именование "наоборот"? То есть var {newVarName: oldVarName} = varSource;очень похоже на { newVarName: varSource.oldVarName }или scope.newVarName = varSource.oldVarName;, но это, очевидно, неверно. Есть ли практическая причина для того, чтобы старые / существующие имена были слева от :?
ruffin
114

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

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

Эквивалентен:

var AppRegistry = React.AppRegistry;
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.View;
Рудольф Манусаки
источник
17 
var { Navigation } = require('react-router');

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

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

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

Клифф Холл
источник
3
Это дает прямой ответ на заданный вопрос, и поэтому, вероятно, это лучший ответ, который следует прочитать в первую очередь, в то время как некоторые из предыдущих ответов более подробны.
Мэллори-Эрик,
3
Короче ... да. Более читабельно - не очень. Последний пример более явный, с использованием более фундаментальных конструкций, поэтому он более читабелен, но для эксперта первый более эффективен.
Брайан
5

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

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

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

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

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

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

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

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

Другой пример выглядит так.

var { p, q } = { p: 1, q:2, r:3, s:4 };
console.log(p) //1;
console.log(q) //2;
Раджендра Кумар Ванкадари
источник