我以前从未见过这种语法，我想知道它是怎么回事。
var { Navigation } = require('react-router');
左边的括号抛出一个语法错误：
意外的标记 {
我不确定 webpack 配置的哪一部分正在转换或语法的目的是什么。这是和谐的事情吗？有人可以启发我吗？
赋值左侧的 Javascript 对象括号符号 ({ Navigation } =)
IT技术
javascript
webpack
ecmascript-6
2021-01-26 23:30:11
4个回答
解构赋值语法是一种 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;
这是解构赋值。这是 ECMAScript 2015 的一个新特性。
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
相当于：
var AppRegistry = React.AppRegistry;
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.View;
var { Navigation } = require('react-router');
... 使用解构来实现与 ...
var Navigation = require('react-router').Navigation;
...但更具可读性。
解构对象是 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;
其它你可能感兴趣的问题