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

admin管理员组

文章数量:1441545

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

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

基本语法

1. 命名导出（Named Exports）

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

单独导出

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

代码语言：javascript代码运行次数：0运行复制

// 导出一个常量
export const PI = 3.14159;

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

// 导出一个类

代码语言：javascript代码运行次数：0运行复制

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

getArea() {
return this.width * this.height;
}
}

批量导出

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

代码语言：javascript代码运行次数：0运行复制

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

重命名导出

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

代码语言：javascript代码运行次数：0运行复制

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

2. 默认导出（Default Export）

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

直接导出

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

代码语言：javascript代码运行次数：0运行复制

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

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

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

先定义后导出

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

示例一：

代码语言：javascript代码运行次数：0运行复制

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

// 默认导出
export default add;

　示例二：　

代码语言：javascript代码运行次数：0运行复制

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

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

// 默认导出
export default Greeting;

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

3. 混合导出

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

代码语言：javascript代码运行次数：0运行复制

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

代码语言：javascript代码运行次数：0运行复制

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

我们可以这样导入：

代码语言：javascript代码运行次数：0运行复制

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

代码语言：javascript代码运行次数：0运行复制

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

我们可以这样导入：

代码语言：javascript代码运行次数：0运行复制

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

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

混合导入

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

代码语言：javascript代码运行次数：0运行复制

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

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

我们可以这样导入：

代码语言：javascript代码运行次数：0运行复制

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

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-02-13，如有侵权请联系 cloudcommunity@tencent 删除前往查看变量对象函数javascriptexport

本文标签： 详解JavaScript 中 export语句的完整指令格式