export default 是 JavaScript 模块的默认导出机制，每个模块只能有一个，默认导入时无需大括号且可自定义名称；它支持函数、类、对象、基本类型等导出形式，常用于主功能或主类的暴露，可与命名导出共存，动态导入时需通过 .default 访问。
在JavaScript中，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 能让模块接口更简洁，尤其适合作为主功能或主类的导出方式。只要注意别滥用，保持模块职责单一，就能发挥它的优势。
以上就是JS模块导出模式_Export Default技巧的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
762
