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

Question

这似乎是显而易见的,但我发现自己对于何时使用花括号在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) {
// ...
}

使用花括号的组件也会发生类似的错误.我想知道何时应该使用大括号进行单次导入,因为很明显,当导入多个组件/模块时,你必须将它们用大括号括起来,我知道.

编辑:

所谓张贴在这里并没有回答我的问题,而不是我问的时候我应不应该用花括号用于导入单个模块,或者我不应该用花括号中ES6导入单个模块(这显然不是例如,我已经看过需要花括号的单个导入)

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'

因为它将始终解析为默认导出的任何内容A.

这是一个名为import的名为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,并分别命名为exports 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模块的一个很好的指南,解释了默认和命名导出之间的区别.

Answer 2

TL; DR:如果要导入非默认导出,则使用大括号.

有关详细信息,请参阅上面的Dan Abramovs回答.

Answer 3

我想说importES6关键字也有一个星号表示值得一提.

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

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

你会得到:

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

当您只需要模块中的特定组件时,括号是金色的,这为webpack等捆绑器提供了更小的占用空间.

Answer 4

Dan Abramov上面的回答解释了默认导出和命名导出.

哪个用？

引用David Herman:ECMAScript 6支持单/默认导出样式,并为导入默认值提供最甜蜜的语法.导入命名导出可以,甚至应该略微简洁.

但是在TypeScript中,由于重构,命名导出很受欢迎.例如,如果默认导出类并重命名,则类名将仅在该文件中更改,而不会在其他引用中更改,并且将在所有引用中重命名已命名的exports类名.实用程序也首选命名导出.

总体使用你喜欢的任何.

额外

默认导出实际上是名为default的命名导出,因此可以将默认导出导入为:

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

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

Answer 6

ES6模块总结：

出口：

您有两种类型的导出：

1. 命名导出
2. 默认导出，每个模块最多一个

句法：

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

进口：

导出的类型（即命名或默认导出）会影响如何导入：

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

句法：

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

感兴趣的东西：

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

别名：

每当您想重命名命名导入时，这都可以通过aliases。其语法如下：

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

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

Answer 7

大括号 ({}) 用于导入命名绑定，其背后的概念是解构赋值

关于 import 语句如何使用示例的简单演示可以在我自己对类似问题的回答中找到，何时我们在 javascript 导入中使用 '{ }'？。

Answer 8

为了理解import语句中花括号的用法，首先，您必须了解ES6中引入的销毁概念。

1. 对象解构

   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
   

2. 阵列解构

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

Answer 9

在 ES6 和更高版本的 JavaScript 中，导入语句中使用大括号来有选择地从模块导入命名导出。当您想要导入从另一个模块导出的特定变量、函数或类时，应该使用花括号

第一个案例：

// moduleA.js
export const a = 1;
export const b = 2;

// Using curly braces to import specific named exports
import { a, b } from './moduleA';

第二种情况：

// moduleB.js
export default 42;

// Importing the default export without curly braces
import myNumber from './moduleB';

第三种情况：

// moduleC.js
export const x = 10;
export default 20;

// Importing both named and default exports in a single line
import myDefault, { x } from './moduleC';

Answer 10

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

if you have export const x 

你用 import {x} from ''

if you use export default const x 

您需要在import X from '' 这里使用，您可以将X更改为所需的任何变量

Answer 11

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

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

• 您可以在下面的 YouTube 视频中找到何时使用花括号和默认语句的完全区别。

  21.ES6 模块。使用导入/导出的不同方式，代码中的默认语法。ES6 | ES2015