赋值左侧的JavaScript对象括号表示法({导航}=)

Question

赋值左侧的JavaScript对象括号表示法({导航}=)我以前没见过这种语法，我想知道它是怎么回事。var { Navigation } = require('react-router');左边的括号正在抛出一个语法错误：意外令牌{我不确定WebPack配置的哪个部分正在转换，或者语法的目的是什么。是和谐吗？有人能启发我吗？

Answer 1

它叫破坏分配这也是ES 2015标准.

析构赋值语法是一个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 destructuringvar one   = foo[0];var two   = foo[1];var three = foo[2];
// with destructuringvar [one, two, three] = foo;

Answer 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;

Answer 3

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

..用毁灭来达到和.

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

..但它的可读性要高得多。

Answer 4

这是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;