ES6导入默认导出与命名导出

发布于 2025-02-07  487 次阅读


在ES6模块系统中,默认导出(Default Export)和命名导出(Named Export)是两种不同的导出机制,它们各自独立工作。

当你从一个模块中导入默认导出时,你只能获得该模块中标记为默认导出的那一个绑定。默认导出可以是函数、类、对象或原始值(但通常包装在对象或函数中),并且每个模块只能有一个默认导出。

例如,假设有一个模块文件 module.js,它有一个默认导出和一个命名导出:

// module.js
export const namedExport = 'I am a named export';
export default function defaultExportFunction() {
  return 'I am the default export';
}

在另一个模块文件中,如果你只想导入默认导出,你可以这样做:

// main.js
import defaultFunction from './module.js';

console.log(defaultFunction()); // 输出 'I am the default export'
// 注意:namedExport 在这里是不可用的

在这个例子中,main.js 只导入了 module.js 中的默认导出函数 defaultExportFunction。命名导出 namedExport 没有被导入,因此在 main.js 中是不可用的。

如果你想要同时导入默认导出和命名导出,你需要在导入语句中明确指定它们:

// main.js
import defaultFunction, { namedExport } from './module.js';

console.log(defaultFunction()); // 输出 'I am the default export'
console.log(namedExport);       // 输出 'I am a named export'

在这个修改后的例子中,main.js 同时导入了 module.js 中的默认导出和命名导出。

下次见面会是什么时候呢?
最后更新于 2025-02-07