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

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

基本语法

1. 命名导出（Named Exports）

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

单独导出

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

// 导出一个常量
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;
}
}

　

批量导出

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

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 };

重命名导出

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

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

 

2. 默认导出（Default Export）

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

直接导出

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

// 默认导出一个函数
export default function(a, b) {
return a + b;
}

// 默认导出一个类
export default class {
constructor(name) {
this.name = name;
}

greet() {
console.log(`Hello, ${this.name}!`);
}
}

　　

先定义后导出

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

示例一：

function add(a, b) {
return a + b;
}

// 默认导出
export default add;

　示例二：　

class Greeting {
constructor(name) {
this.name = name;
}

greet() {
console.log(`Hello, ${this.name}!`);
}
}

// 默认导出
export default Greeting;

　

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

3. 混合导出

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

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`：

// 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;
}
}

　　

我们可以这样导入：

// 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`：

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

　　

我们可以这样导入：

// main.js
import greet from './greet.js';

greet('Alice'); // 输出: Hello, Alice!

　　

混合导入

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

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

export default function multiply(a, b) {
return a * b;
}

　　

我们可以这样导入：

// 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`，可以有效地组织代码结构，提升代码的可维护性和复用性。如果有任何进一步的问题或需要更多的示例，请随时告知！