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

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

https://i.stack.imgur.com/uCCXS.png

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

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

你会得到：

https://i.stack.imgur.com/sCZr6.png

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

当您只需要模块中的特定组件时，括号是金色的，这使得 webpack 之类的打包工具占用的空间更小。

---

Dan Abramov's answer 解释了默认导出和命名导出。

使用哪个？

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

但是，在 TypeScript 中，由于重构，命名导出受到青睐。例如，如果您默认导出一个类并重命名它，则类名将仅在该文件中更改，而不在其他引用中更改，命名导出类名将在所有引用中重命名。命名导出也是实用程序的首选。

总体使用你喜欢的任何东西。

额外的

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

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

---

如果您认为 import 只是 Node.js 模块、对象和 destructuring 的语法糖，我发现它非常直观。

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

---

总结 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。

---

为了理解 import 语句中花括号的使用，首先要了解 ES6 中引入的 destructuring 的概念

对象解构 var bodyBuilder = { firstname: 'Kai', lastname: 'Greene', 昵称: 'The Predator' }; var {名字，姓氏} = bodyBuilder；控制台.log（名字，姓氏）； // 凯格林名字 = '摩根';姓氏 = '阿斯特';控制台.log（名字，姓氏）； // 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 更改为您想要的任何变量。

---

花括号 ({}) 用于导入命名绑定，其背后的概念是 destructuring assignment

可以在我自己对 When do we use '{ }' in javascript imports? 上类似问题的回答中找到关于 import 语句如何与示例一起工作的简单演示。

---

花括号仅在命名导出时用于导入。如果导出为默认值，则不使用花括号进行导入。

---

如果文件中有任何默认导出，则无需在导入语句中使用花括号。

如果文件中有多个导出，那么我们需要在导入文件中使用花括号，以便我们可以导入必要的。

您可以在下面的 YouTube 视频中找到何时使用花括号和默认语句的完全区别。 21. ES6 模块。使用导入/导出的不同方式，代码中的默认语法。 ES6 | ES2015

---

对于默认导出，我们在导入时不使用 { }。

例如，

文件播放器.js

export default vx;

文件 index.js

import vx from './player';

文件 index.js

https://i.stack.imgur.com/5HBFh.png

文件播放器.js

https://i.stack.imgur.com/iDyrd.png

如果我们想导入我们导出的所有内容，那么我们使用 *：

https://i.stack.imgur.com/ObPk7.png

---