JavaScript模块开发中export default和export的区别

在JavaScript ES6模块系统中，export default和export的区别主要体现在导出方式、导入语法及使用场景上：

1. 导出数量

• export default：一个模块只能有一个默认导出。

• export：一个模块可以有多个命名导出。

2. 导入语法

• 默认导出（export default）：

  // 导出
  export default function() {}; 
  // 或
  const value = 42;
  export default value;
  
  // 导入（可自定义名称）
  import customName from './module';

• 导入时无需花括号，且名称可自定义。

• 命名导出（export）：

  // 导出
  export const name = 'Alice';
  export function func() {};
  
  // 导入（名称需匹配或用别名）
  import { name, func as myFunc } from './module';

3. 导出值的类型

export default：可直接导出匿名值（如匿名函数、类、字面量），无需预先声明。

export default 42; // 直接导出值

export：需导出已命名的声明（变量、函数、类），或在导出时显式指定名称。

// 必须命名
export const x = 10;
// 或导出时声明
export { y as newName };

4. 混合导出与导入

• 模块可同时包含默认导出和命名导出：

// 导出
export const data = { version: 1 };
export default class Model {};

// 导入
import Model, { data } from './module';

 默认导入在前，命名导入在后，用逗号分隔。

5. 底层表现

• 默认导出本质是导出名为default的变量，可通过以下方式导入：

  import { default as customName } from './module';

• 动态导入时，默认导出位于模块对象的default属性：

  const module = await import('./module');
  console.log(module.default); // 默认导出内容
  console.log(module.namedExport); // 命名导出内容

6. 使用场景

• export default：适用于模块主要功能的导出（如React组件、主类）。

• export：适用于导出多个辅助功能或配置（如工具函数、常量）。

常见错误

• 多个默认导出：导致语法错误。

• 导入命名导出时遗漏花括号：结果为undefined。

• 命名拼写错误：导致引用失败。

总结

特性	export default	export
导出数量	1个/模块	多个/模块
导入语法	import name from 'module'	import { name } from 'module'
名称灵活性	可自定义	需匹配或用别名
匿名导出	支持	不支持（需命名）
适用场景	主功能导出	多辅助功能导出

根据模块设计需求选择合适的导出方式，确保代码结构清晰且易于维护。