何时应将花括号用于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中，我必须不带花括号将其导入：代码行：

无法读取不确定的属性待办事项

TodoReducer.js：

import initialState from './todoInitialState';

花括号中的组件也发生类似的错误。我想知道何时应该对单个大括号使用大括号，因为显然，当导入多个组件/模块时，必须将它们括在大括号中，这我知道。 >
这里的SO帖子没有回答我的问题，而是我在询问何时应该或不应该使用大括号来导入单个模块，或者在ES6中我绝对不要使用大括号来导入单个模块（显然不是这种情况，因为我已经看到需要带花括号的单个导入）

可能与使用带有JavaScript导入语法的方括号重复

不，不一样。谢谢

ES6模块导出选项或Javascript（ES6）的可能重复项，导出const与导出默认值

#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的默认导出。

这是一个名为A的命名导入： >

import { A } from './A'

在这种情况下，名称很重要，因为您要通过导出名称导入特定的东西：

export const A = 42

要使这些工作正常进行，您可以在A中添加一个对应的命名导出：根据您的意愿（零，一，二或多）。您可以一起导入它们： />

// B.js
import { A } from './A'
import { myA } from './A' // Doesn't work!
import { Something } from './A' // Doesn't work!

导入时，我们也可以为它们分配所有不同的名称：

通常您希望从模块中获得的收益。命名的出口通常用于方便的公用事业，但并非总是必需的。但是，由您自己决定如何导出内容：例如，一个模块可能根本没有默认导出。出口。

使模块具有单个出口export const myA = 43是否有任何缺点？ export const Something = 44;以及导出默认的{myA，Something}？因此，当您导入时，您可以从'./A'中导入A；对于模块中的所有内容，或从'./A'中导入{Something}；所以你只得到一些模块

–迈克尔
17年2月13日在18:41

很好，但是已经有一种语法可以将所有命名的导出导出到一个对象中：import * as AllTheThings。

–丹·阿布拉莫夫（Dan Abramov）
17 Mar 4 '17 at 12:08

解释清楚！我希望我可以对此答案加倍投票。

–威拉
17年4月14日在20:29

怎么样-导入“ firebase / storage”；或导入“ rxjs / add / operator / map”;。那实际上是做什么的？

–kyw
17年9月24日在7:52

@kyw：这将执行模块，但忽略导出的值。有用的副作用。

–丹·阿布拉莫夫（Dan Abramov）
18年2月12日在2:33

#2 楼

我想说import ES6关键字也有一个星号表示法，值得一提。 >

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

您将获得：

我何时应该将花括号用于ES6导入？

当您只需要模块中的特定组件时，括号是金色的，这对于诸如webpack的捆绑器来说占用的空间较小。

您的图像是此特定答案的完美备忘单。

–罗德里罗克
18/12/16在21:48

是从“ ./A”导入*作为Mix；并从“ ./A”导入A作为Mix。相同？

– Shafizadeh
2月11日18:48

#3 楼

丹·阿布拉莫夫（Dan Abramov）的以上答案解释了默认导出和命名导出。

使用哪种？导入默认值的最甜蜜语法。进口具名出口商品的简洁程度可能甚至应该有所降低。

但是，由于重构，在TypeScript中，名为export受到青睐。例如，如果您默认导出一个类并对其进行重命名，则该类名将仅在该文件中更改，而在其他引用中则不更改，具有命名的导出的类名将在所有引用中重命名。
公用事业也首选命名出口。

总体上使用您喜欢的任何方式。

其他

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

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

附加行是很好的信息。如果您在导出时未定义诸如export default 42之类的名称，则从'./A'导入A没有意义。

–PGT
17-2-24在4:53

请确保不要误解David Herman的报价。这并不意味着“最好在ES6中始终使用单一/默认导出”，而是“由于单一导出非常普遍，因此ES6最好地支持默认设置，而我们为它们提供了最甜蜜的语法”。

–贝尔吉
17年5月16日在16:42

#4 楼

如果您将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';

#5 楼

为了了解在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 [,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');

还可以使用不同的变量名，例如

由于您正在显示对销毁的比较，因此我将在您的最后一条注释中添加等效的销毁比较：从'./module.js'导入{printFirstname作为pFname，printLastname作为pLname}等效于：var foo = {printFirstname：'p_f_n '，printLastname：'p_l_n'}; var {printFirstname：pFname，printLastname：pLname} = foo; pFname（'泰勒'）; pLname（'Swift'）;

–亚当·莫伊萨（Adam Moisa）
18年8月8日在1:57

健美迷？

–图莎·潘迪（Tushar Pandey）
19-09-26在9:55

@TusharPandey我是健美先生

–Typan
19-09-26在10:38

我认为在任何有关导入以及何时使用卷发与何时不使用卷发的解释中，如果您未提及对象销毁，那么您确实没有给出最佳解释。一旦了解了销毁功能，我就再也没想过为什么要使用卷曲了，这在直觉上是有意义的。

–埃里克·比斯哈德（Eric Bishard）
19年11月6日在19:04

#6 楼

ES6模块摘要：

出口：

您有两种出口类型：

命名出口
默认出口，每个模块最多1个

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

感兴趣的内容：

在花括号中使用逗号分隔的列表，并与导出的名称相匹配，以用于命名的export。
使用您选择的名称（不包含花括号）作为默认名称导出。

别名：

无论何时要重命名已命名的导入，都可以通过别名来实现。语法如下：

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

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

#7 楼

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

export const x

使用

import {x} from ''

如果使用

export default const x

您需要使用

import x from ''

>您可以在此处将X更改为所需的任何变量

#8 楼

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

我自己对类似示例的回答中可以找到关于import语句如何工作的简单演示。何时在JavaScript导入中使用“ {}”时出现问题？

#9 楼

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

#10 楼

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

例如

export default vx;

index.js

import vx from './player';