在 JavaScript 中，export 是一個關鍵字，用于將模塊中的變量、函數、類等導出，以便其他模塊可以導入和使用。export default 和 export（非默認導出）是兩種不同的導出方式，它們在使用場景和語義上有明顯的區別。

1. export default

作用

export default 用于導出模塊的默認值。每個模塊只能有一個默認導出。默認導出可以是一個變量、函數、類或對象。

特點

• 單個默認導出：每個模塊只能有一個默認導出。
• 導入時無需指定名稱：導入時可以使用任意名稱，因為默認導出的名稱在導出時已經確定。

使用方法

導出：

// myModule.js
export default function myFunction() {console.log('Hello, world!');
}

導入：

// main.js
import myFunction from './myModule.js';myFunction(); // 輸出: Hello, world!

適用場景

• 單個功能模塊：當模塊只提供一個主要功能（如一個函數、一個類或一個對象）時，使用 export default。
• 簡潔性：默認導出在導入時不需要指定名稱，代碼更簡潔。

2. export（非默認導出）

作用

export 用于導出模塊中的多個值（如變量、函數、類等）。每個模塊可以有多個非默認導出。

特點

• 多個導出：每個模塊可以有多個非默認導出。
• 導入時需要指定名稱：導入時需要使用與導出時相同的名稱。

使用方法

導出：

// myModule.js
export function myFunction() {console.log('Hello, world!');
}export const myVariable = 42;export class MyClass {constructor(name) {this.name = name;}
}

導入：

// main.js
import { myFunction, myVariable, MyClass } from './myModule.js';myFunction(); // 輸出: Hello, world!
console.log(myVariable); // 輸出: 42
const instance = new MyClass('Vue'); // 創建 MyClass 的實例

適用場景

• 多個功能模塊：當模塊提供多個功能（如多個函數、變量或類）時，使用非默認導出。
• 命名空間：非默認導出允許你在導入時明確指定每個導出的名稱，避免命名沖突。

3. export 的含義

export 是 JavaScript 模塊系統中的一個關鍵字，用于將模塊中的值導出，以便其他模塊可以導入和使用。export 的主要作用是：

• 導出值：將模塊中的變量、函數、類等導出。
• 模塊化：將代碼分割成模塊，便于復用和維護。

4. 默認導出與非默認導出的對比

特點	export default	export（非默認導出）
導出數量	每個模塊只能有一個默認導出	每個模塊可以有多個非默認導出
導入方式	導入時可以使用任意名稱	導入時需要使用與導出時相同的名稱
適用場景	單個功能模塊	多個功能模塊
代碼簡潔性	導入時代碼更簡潔	導入時需要明確指定名稱，避免沖突

5. 使用場景總結

• export default：

  • 適用于模塊只提供一個主要功能。
  • 導入時不需要指定名稱，代碼更簡潔。
  • 適用于單個功能模塊，如工具函數、配置對象等。

• export（非默認導出）：

  • 適用于模塊提供多個功能。
  • 導入時需要明確指定名稱，避免命名沖突。
  • 適用于多個功能模塊，如工具庫、配置文件等。

6. 總結

export 是 JavaScript 模塊系統中的關鍵字，用于將模塊中的值導出。export default 和 export（非默認導出）是兩種不同的導出方式，各有其特點和適用場景。根據模塊的功能和需求選擇合適的導出方式，可以更好地組織代碼，提高代碼的可讀性和可維護性。