JavaScript 导出 - JavaScript 教程

摘要：在本教程中，您将学习如何使用 JavaScript 导出关键字从模块中导出值。

JavaScript 导出关键字简介

ES6 模块允许您以模块化方式构建 JavaScript 代码。模块提供了一种标准化的方式，用于在 JavaScript 应用程序中定义和导入/导出可重用的代码片段。

默认情况下，ES6 模块封装其代码。这意味着在模块中定义的值（变量、函数、类等）默认情况下无法从模块外部访问。这可以防止命名冲突，并促进更好的代码结构。

模块可以使用 export 关键字导出值（变量、函数、类等）。

export 关键字从模块中导出值，以便您可以在其他模块中使用它们。有两种类型的导出：

命名导出
默认导出

一个模块可以具有多个命名导出，但只有一个默认导出。

命名导出

一个模块可以具有多个命名导出。在实践中，当您需要从模块导出多个值时，您使用命名导出。

导出变量

以下示例展示了如何从模块导出变量 count

let count = 1;
export { count };Code language: JavaScript (javascript)

在此示例中：

首先，声明一个变量 count 并将其值初始化为 100。
然后，通过将它们放在 export 关键字后面的花括号中，导出 count 变量。

可以使用以下语句将变量声明和导出合并到一个语句中：

export let count = 1;Code language: JavaScript (javascript)

类似地，您可以导出使用 const 关键字声明的变量：

export const MIN = 0;Code language: JavaScript (javascript)

要导出多个变量，可以使用逗号 (,) 将它们分隔开：

let count = 1;
const MIN = 0, MAX = 10;

export { MIN, MAX, count };Code language: JavaScript (javascript)

导出函数

导出函数与导出变量具有相同的语法：

function increase() {
  // ..
}
export { increase };Code language: JavaScript (javascript)

以及：

export function increase() {
  // ...
}Code language: JavaScript (javascript)

导出类

与变量和函数一样，您可以使用 export 关键字导出类，例如：

class Counter {
  constructor() {
    this.count = 1;
  }
  increase() {
    this.count++;
  }
  get current() {
    return this.count;
  }
}

export { Counter };Code language: JavaScript (javascript)

在此示例中，我们定义了一个 Counter 类并将其导出。您可以使用以下语句定义一个类并将其导出：

export class Counter {
  constructor() {
    this.count = 1;
  }
  increase() {
    this.count++;
  }
  get current() {
    return this.count;
  }
}Code language: JavaScript (javascript)

导入命名导出时，您需要使用确切的名称并在花括号中指定它们。例如，以下代码导入 Counter 类：

import { Counter } from 'module.js';Code language: JavaScript (javascript)

默认导出

一个模块可以有一个默认导出。要使用默认导出导出值，请使用 default export 关键字。例如：

let message = 'Hi';
export { default as message };Code language: JavaScript (javascript)

它等效于以下代码：

export default let message = 'Hi';Code language: JavaScript (javascript)

导入默认导出时，您不需要将变量放在花括号中：

import message from 'module.js';Code language: JavaScript (javascript)

请注意，如果消息是使用命名导出导出的，则需要将其放在花括号中：

import { message} from 'module.js';Code language: JavaScript (javascript)

这是导入命名导出和默认导出的主要区别。

类似地，您可以使用默认导出从模块导出函数或类：

export default function increase() {
   // ..
}Code language: JavaScript (javascript)

以及：

export default class Counter {
   // ...
}Code language: JavaScript (javascript)

重命名命名导出

使用命名导出导出值时，您可以像这样重命名它：

class Counter {
  // ..
}

export { Counter as MyCounter };Code language: JavaScript (javascript)

导出时重命名值有助于避免命名冲突。请注意，导入该类的模块也可以在导入时重命名它：

import { Counter as MyCounter } from 'module.js';Code language: JavaScript (javascript)

重新导出

一个模块可以从另一个模块导入值并立即导出它们，如下所示：

import { Counter } from 'module.js';
export { Counter };Code language: JavaScript (javascript)

JavaScript 允许您使用 export from 语法缩短此操作：

export { Counter } from 'module.js';Code language: JavaScript (javascript)

总结

使用 JavaScript export 关键字从模块中导出变量、函数和类。
导出可以是命名导出和默认导出。一个模块可以具有多个命名导出，但只有一个默认导出。

本教程是否有帮助？