JavaScript Module 导出和导入花括号特性

2021-12-30 乐帮网

javascript

什么时候应该使用花括号进行 ES6 导入？“{”“}”。
这似乎很明显，但我发现自己对何时使用花括号在 ES6 中导入单个模块感到有些困惑。例如，在我正在处理的 React-Native 项目中，我有以下文件及其内容：

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 括在花括号中，则会收到以下代码行的以下错误：

Cannot read property todo of undefined

这是默认导入：

// B.js
import A from './A'

它所对应的导出只有在标识 default时才能正常:

// A.js
export default 42

在这种情况下，导入时分配给它的名称并不重要：

// B.js
import A from './A'
import MyA from './A'
import Something from './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.js
export const A = 42
export const myA = 43
export const Something = 44

一个模块只能有一个默认导出，但可以有任意多个命名导出（零、一个、两个或多个）。您可以将它们全部导入：

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

默认导出往往用于您通常期望从模块中获得的任何内容。命名导出往往用于可能很方便但并不总是必要的实用程序。但是，您可以选择如何导出内容：例如，模块可能根本没有默认导出。

https://stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import/36796281#36796281

关注我的微信公众号
在公众号里留言交流
投稿邮箱：1052839972@qq.com

庭院深深深几许？杨柳堆烟，帘幕无重数。
玉勒雕鞍游冶处，楼高不见章台路。
雨横风狂三月暮。门掩黄昏，无计留春住。
泪眼问花花不语，乱红飞过秋千去。

如果感觉对您有帮助
欢迎向作者提供捐赠
这将是创作的最大动力

JavaScript Module 导出和导入 花括号特性

JavaScript Module 导出和导入花括号特性