JavaScript 模組的匯出與匯入：Named Export 與 Default Export

更新日期： 2024 年 11 月 7 日

在 JavaScript 中，模組化的程式碼管理方式，可以讓開發者輕鬆地將函數或變數從一個檔案匯出到另一個檔案，並在需要時匯入使用。

通常，JavaScript 提供了兩種主要的匯出方式：named export 和 default export。

這兩種方式各有特點，對應的匯入方式也有所不同。

本文將介紹這兩種匯出方式及其對應的匯入方法，並說明它們之間的差異。

Named Export

什麼是 Named Export？

named export 是指在匯出時，將函數或變數的名稱一併匯出，允許從同一個模組檔案中匯出多個函數或變數。

這種方式在一個模組中可以進行多次。

語法範例

在 a.js 中，我們可以使用 named export 將多個函數和變數匯出：

function abc() {
  return 123;
}

const a = 1;

export { abc, a };

這段代碼中，abc 函數和變數 a 都是以 named export 的方式被匯出，可以在其他檔案中單獨引入。

對應的匯入方式：Named Import

使用 named export 的函數或變數，需要在匯入時使用對應的名稱進行引入：

import { abc, a } from "./a.js";

這種 import 方法稱為 named import，大括號 {} 中需要精確地匹配 a.js 中匯出的名稱。

若使用錯誤的名稱，將會導致匯入失敗並拋出錯誤。

特點

• 可以從同一個模組檔案中多次匯出不同的函數或變數。
• 匯入時必須使用正確的名稱，不能多加或少加，也不能更改名稱，否則會出現錯誤。

Default Export

什麼是 Default Export？

default export 是指匯出模組中的默認值，一個模組檔案中只能有一個 default export。

它通常用於匯出模組中最主要的功能，且匯入時不需要使用大括號，名稱可以自行定義。

語法範例

在 a.js 中，我們可以使用 default export 將某個函數或變數設為默認匯出：

function c() {
  return 456;
}

export default c;

這段代碼中，c 函數被作為 default export 匯出，這意味著在匯入時，可以使用任意名稱來代表這個默認匯出的函數。

對應的匯入方式：Default Import

匯入 default export 的語法不需要使用大括號，並且可以使用任何名稱來命名：

import c from "./a.js";

這段代碼中，即使 a.js 中的函數原本叫 c，在匯入時也可以使用其他名稱代替，如：

import mainFunction from "./a.js";

這樣，mainFunction 就是 a.js 中 c 函數的別名。

特點

• 一個模組檔案中只能有一個 default export。
• 匯入時不需要使用大括號 {}，可以隨意更改匯入時使用的名稱。
• 如果模組中同時有 default export 和 named export，這兩種匯入方式可以結合使用。

Named Import 與 Default Import 的差異

Named Import 的特點

• 必須使用大括號 {} 包裹匯入的名稱。
• 匯入的名稱必須與模組中 named export 的名稱一致，不能隨意更改。
• 若嘗試匯入不存在的函數或變數，將會拋出錯誤。

// 假設 a.js 只匯出了 abc 和 a
import { abc, b } from "./a.js"; 
// 會導致錯誤，因為 b 並未在 a.js 中匯出

Default Import 的特點

• 不使用大括號 {} 包裹匯入的名稱。
• 匯入的名稱可以自行命名，與 default export 的名稱無關。
• 匯入時，即使使用不存在的名稱，程式也不會因此拋出語法錯誤（但這樣做無實際意義）。

import mainFunction from "./a.js"; 
// 即使 a.js 中的默認匯出叫 c，但這裡可以隨意命名為 mainFunction

總結比較

什麼是模組？

在這些匯出與匯入過程中，我們可以將 a.js 視為一個「模組」，因為它提供了某些功能（函數、變數）供其他檔案引用。

模組化使得程式碼更具組織性，開發者能夠將不同功能拆分到不同檔案中，然後在需要時進行匯入，從而達到代碼的重用和管理。

總結

JavaScript 提供的 named export 和 default export 是實現模組化的兩種方式，各有其特點與應用場景。

named export 可以讓我們從模組中匯出多個函數或變數，但匯入時需要精確匹配名稱。

而 default export 則更適合匯出模組中的主要功能，並且匯入時具有更大的靈活性。

理解這些差異，有助於我們在開發過程中，根據需求選擇合適的匯出與匯入方式，從而提升代碼的可讀性和可維護性。