什么时候应该使用花括号来进行ES6导入？

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

initialState.js ：

var initialState = { todo: { todos: [ {id: 1, task: 'Finish Coding', completed: false}, {id: 2, task: 'Do Laundry', completed: false}, {id: 2, task: 'Shopping Groceries', completed: false}, ] } }; export default initialState; 

在TodoReducer.js中 ，我必须导入它没有大括号：

 import initialState from './todoInitialState'; 

如果我把大括号中的initialState括起来，那么下面这行代码会出现下面的错误：

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

TodoReducer.js ：

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

类似的错误也发生在我的组件花括号。 我想知道什么时候应该使用花括号来进行单个导入，因为显然，在导入多个组件/模块时，必须将它们放在大括号中，我知道。

编辑 ：

在这里的SOpost没有回答我的问题，而是问我何时应该或不应该使用花括号来导入单个模块，或者我不应该使用花括号来导入ES6中的单个模块（这显然不是案例，因为我已经看到需要单个import花括号）

Answer 1

这是一个默认导入 ：

 // 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' 

因为它总是会parsing为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' 

---

默认导出通常用于通常期望从模块获得的任何内容。 命名的出口往往被用于公用事业，可能是方便的，但并不总是必要的。 但是，您可以select如何导出内容：例如，模块可能根本没有默认导出。

这是ES模块的一个很好的指导，解释了默认和命名导出之间的区别。

Answer 2

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

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

Answer 3

上面的答案阿布拉莫夫答案解释了默认出口和命名出口 。

使用哪个？

引用David Herman ：ECMAScript 6支持单一/默认导出样式，并提供了最好的语法来导入默认值。 导入命名导出可以，甚至应该稍微简洁。

但是在名为export的TypeScript中，由于重构而受到青睐。 例如，如果您默认导出类并重命名它，那么类名将只在该文件中更改，而不会在其他引用中更改，并且在所有引用中将命名的exports类名将被重命名。 命名输出也是实用程序的首选。

无论你喜欢整体使用。

额外

默认导出实际上是名称为default的命名导出，所以默认导出可以导入为：

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

Answer 4

我会说，还有一个值得一提的import ES6关键字的星号。

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

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

你会得到：

什么时候应该使用花括号来进行ES6导入？

当您只需要模块中的特定组件时，括号就是黄金，这使得像webpack这样的捆绑软件的占用空间更小。

Answer 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.js' // 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 { functinoA } from './bar.js'