ES6 模块导出 export default 与 export 的区别？在 JavaScript中，export d

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

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

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

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

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

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

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

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

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

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

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

多个导出的支持：

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

// 多个命名导出
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` 重命名）