本文共 4873 字，大约阅读时间需要 16 分钟。

这似乎很明显，但是我发现自己对于何时使用花括号在ES6中导入单个模块感到有些困惑。 例如，在我正在从事的React-Native项目中，我具有以下文件及其内容：

initialState.js

initialState from './todoInitialState';

在TodoReducer.js中，我必须不带花括号将其导入：

import initialState from './todoInitialState';

如果将initialState用花括号括起来，则以下代码行将出现以下错误：

无法读取未定义的属性待办事项

TodoReducer.js：

export default function todos(state = initialState.todo, action) { // ... }

带有花括号的组件也发生类似的错误。 我想知道何时应该对大括号使用一次大括号，因为显然，当导入多个组件/模块时，必须将它们括在大括号中，这我知道。

编辑：

的SO帖子没有回答我的问题，而是我在询问何时应该或不应该使用大括号来导入单个模块，或者我绝不应该在ES6中使用大括号来导入单个模块（这显然不是情况，如我所见，需要带花括号的单个导入）

---

#1楼

TL; DR ：如果要导入非默认导出，请使用大括号。

有关更多详细信息，请参见上面的Dan Abramovs答案。

---

#2楼

这是默认导入 ：

// B.jsimport A from './A'

仅当A具有默认导出时才有效：

// A.jsexport default 42

在这种情况下，导入时分配的名称并不重要：

// B.jsimport A from './A'import MyA from './A'import Something from './A'

因为它将始终解析为A的默认导出 。

---

这是一个名为A的命名导入 ：

import { A } from './A'

它只能当A包含一个名为叫出口的A ：

export const A = 42

在这种情况下，名称很重要，因为您要通过其导出名称来导入特定内容 ：

// B.jsimport { A } from './A'import { myA } from './A' // Doesn't work!import { Something } from './A' // Doesn't work!

为了使这些工作，您可以在A添加一个相应的命名导出 ：

// A.jsexport const A = 42export const myA = 43export const Something = 44

---

一个模块只能具有一个默认导出 ，但可以具有任意数量的命名导出 （零，一个，两个或多个）。 您可以将它们全部一起导入：

// B.jsimport A, { myA, Something } from './A'

在这里，我们将默认导出导入为A ，并将导出分别命名为myA和Something 。

// A.jsexport default 42export const myA = 43export const Something = 44

导入时，我们还可以为它们分配所有不同的名称：

// B.jsimport X, { myA as myX, Something as XSomething } from './A'

---

默认导出通常用于通常希望从模块中获取的内容。 命名出口通常用于方便的实用程序，但并不总是必需的。 但是，由您决定如何导出内容：例如，一个模块可能根本没有默认导出。

---

#3楼

上面的Dan Abramov答案解释了有关默认出口和命名出口的信息 。

使用哪个？

引用David Herman的观点 ：ECMAScript 6支持单一/默认导出样式，并为导入默认值提供了最甜蜜的语法。 进口具名出口商品的简洁程度可能甚至应该有所降低。

但是，由于重构，在TypeScript中更喜欢命名为export。 例如，如果您默认导出一个类并对其进行重命名，则该类名将仅在该文件中更改，而在其他引用中则不更改，具有命名的导出的类名将在所有引用中重命名。 公用事业也首选命名出口。

整体使用您喜欢的任何东西。

额外

默认导出实际上是具有默认名称的命名导出，因此默认导出可以导入为：

import {default as Sample} from '../Sample.js';

---

#4楼

我要说的是import ES6关键字也有一个星号，值得一提。

如果您尝试控制台混合日志：

import * as Mix from "./A";console.log(Mix);

你会得到：

什么时候应该将花括号用于ES6导入？

当您只需要模块中的特定组件时，括号是金色的，这对于打包器（如webpack）来说占用的空间较小。

---

#5楼

如果您将import视为节点模块，对象和解构的语法糖，我发现它非常直观。

// bar.jsmodule = {};module.exports = {   functionA: () => {},  functionB: ()=> {}}; // really all that is is this: var module = {    exports: {      functionA, functionB   }  };// then, over in foo.js// the whole exported object: var fump = require('./bar.js'); //= { functionA, functionB }// orimport fump from './bar' // same thing, object functionA and functionB props// just one prop of the objectvar fump = require('./bar.js').functionA;// same as this, right?var fump = { functionA, functionB }.functionA;// and if we use es6 destructuring: var { functionA } =  { functionA, functionB };// we get same result// so, in import syntax:import { functionA } from './bar';

---

#6楼

为了理解在import语句中使用花括号，首先，您必须了解ES6中引入的销毁概念。

1. 对象解构

   var bodyBuilder = { firstname: 'Kai', lastname: 'Greene', nickname: 'The Predator' }; var {firstname, lastname} = bodyBuilder; console.log(firstname, lastname); //Kai Greene firstname = 'Morgan'; lastname = 'Aste'; console.log(firstname, lastname); // Morgan Aste

2. 阵列解构

   var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA']; console.log(firstGame); // Gran Turismo

   使用列表匹配

   var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA']; console.log(secondGame); // Burnout

   使用价差运算符

   var [firstGame, ...rest] = ['Gran Turismo', 'Burnout', 'GTA']; console.log(firstGame);// Gran Turismo console.log(rest);// ['Burnout', 'GTA'];

现在我们已经解决了这个问题，在ES6中，您可以导出多个模块。 然后，您可以像下面那样利用对象分解

假设您有一个名为module.js的模块

export const printFirstname(firstname) => console.log(firstname);    export const printLastname(lastname) => console.log(lastname);

您想将导出的函数导入index.js ；

import {printFirstname, printLastname} from './module.js'    printFirstname('Taylor');    printLastname('Swift');

您也可以像这样使用不同的变量名

import {printFirstname as pFname, printLastname as pLname} from './module.js'    pFname('Taylor');    pLanme('Swift');

---

#7楼

通常，在导出函数时，您需要使用{}

if you have export const x

您使用import {x} from ''

if you use export default const x

您需要使用import X from ''在这里您可以将X更改为所需的任何变量

---

#8楼

花括号（{}）用于导入命名绑定，其背后的概念是破坏分配

在我自己类似问题的答案中，可以找到有关import语句如何与示例一起使用的简单演示

---

#9楼

ES6总结模块：

出口：

您有两种出口类型：

1. 命名出口
2. 默认导出， 每个模块最多1个

句法：

// Module Aexport const importantData_1 = 1;export const importantData_1 = 2;export default function foo () {}

---

进口：

导出类型 （即命名导出或默认导出）会影响如何导入某些内容：

1. 对于命名导出，我们必须使用花括号并将确切的名称用作导出的声明（即变量，函数或类）。
2. 对于默认导出，我们可以选择名称。

句法：

// Module B, imports from module A which is located in the same directoryimport { importantData_1 , importantData_2  } from './A';  // for our named imports// syntax single named import: // import { importantData_1 } // for our default export (foo), the name choice is arbitraryimport ourFunction from './A';

有趣的事情：

1. 在大括号内使用逗号分隔的列表，并与导出的名称相匹配以进行命名导出。
2. 使用您选择的不带花括号的名称进行默​​认导出。

别名：

每当您想重命名已命名的导入时，都可以通过别名来实现 。 语法如下：

import { importantData_1 as myData } from './A';

现在，我们已经进口importantData_1但标识符是myData ，而不是importantData_1 。

转载地址：http://opdnb.baihongyu.com/