JavaScript对象中的方括号表示法 ({ Navigation } =) 在赋值语句的左侧。

Question

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

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

左侧的括号引发了语法错误：

意外的标记 {

我不确定webpack配置的哪一部分正在转换或语法的目的是什么。这是Harmony的事情吗？有人可以启发我吗？

- captainill

---

在你的 webpack.config.js 文件中，你可能启用了 jsx-loader 的 harmony 标志。 - Paolo Moretti

这个回答解决了你的问题吗？“var { ... } = ...”语句中的花括号是做什么用的？ - Oleg Valter is with Ukraine

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

- Matt Ball

---

谢谢。我会接受这个答案并提出另一个问题。现在我知道了语法，接下来我需要找出在我的项目中为什么仍然无法编译。 - captainill

Webpack使用Esprima，并且在Esprima 2.0发布后将支持es6。在此之前，您可以使用其中一个es6-loader将其编译为es5：https://github.com/conradz/esnext-loader https://github.com/Couto/6to5-loader https://github.com/shama/es6-loader - Johannes Ewald

我对这个解决方案进行了负评，因为它未能解决他提出的示例问题，而该问题在解决方案中没有显示。第一个示例显示了对象文字被解构。第二个示例显示了数组被解构。但是被质疑的示例是这样的：var { Navigation } = require('react-router'); 此外，在他给出的示例中，花括号是不必要的。 - Johann

@AndroidDev 您可以建议进行编辑；原帖作者似乎对答案感到满意。 - Matt Ball

有没有想过为什么重命名是“反向”的？也就是说，var {newVarName: oldVarName} = varSource; 看起来很像 { newVarName: varSource.oldVarName } 或者 scope.newVarName = varSource.oldVarName;，但这些显然是错误的。在 : 的左边放旧名称有实际原因吗？ - ruffin

@ruffin，你不应该把它看作是一个对象声明，其中你有名称：值对（你所描述的“前向”）。对象解构更像是一个受限制的with语句块，你只能访问对象属性的子集。系统提供的对象（以及类似的）模块往往具有良好的、描述性的但相当长的名称（有时与其他对象的属性冲突），因此语法允许声明可选地包括属性名称的别名。因此，查看语法的更好方法是PropertyName [ ":" Alias ]。 - Uber Kluger

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;

- Rudolf Manusachi

Answer 3

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

...使用解构来达到与...相同的效果

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

...但读起来更加流畅。

- Cliff Hall

---

这直接回答了所问的问题，因此可能是首先阅读的最佳答案，而一些早期的答案则更加深入。 - Mallory-Erik

更简洁...没问题。更易读 - 不完全是。后一个例子使用了更基本的结构，因此更详细，更易读 - 但对于专家来说，前一个例子更高效。 - Brian

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;

- Rajendra kumar Vankadari

Answer 5

替代

const salary = personnel.salary
const sex = personnel.sex
const age = personnel.age

简单地说

const {salary, age, sex} = personnel

- Akin Zeman