在 ECMAScript 2018 中如何使用模块的命名导出和默认导出?

前言

ECMAScript 2018 是 JavaScript 的最新版本,它引入了一些新的语言特性和 API,其中包括模块的命名导出和默认导出。在本文中,我们将介绍如何在 ECMAScript 2018 中使用这些特性。

模块的命名导出

模块的命名导出允许我们在一个模块中导出多个变量或函数。我们可以使用 export 关键字来导出一个或多个变量或函数,然后在其他模块中使用 import 关键字来引入这些变量或函数。

下面是一个简单的示例,其中一个模块导出了两个变量和一个函数:

我们可以在另一个模块中引入这些变量和函数:

在这个示例中,我们使用 import { PI, square, sayHello } from './module.js' 语句来引入 module.js 模块中导出的三个变量和函数。我们可以像使用这些变量和函数一样在当前模块中使用它们。

模块的默认导出

模块的默认导出允许我们在一个模块中只导出一个变量或函数。我们可以使用 export default 关键字来导出一个变量或函数,然后在其他模块中使用 import 关键字来引入它。

下面是一个示例,其中一个模块默认导出了一个函数:

我们可以在另一个模块中引入这个函数:

在这个示例中,我们使用 import sayHello from './module.js' 语句来引入 module.js 模块中默认导出的函数。我们可以像使用这个函数一样在当前模块中使用它。

需要注意的是,一个模块只能有一个默认导出,但可以有多个命名导出。

模块的混合导出

我们还可以将命名导出和默认导出结合起来使用。下面是一个示例,其中一个模块同时导出了一个变量和一个函数:

我们可以在另一个模块中引入这个模块中的变量和函数:

在这个示例中,我们使用 import mySquare, { PI } from './module.js' 语句来引入 module.js 模块中默认导出的函数和命名导出的变量。我们可以像使用这些变量和函数一样在当前模块中使用它们。

总结

在 ECMAScript 2018 中,我们可以使用模块的命名导出和默认导出来导出变量和函数,并在其他模块中使用 import 关键字来引入它们。我们还可以使用混合导出来同时导出命名导出和默认导出的变量和函数。这些特性可以帮助我们组织和管理我们的代码,使代码更加模块化和可维护。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65114c5b95b1f8cacd9bd3a9


纠错
反馈