ES6 模块导出 export default 与 export 的区别？

在 JavaScript（包括 React 组件）中，export default function Profile() {} 和 export function Profile() {} 是两种不同的导出方式，核心区别在于导出类型 和导入方式，具体如下：

1. 导出类型不同

• export default function Profile() {} ：这是「默认导出（default export）」。一个模块（文件）中只能有一个默认导出 ，可以理解为 "模块的主要导出内容"。默认导出时，函数名（Profile）是可选的（可以写成匿名函数 export default function() {}），因为导入时可以自定义名称。
• export function Profile() {} ：这是「命名导出（named export）」。一个模块中可以有多个命名导出 ，每个导出都有明确的名称（这里是 Profile），必须通过名称来导入。

2. 导入方式不同

这是两者最直观的区别，导入时的语法完全不同：

（1）默认导出的导入方式：

可以自定义导入名称 （无需与导出时的名称一致），且不需要用大括号 {} 包裹。

// 导出（默认导出）
export default function Profile() {}

// 导入（可自定义名称，比如 MyProfile）
import MyProfile from './Profile'; 

（2）命名导出的导入方式：

必须使用与导出时完全一致的名称 ，且必须用大括号 {} 包裹（称为 "解构导入"）。

// 导出（命名导出）
export function Profile() {}

// 导入（必须用 { Profile }，名称必须一致）
import { Profile } from './Profile'; 

如果想自定义名称，需要用 as 关键字重命名：

import { Profile as MyProfile } from './Profile'; 

3. 其他区别

• 多个导出的支持：

  • 默认导出：一个文件只能有 1 个 默认导出。

  • 命名导出：一个文件可以有 多个 命名导出，例如：

    // 多个命名导出
    export function Profile() {}
    export function Settings() {}
    export const version = '1.0';

    导入时可以按需导入：

    import { Profile, Settings } from './components';

• 混合使用：一个模块可以同时包含「一个默认导出」和「多个命名导出」，例如：

  // 默认导出（1个）
  export default function Profile() {}
  
  // 命名导出（多个）
  export function Settings() {}
  export const version = '1.0';

  导入时需分别处理：

  import Profile, { Settings, version } from './components';

总结表格

特性	export default function Profile() {}（默认导出）	export function Profile() {}（命名导出）
模块中数量限制	只能有 1 个	可以有多个
导出时名称	可选（可匿名）	必须有明确名称
导入时语法	import 自定义名称 from '路径'	import { 原名称 } from '路径'
导入时名称灵活性	可自定义名称	必须与导出名称一致（可通过 as 重命名）

实际使用场景

• 默认导出 ：通常用于模块的 "主内容"，比如一个组件文件的核心组件（如 Profile.js 中默认导出 Profile 组件），导入时更简洁。
• 命名导出 ：通常用于导出多个相关的工具函数、组件或常量（如一个 utils.js 文件导出多个工具函数），导入时可以按需选择，避免引入不必要的内容。