为了理解import语句中花括号的使用，首先，你必须理解ES6中引入的解构概念

Object destructuring 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 Array destructuring var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA']; console.log(firstGame); // Gran Turismo Using list matching var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA']; console.log(secondGame); // Burnout Using the spread operator 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');

为了理解import语句中花括号的使用，首先，你必须理解ES6中引入的解构概念

Object destructuring 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 Array destructuring var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA']; console.log(firstGame); // Gran Turismo Using list matching var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA']; console.log(secondGame); // Burnout Using the spread operator 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');

这是一个默认的导入:

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

一个模块只能有一个默认导出，但可以有任意多个命名导出(0个、1个、2个或多个)。你可以把它们一起导入:

// 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模块的一个很好的指南，解释了默认导出和命名导出之间的区别。

花括号仅用于指定export时的import。如果导出为默认值，则导入时不使用花括号。

ES6模块概述:

出口:

您有两种类型的导出:

叫出口 默认导出，每个模块最多导出一个

语法:

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

感兴趣的事情:

使用花括号内逗号分隔的列表，并与命名导出的匹配导出名称。 使用您选择的不带花括号的名称作为默认导出。

别名:

无论何时你想重命名一个命名导入，这是可能的通过别名。语法如下:

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

现在我们导入了importantData_1，但是标识符是myData而不是importantData_1。

通常当你导出一个函数时，你需要使用{}。

如果你有

export const x

你使用

import {x} from ''

如果你使用

export default const x

你需要使用

import x from ''

这里你可以把X换成任何你想要的变量。