当前位置：首页 > news >正文

export default和export function的作用及export的含义

news 2025/8/17 4:09:48

在 JavaScript 中，export 是一个关键字，用于将模块中的变量、函数、类等导出，以便其他模块可以导入和使用。export default 和 export（非默认导出）是两种不同的导出方式，它们在使用场景和语义上有明显的区别。

1. `export default`

作用

export default 用于导出模块的默认值。每个模块只能有一个默认导出。默认导出可以是一个变量、函数、类或对象。

特点

单个默认导出：每个模块只能有一个默认导出。
导入时无需指定名称：导入时可以使用任意名称，因为默认导出的名称在导出时已经确定。

使用方法

导出：

// myModule.js
export default function myFunction() {console.log('Hello, world!');
}

导入：

// main.js
import myFunction from './myModule.js';myFunction(); // 输出: Hello, world!

适用场景

单个功能模块：当模块只提供一个主要功能（如一个函数、一个类或一个对象）时，使用 export default。
简洁性：默认导出在导入时不需要指定名称，代码更简洁。

2. `export`（非默认导出）

作用

export 用于导出模块中的多个值（如变量、函数、类等）。每个模块可以有多个非默认导出。

特点

多个导出：每个模块可以有多个非默认导出。
导入时需要指定名称：导入时需要使用与导出时相同的名称。

使用方法

导出：

// myModule.js
export function myFunction() {console.log('Hello, world!');
}export const myVariable = 42;export class MyClass {constructor(name) {this.name = name;}
}

导入：

// main.js
import { myFunction, myVariable, MyClass } from './myModule.js';myFunction(); // 输出: Hello, world!
console.log(myVariable); // 输出: 42
const instance = new MyClass('Vue'); // 创建 MyClass 的实例

适用场景

多个功能模块：当模块提供多个功能（如多个函数、变量或类）时，使用非默认导出。
命名空间：非默认导出允许你在导入时明确指定每个导出的名称，避免命名冲突。

3. `export` 的含义

export 是 JavaScript 模块系统中的一个关键字，用于将模块中的值导出，以便其他模块可以导入和使用。export 的主要作用是：

导出值：将模块中的变量、函数、类等导出。
模块化：将代码分割成模块，便于复用和维护。

4. 默认导出与非默认导出的对比

特点	`export default`	`export`（非默认导出）
导出数量	每个模块只能有一个默认导出	每个模块可以有多个非默认导出
导入方式	导入时可以使用任意名称	导入时需要使用与导出时相同的名称
适用场景	单个功能模块	多个功能模块
代码简洁性	导入时代码更简洁	导入时需要明确指定名称，避免冲突

5. 使用场景总结

export default：
- 适用于模块只提供一个主要功能。
- 导入时不需要指定名称，代码更简洁。
- 适用于单个功能模块，如工具函数、配置对象等。
export（非默认导出）：
- 适用于模块提供多个功能。
- 导入时需要明确指定名称，避免命名冲突。
- 适用于多个功能模块，如工具库、配置文件等。