分配左侧的 Javascript 对象括号表示法 ({ 导航 } =）

Javascript object bracket notation ({ Navigation } =) on left side of assign

本文关键字：导航 表示 Javascript 对象 分配      更新时间：2023-09-26

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

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

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

意外令牌 {

我不确定 webpack 配置的哪个部分正在转换或语法的目的是什么。是和谐的事情吗？有人可以开导我吗？

它被称为解构赋值，它是 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;

这是解构赋值。这是 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变量，我们可以为此使用 Object 解构。

只有当我们手里有钥匙时，这才有可能。

因此，在赋值语句之后，局部变量Navigation将包含function a(){}

另一个例子是这样的。

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

而不是

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

只是

const {salary, age, sex} = personnel
相关文章：