130

我以前没有见过这种语法，我想知道它是怎么回事。

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

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

意外的标记 {

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

4

5 回答 5

131

它被称为解构赋值，它是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;
于 2014-11-18T17:04:08.760 回答
119

这是解构赋值。这是 ECMAScript 2015 的新功能。

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

相当于：

var AppRegistry = React.AppRegistry;
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.View;
于 2015-10-18T01:53:55.750 回答
22 
var { Navigation } = require('react-router');

...使用解构来实现与...相同的事情

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

...但更具可读性。

于 2017-08-27T22:06:33.837 回答
8

解构对象是 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;
于 2017-07-20T17:31:25.477 回答
1

代替

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

简单地

const {salary, age, sex} = personnel
于 2021-12-13T19:53:52.790 回答