什么时候我应该用大括号导入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中，我必须不带大括号地导入它:

import initialState from './todoInitialState';

如果我把initialState用花括号括起来，我会得到以下代码行的错误:

无法读取未定义的属性todo

文件TodoReducer.js:

export default function todos(state = initialState.todo, action) {
    // ...
}

类似的错误也发生在使用花括号的组件上。我想知道什么时候我应该为一个导入使用花括号，因为很明显，当导入多个组件/模块时，你必须用花括号将它们括起来，这是我知道的。

Stack Overflow的帖子在这里没有回答我的问题，相反，我在问什么时候我应该或不应该使用花括号来导入单个模块，或者我不应该在ES6中使用花括号来导入单个模块(这显然不是情况，因为我看到过需要花括号的单个导入)。

当前回答

如果你认为导入只是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';

2017-01-30 00:28:29

其他回答

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。

2018-11-19 17:42:03

如果你认为导入只是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';

2017-01-30 00:28:29

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

2020-03-08 16:59:06