JavaScript 模块导出示例

JavaScript 模块导出示例说明

在 JavaScript 中，我们可以通过 export 关键字将模块中的功能导出，以供其他模块使用。导出可以是单个默认值，也可以是多个命名值。本文将分别介绍导出单个值和导出多个值的示例说明。

导出单个值

当模块中只有一个主要的功能时，可以使用 export default 来导出该功能。

示例

假设我们有一个名为 math.js 的模块，其中包含了一个用于计算平方的函数 square。我们可以将这个函数作为默认导出项导出。

// math.js
const square = (x) => x * x;

export default square;
1
2
3
4

在另一个文件中，我们可以导入并使用这个函数。

// main.js
import square from "./math.js";

console.log(square(5)); // 输出 25
1
2
3
4

导出多个值

当模块中有多个值需要导出时，可以使用 export 关键字分别导出这些值。

示例

假设我们有一个名为 utils.js 的模块，其中包含了两个函数 add 和 subtract。我们可以分别导出这两个函数。

// utils.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

export { add, subtract };
1
2
3
4
5

在另一个文件中，我们可以选择性地导入所需的值。

// main.js
import { add, subtract } from "./utils.js";

console.log(add(5, 3)); // 输出 8
console.log(subtract(5, 3)); // 输出 2
1
2
3
4
5

或者导入所有导出的值并重命名它们。

// main.js
import * as utils from "./utils.js";

console.log(utils.add(5, 3)); // 输出 8
console.log(utils.subtract(5, 3)); // 输出 2
1
2
3
4
5

总结

通过本文的示例说明，你学会了如何在 JavaScript 模块中导出单个值和多个值，并在其他模块中导入和使用这些值。这些功能让你能够更加灵活地组织和重用你的代码。