详解JavaScript 中 `export ` 语句的完整指令格式

在 JavaScript 中，`export` 语句用于从模块中导出函数、类、对象、变量等，以便其他模块可以通过 `import` 语句导入和使用这些导出的内容。ES6 模块系统提供了多种方式来导出内容，下面详细讲解 `export` 语句的完整指令格式及其用法。

基本语法

1. 命名导出（Named Exports）

命名导出允许你从一个模块中导出多个值，并且每个导出都有一个唯一的名称。你可以通过以下几种方式实现命名导出：

单独导出

你可以在声明时直接导出变量、函数或类。

?

1 2 3 4 5 6 7

// 导出一个常量 export const PI = 3.14159;   // 导出一个函数 export function add(a, b) { return a + b; }

　　

// 导出一个类

?

1 2 3 4 5 6 7 8 9 10

export class Rectangle { constructor(width, height) { this.width = width; this.height = height; }   getArea() { return this.width * this.height; } }

　

批量导出

你也可以先定义变量、函数或类，然后在一个单独的 `export` 语句中批量导出它们。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

const PI = 3.14159; function add(a, b) { return a + b; } class Rectangle { constructor(width, height) { this.width = width; this.height = height; }   getArea() { return this.width * this.height; } }   // 批量导出 export { PI, add, Rectangle };

重命名导出

你还可以在导出时为导出的标识符指定一个新的名称。

?

1 2 3 4 5 6

const PI = 3.14159; function add(a, b) { return a + b; } // 重命名导出 export { PI as CircleConstant, add as sum };

 

2. 默认导出（Default Export）

默认导出允许你从一个模块中导出一个单一的值，并且这个导出不需要名称。默认导出通常用于导出单个函数、类或对象。

直接导出

你可以直接在声明时进行默认导出。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// 默认导出一个函数 export default function(a, b) { return a + b; }   // 默认导出一个类 export default class { constructor(name) { this.name = name; }   greet() { console.log(`Hello, ${this.name}!`); } }

　　

先定义后导出

你也可以先定义变量、函数或类，然后再进行默认导出。

示例一：

?

1 2 3 4 5 6

function add(a, b) { return a + b; }   // 默认导出 export default add;

　示例二：　

?

1 2 3 4 5 6 7 8 9 10 11 12

class Greeting { constructor(name) { this.name = name; }   greet() { console.log(`Hello, ${this.name}!`); } }   // 默认导出 export default Greeting;

　

注意：一个模块只能有一个默认导出。

3. 混合导出

你可以在一个模块中同时使用命名导出和默认导出。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

const PI = 3.14159; function add(a, b) { return a + b; } class Rectangle { constructor(width, height) { this.width = width; this.height = height; }   getArea() { return this.width * this.height; } }   // 命名导出 export { PI, add, Rectangle };   // 默认导出 export default function multiply(a, b) { return a * b; }

　　

导入导出示例

导入命名导出

假设我们有一个模块 `math.js`：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// math.js export const PI = 3.14159; export function add(a, b) { return a + b; } export class Rectangle { constructor(width, height) { this.width = width; this.height = height; }   getArea() { return this.width * this.height; } }

　　

我们可以这样导入：

?

1 2 3 4 5 6 7

// main.js import { PI, add, Rectangle } from './math.js';   console.log(PI); // 输出: 3.14159 console.log(add(2, 3)); // 输出: 5 const rect = new Rectangle(4, 5); console.log(rect.getArea()); // 输出: 20

　　

导入默认导出

假设我们有一个模块 `greet.js`：

?

1 2 3 4

// greet.js export default function(name) { console.log(`Hello, ${name}!`); }

　　

我们可以这样导入：

?

1 2 3 4

// main.js import greet from './greet.js';   greet('Alice'); // 输出: Hello, Alice!

　　

混合导入

假设我们有一个模块 `mixed.js`：

?

1 2 3 4 5 6 7 8 9

// mixed.js export const PI = 3.14159; export function add(a, b) { return a + b; }   export default function multiply(a, b) { return a * b; }

　　

我们可以这样导入：

?

1 2 3 4 5 6

// main.js import multiply, { PI, add } from './mixed.js';   console.log(multiply(2, 3)); // 输出: 6 console.log(PI); // 输出: 3.14159 console.log(add(2, 3)); // 输出: 5

　　

总结

- 命名导出：可以导出多个值，并且每个导出都有一个唯一的名称。可以通过 `{}` 来导入特定的导出。
- 默认导出：一个模块只能有一个默认导出，并且不需要名称。可以直接导入默认导出。
- 混合导出：可以在一个模块中同时使用命名导出和默认导出。

通过合理使用 `export` 和 `import`，可以有效地组织代码结构，提升代码的可维护性和复用性。如果有任何进一步的问题或需要更多的示例，请随时告知！