如何在 ECMAScript 2016 中使用静态导入与导出模块

在开发复杂的 JavaScript 应用程序时，使用模块是必不可少的。在 ECMAScript 2016 中，我们可以使用静态导入和导出语法来帮助我们组织代码并使其更易于维护。本文将详细介绍如何在 ECMAScript 2016 中使用静态导入和导出模块，并提供丰富的示例代码。

静态导入语法

静态导入语法允许我们从 JavaScript 模块中导入另一个模块的内容。该语法使用 import 关键字，后跟被导入模块的名称和要导入的内容的名称。要导入整个模块，只需在模块名称后留空即可。

// 导入一个名为 'hello' 的模块中的 'name' 变量
import { name } from 'hello';

// 导入一个名为 'hello' 的模块中的所有内容
import * as helloModule from 'hello';

此外，还可以使用 import 关键字导入默认导出。

// 导入一个名为 'hello' 的模块的默认导出
import hello from 'hello';

静态导出语法

静态导出语法允许我们将模块中的内容公开给其他模块使用。该语法使用 export 关键字，后跟要导出的内容的名称。要对整个模块进行默认导出，请在模块中使用 export default 关键字。

// 公开 'name' 变量作为命名导出
export const name = 'JavaScript';

// 公开整个模块作为默认导出
export default {
  name: 'JavaScript',
  version: 2016,
};

示例代码

下面是一个示例 JavaScript 模块，它导出两个变量：name 和 version。

// module.js
export const name = 'JavaScript';
export const version = 2016;

现在，我们将创建另一个 JavaScript 模块，该模块将从 module.js 导入变量并使用它们。

// app.js
import { name, version } from './module';

console.log(`We are using ${name} ${version}`);

在这个示例中，我们从 module.js 导入了两个变量，分别是名为 name 和 version 的常量。然后我们将这两个常量用于创建一个字符串，该字符串将在控制台中输出。

我们还可以使用默认导出从一个 JavaScript 模块中导出整个模块。下面是一个示例，其中我们将用一个名为 greetings 的 JavaScript 模块来维护一组问候语，并将其作为默认导出。

// greetings.js
export default [
  'Hello',
  'Hi',
  'Hey',
  'Howdy',
];

现在我们可以从另一个模块中导入这个默认导出并使用它。下面是一个示例，其中我们使用了 .map() 方法来创建一个包含所有问候语的大写版本的新数组。

// app.js
import greetings from './greetings';

const shoutGreetings = greetings.map((greeting) => {
  return greeting.toUpperCase() + '!';
});

console.log(shoutGreetings);

在这个示例中，我们导入了从 greetings.js 模块中导出的默认值，并使用它来创建一个新数组 shoutGreetings。该数组包含全部问候语的大写版本，并在每个字符串末尾添加感叹号。

结论

在 ECMAScript 2016 中，使用静态导入和导出语法可以为我们的 JavaScript 应用程序提供更好的组织方式。本文提供了详细的示例和指导，希望对您在使用 ECMAScript 2016 中的静态导入和导出模块的过程中有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6722fd862e7021665e0db5be