Javascript 对象括号表示法（{ Navigation } =）位于赋值的左侧对象解构数组解构

javascript ecmascript-6 webpack

2022-08-30 04:25:34

我以前从未见过这种语法，我想知道它到底是什么。

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

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

意外的令牌 {

我不确定webpack配置的哪个部分正在转换，或者语法的目的是什么。这是和谐的事情吗？有人能启发我吗？

答案 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;

答案 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;

Javascript 对象括号表示法 （{ Navigation } =） 位于赋值的左侧对象解构数组解构

对象解构

数组解构

Javascript 对象括号表示法（{ Navigation } =）位于赋值的左侧对象解构数组解构