什么时候 export default，什么时候export {}

[981377660LMT]

在 JavaScript 和 TypeScript 中，export default 和 export {}（命名导出）是两种常见的模块导出方式，它们各有适用场景：

export default

export default 用于导出模块中的“默认”导出。每个模块只能有一个默认导出。这种方式适用于模块的主要功能或当你希望从模块导出单个实体时。

优点：

• 简化导入语法，不需要使用大括号。
• 明确指出模块的主要或最常用的功能。

使用场景：

• 当模块只导出一个实体（类、函数、对象等）时。
• 当有一个明确的主要功能需要导出时。

示例：

// message.js
const message = "Hello, world!";
export default message;

导入时：

import message from './message.js';

export {}（命名导出）

命名导出允许你从同一个模块导出多个实体。使用者需要通过相同的名称来导入它们，并且必须使用大括号。

优点：

• 提供了更灵活的导入方式，可以从一个模块中导出和导入多个实体。
• 有助于保持代码的清晰和组织。

使用场景：

• 当模块包含多个需要导出的实体时。
• 当你希望导出的实体在导入时保持其名称时。

示例：

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

导入时：

import { add, subtract } from './utils.js';

总结

• 使用 export default 当你的模块只导出一个主要的功能或实体。
• 使用命名导出 export {} 当你的模块包含多个需要导出的实体，或者当你希望导出的实体在导入时保持其名称。

在实际开发中，你可以根据模块的内容和使用场景选择最合适的导出方式。有时，你甚至可以在同一个模块中同时使用 export default 和命名导出，以提供更多的灵活性和便利性。