export default 是 JavaScript 模块的默认导出机制，每个模块只能有一个，默认导入时无需大括号且可自定义名称；它支持函数、类、对象、基本类型等导出形式，常用于主功能或主类的暴露，可与命名导出共存，动态导入时需通过 .default 访问。
在JavaScript中，export default 是一种常用的模块导出方式，它允许你为模块指定一个默认导出值。这样其他文件在导入时可以使用任意名称引用该值，提高了灵活性和可读性。掌握 export default 的使用技巧，有助于写出更清晰、易维护的代码。
什么是 export default？
每个模块可以有一个默认导出。与命名导出（named exports）不同，export default 只能存在一个，并且在导入时不需要用大括号。
例如：// math.js
export default function add(a, b) {
return a + b;
}
<p>// main.js
import myAdd from './math.js';
console.log(myAdd(2, 3)); // 输出 5
这里导入时使用的 myAdd 是自定义名称，完全合法，因为默认导出不要求名称一致。
支持的默认导出类型
你可以用 export default 导出多种类型的值，包括函数、类、对象、基本类型等。
- 导出函数：适合工具函数或主要逻辑入口
- 导出类：常用于组件或封装对象
- 导出对象字面量：适合配置或常量集合
- 导出基本值：如字符串、数字，适用于主题、版本号等
// Button.js
export default class Button {
constructor(text) {
this.text = text;
}
render() {
return `<button>${this.text}</button>`;
}
}
<p>// 使用
import Button from './Button.js';
const btn = new Button("点击我");
结合命名导出使用
你可以同时使用默认导出和命名导出，但要避免混淆。
示例：
// utils.js
export default function log(msg) {
console.log('Log:', msg);
}
<p>export const PI = 3.14159;
export function square(x) {
return x * x;
}</p><p>// 使用
import log, { PI, square } from './utils.js';
log('启动'); // 默认导入
console.log(PI); // 命名导入
console.log(square(4));
注意：默认导入写在前面，命名导入用大括号包裹。
动态导入和默认导出的配合
在需要按需加载的场景中，export default 配合 import() 更加直观。
async function loadComponent() {
const Calculator = await import('./Calculator.js');
return Calculator.default; // 注意访问 .default
}
由于默认导出被包装在模块对象的 default 属性中，动态导入后需显式取值。
基本上就这些。合理使用 export default 能让模块接口更简洁，尤其适合作为主功能或主类的导出方式。只要注意别滥用，保持模块职责单一，就能发挥它的优势。
