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

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

initialState.js

import 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.js
import A from './A'

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

// A.js
export default 42

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

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

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

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

import { A } from './A'

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

export const A = 42

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

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

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

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

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

// B.js
import A, { myA, Something } from './A'

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

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

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

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

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

这是ES模块的出色指南，解释了默认导出和命名导出之间的区别。

#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.js
module = {};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 }
// or
import fump from './bar' // same thing, object functionA and functionB props// just one prop of the object
var 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中引入的销毁概念。

对象解构

 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

阵列解构

 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楼

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

在我自己何时在javascript导入中使用“ {}”对类似问题的答案中，可以找到有关import语句如何与示例一起使用的简单演示。

#9楼

`ES6`总结模块：

出口：

您有两种出口类型：

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

句法：

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

进口：

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

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

句法：

// 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 arbitrary
import ourFunction from './A';

有趣的事情：

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

别名：

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

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

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