Javascript ES6导入何时应使用大括号？

这似乎很明显，但我发现自己对何时在ES6中使用大括号导入单个模块有点困惑。例如，在我正在处理的React Native项目中，我有以下文件及其内容：

文件initialState.js 在TodoReducer.js中，我必须导入不带花括号的文件：

import initialState from './todoInitialState';

如果将

initialState

括在大括号中，则以下代码行会出现以下错误：

无法读取未定义的属性todo

TodoReducer.js文件： 类似的错误也发生在带花括号的组件上。我想知道什么时候应该在单个导入中使用大括号，因为很明显，在导入多个组件/模块时，必须将它们括在大括号中，我知道这一点

---

位于的Stack Overflow post没有回答我的问题，而是问我什么时候应该或不应该使用大括号导入单个模块，或者我永远不应该在ES6中使用大括号导入单个模块（显然不是这样，因为我已经看到需要大括号的单次导入）.

这是默认导入：

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

// A.js
export default 42

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

具有默认导出时，它才起作用：

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

// A.js
export default 42

import { A } from './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!

在这种情况下，导入时为其指定的名称无关紧要：

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

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

因为它将始终解析为

A

的默认导出

---

这是名为

a

的命名导入：

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

// A.js
export default 42

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

的命名导出时，它才起作用：

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

// A.js
export default 42

import { A } from './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!

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

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

// A.js
export default 42

import { A } from './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 A from './A'
import MyA from './A'
import Something from './A'

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

---

默认导出通常用于您通常期望从模块获得的任何内容。命名的导出通常用于实用程序，这些实用程序可能很方便，但并不总是必需的。但是，您可以选择如何导出内容：例如，模块可能根本没有默认导出

解释了默认导出和命名导出

使用哪个？

引用David Herman：支持单一/默认导出样式，并为导入默认值提供最甜美的语法。导入命名导出可以，甚至应该稍微不那么简洁

然而，在TypeScript中，由于重构，名为export的脚本更受欢迎。例如，如果默认导出一个类并对其重命名，则该类名称将仅在该文件中更改，而不会在其他引用中更改，使用命名导出时，将在所有引用中重命名该类名称。 实用程序也首选命名导出

整体使用你喜欢的任何东西

附加的

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

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

---

我想说，

import

ES6关键字还有一个星号符号值得一提

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

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

您将获得：

ES6导入何时应使用大括号

---

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

如果您将

import

看作Node.js模块、对象和的语法糖，我发现这非常直观

// 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' // The same thing - object functionA and functionB properties


// Just one property 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';

---

为了理解

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 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');

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

如果你有

export const x

你用

import {x} from ''

如果你使用

export default const x

你需要使用

import x from ''

在这里，您可以将X更改为所需的任何变量。
大括号（{}）用于导入命名绑定，其背后的概念是

有关导入语句如何与示例一起工作的简单演示，请参见我自己对类似问题的回答。
摘要模块：
导出：

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

// Module B, imports from module A which is located in the same directory

import { 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';

您有两种类型的导出：

命名输出
默认导出，每个模块最多导出一个

语法：

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

// Module B, imports from module A which is located in the same directory

import { 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';


导入：

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

// Module B, imports from module A which is located in the same directory

import { 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';

导出的类型（即命名或默认导出）会影响导入内容的方式：

对于命名的导出，我们必须使用大括号和确切名称作为导出的声明（即变量、函数或类）
对于默认导出，我们可以选择名称
语法：

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

// Module B, imports from module A which is located in the same directory

import { 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';

关注事项：

在大括号内使用逗号分隔的列表，该列表与命名导出的导出名称相匹配
使用您选择的不带大括号的名称作为默认导出
别名：