前言

在 JavaScript（包括 React 組件）中，export default function Profile() {} 和 export function Profile() {} 是兩種不同的導(dǎo)出方式，核心區(qū)別在于導(dǎo)出類型和導(dǎo)入方式，具體如下：

1. 導(dǎo)出類型不同

• export default function Profile() {} ：這是「默認導(dǎo)出（default export）」。一個模塊（文件）中只能有一個默認導(dǎo)出，可以理解為 “模塊的主要導(dǎo)出內(nèi)容”。默認導(dǎo)出時，函數(shù)名（Profile）是可選的（可以寫成匿名函數(shù) export default function() {}），因為導(dǎo)入時可以自定義名稱。
• export function Profile() {} ：這是「命名導(dǎo)出（named export）」。一個模塊中可以有多個命名導(dǎo)出，每個導(dǎo)出都有明確的名稱（這里是 Profile），必須通過名稱來導(dǎo)入。

2. 導(dǎo)入方式不同

這是兩者最直觀的區(qū)別，導(dǎo)入時的語法完全不同：

（1）默認導(dǎo)出的導(dǎo)入方式：

可以自定義導(dǎo)入名稱（無需與導(dǎo)出時的名稱一致），且不需要用大括號 {} 包裹。

// 導(dǎo)出（默認導(dǎo)出）
export default function Profile() {}

// 導(dǎo)入（可自定義名稱，比如 MyProfile）
import MyProfile from './Profile'; 

（2）命名導(dǎo)出的導(dǎo)入方式：

必須使用與導(dǎo)出時完全一致的名稱，且必須用大括號 {} 包裹（稱為 “解構(gòu)導(dǎo)入”）。

// 導(dǎo)出（命名導(dǎo)出）
export function Profile() {}

// 導(dǎo)入（必須用 { Profile }，名稱必須一致）
import { Profile } from './Profile'; 

如果想自定義名稱，需要用 as 關(guān)鍵字重命名：

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

3. 其他區(qū)別

• 多個導(dǎo)出的支持：

  • 默認導(dǎo)出：一個文件只能有 1 個 默認導(dǎo)出。

  • 命名導(dǎo)出：一個文件可以有 多個 命名導(dǎo)出，例如：

    // 多個命名導(dǎo)出
    export function Profile() {}
    export function Settings() {}
    export const version = '1.0';
    

    導(dǎo)入時可以按需導(dǎo)入：

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

• 混合使用：一個模塊可以同時包含「一個默認導(dǎo)出」和「多個命名導(dǎo)出」，例如：

  // 默認導(dǎo)出（1個）
  export default function Profile() {}
  
  // 命名導(dǎo)出（多個）
  export function Settings() {}
  export const version = '1.0';
  

  導(dǎo)入時需分別處理：

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

總結(jié)表格

實際使用場景

• 默認導(dǎo)出：通常用于模塊的 “主內(nèi)容”，比如一個組件文件的核心組件（如 Profile.js 中默認導(dǎo)出 Profile 組件），導(dǎo)入時更簡潔。
• 命名導(dǎo)出：通常用于導(dǎo)出多個相關(guān)的工具函數(shù)、組件或常量（如一個 utils.js 文件導(dǎo)出多個工具函數(shù)），導(dǎo)入時可以按需選擇，避免引入不必要的內(nèi)容。

到此這篇關(guān)于ES6模塊導(dǎo)出export default與export區(qū)別的文章就介紹到這了,更多相關(guān)ES6模塊導(dǎo)出export default與export內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論