ES6 模块化中的 默认导出（Default Export）、命名导出（Named Export） 和 混合导出（Combined Export） 是三种不同的导出方式，用于控制模块对外暴露的内容。它们的核心区别在于导出形式和导入方式。

一、默认导出

1、特点

• 每个模块 只能有一个默认导出。
• 默认导出通常用于导出模块的“主要功能”或“默认值”。
• 导入时可以 自定义名称，无需与原导出名一致。

2、导出语法

// 方式1：直接导出值
export default function() { /* ... */ }

// 方式2：先定义后导出
const foo = "Hello";
export default foo;

3、导入语法

import customName from "./module.js"; // 可任意命名

4、示例

// math.js
export default function add(a, b) {
  return a + b;
}

// app.js
import myAdd from "./math.js"; // 导入时可重命名
console.log(myAdd(1, 2)); // 3

二、命名导出

1、特点

• 一个模块可以有 多个命名导出。
• 导出时必须指定名称，导入时必须使用 相同名称 或 别名。
• 适合导出多个工具函数、常量或组件。

2、导出语法

// 方式1：直接导出声明
export const PI = 3.14;
export function multiply(a, b) {
  return a * b;
}

// 方式2：统一导出
const PI = 3.14;
function multiply(a, b) {
  return a * b;
}
export { PI, multiply }; // 导出多个变量

3、导入语法

import { PI, multiply } from "./math.js"; // 必须用导出时的名称
import { multiply as mul } from "./math.js"; // 使用别名
import * as MathUtils from "./math.js"; // 导入所有命名导出为对象

4、示例

// math.js
export const PI = 3.14;
export function multiply(a, b) {
  return a * b;
}

// app.js
import { PI, multiply } from "./math.js";
console.log(PI); // 3.14
console.log(multiply(2, 3)); // 6

三、混合导出

1、特点

• 同一模块中 同时存在默认导出和命名导出。
• 导入时需分别处理默认导出和命名导出。

2、导出语法

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

// 命名导出
export const PI = 3.14;
export function multiply(a, b) {
  return a * b;
}

3、导入语法

// 方式1：分别导入
import add from "./math.js"; // 默认导出
import { PI, multiply } from "./math.js"; // 命名导出

// 方式2：同时导入
import add, { PI, multiply } from "./math.js";

// 方式3：别名导入默认导出
import { default as myAdd, PI } from "./math.js";

4、示例

// math.js
export default function add(a, b) {
  return a + b;
}
export const PI = 3.14;

// app.js
import add, { PI } from "./math.js";
console.log(add(1, 2)); // 3
console.log(PI); // 3.14

四、对比总结

特性	默认导出	命名导出	混合导出
导出数量	每个模块仅一个	多个	一个默认导出 + 多个命名导出
导出语法	export default ...	export { name1, name2 }	同时使用两种语法
导入名称	可自定义名称	必须匹配名称（或用别名 as）	默认导出可自定义，命名需匹配
典型场景	模块的主功能（如组件、类）	辅助函数、常量、工具方法	模块既有核心功能又有辅助工具
Tree-Shaking	不易优化（通常整体导入）	易于优化（按需导入）	默认导出不易优化，命名导出可优化

五、最佳实践

1. 优先使用命名导出： 有利于 Tree-Shaking（删除未使用代码），提高代码优化空间。
2. 默认导出用于“主功能”： 例如 Vue/React 组件、类或模块的核心功能。
3. 避免过度混合导出： 混合导出可能导致导入语句冗长，建议按功能拆分模块。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24