赋值左侧的Javascript对象括号符号（{Navigation}=）

我以前没有见过这种语法，我想知道它是关于什么的

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

左边的括号抛出语法错误：

意外标记{

我不确定网页配置的哪一部分正在转换，或者语法的用途是什么。这是一个和谐的东西吗？有人能告诉我吗？

它被称为，并且是语法的一部分

destructuring assignment语法是一个JavaScript表达式 可以使用 反映数组和对象文字结构的语法

资料来源：

对象分解 数组分解 这是。这是ECMAScript 2015的新功能

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

相当于：

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

---

ES6中的一个新功能是分解对象

我们都知道这里有一个赋值操作，这意味着右边的值被赋值给左边的变量

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

在本例中，

require（'react-router'）

方法返回一个具有键值对的对象，例如

{导航：函数a（）{}，
示例1：函数b（）{}，
示例2：函数c（）{}
}

如果我们想在返回的对象中取一个键，比如说

Navigation

到一个变量，我们可以使用它

这只有在我们手上有钥匙的情况下才有可能

因此，在赋值语句之后，局部变量

Navigation

将包含

函数a（）{}

另一个例子是这样的

var { p, q } = { p: 1, q:2, r:3, s:4 };
console.log(p) //1;
console.log(q) //2;

…使用解构实现与…相同的功能

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

---

…但更具可读性。

在您的

webpack.config.js

中，您可能使用了

harmony

标志启用Hanks。我将接受这一点，并提出另一个问题。现在我知道了语法是什么，我必须找出它在我的项目中还没有编译的内容。webpack使用Esprima并将使用它。在此之前，您将使用c使用es6加载程序将其编译为es5：我否决了此解决方案，因为它未能解决他给出的示例，而该示例未在解决方案中显示。第一个示例显示一个对象文本正在被分解。第二个示例显示一个数组正在被分解。但被质疑的示例是：var{Navigation}=require（'react-router'）；此外，在他给出的示例中，大括号是不必要的。@AndroidDev欢迎您提出编辑建议；OP似乎认为答案令人满意。知道[重新]命名为什么是“向后”的吗？也就是说，

var{newVarName:oldVarName}=varSource；

看起来很像

{newVarName:varSource.oldVarName}

或

scope.newVarName=varSource.oldVarName；

，但这些显然是错误的。将旧的/现有的名称放在

的左边有实际的原因吗：

？这直接回答了问题，因此可能是最好的先读答案，而之前的一些答案更深入ncise…是的。更具可读性-不是真的。后一个示例使用更基本的构造更显式，因此更具可读性-但对于专家来说，前者更有效。

var { p, q } = { p: 1, q:2, r:3, s:4 };
console.log(p) //1;
console.log(q) //2;

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

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