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';
  

总结表格

实际使用场景

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

到此这篇关于ES6模块导出export default与export区别的文章就介绍到这了,更多相关ES6模块导出export default与export内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！