JavaScript中 import 和 export 用于模塊化編程，正確使用需注意以下要點：1.命名導出通過 export 關鍵字導出多個變量、函數或對象，導入時用 {} 按名稱引入；2.默認導出使用 export default 導出單個主要功能或組件，導入時可自定義名稱；3.混合導入時先寫默認導出再寫命名導出；4.路徑可省略擴展名并支持別名配置；5.按需導入優于全部導入以提升性能；6.避免循環依賴可通過重構代碼解決；7.動態導入通過 import() 函數實現延遲加載。
在 JavaScript 中，import 和 export 是模塊化編程的核心語法，用于在一個文件中導出變量、函數或對象，并在另一個文件中引入使用。它們的用法并不復雜，但細節容易搞混，尤其是剛開始接觸模塊化開發的時候。
下面從幾個常見使用場景出發，講講怎么正確使用 import 和 export。
常見的 export 用法
你可以通過幾種不同的方式導出內容，最常用的是命名導出和默認導出。
// utils.js export function add(a, b) { return a + b; } export const PI = 3.14;
或者寫成這樣更清晰一點：
function add(a, b) { return a + b; } const PI = 3.14; export { add, PI };
- 默認導出（Default Export）
如果你想一個文件只對外暴露一個主要功能或組件，可以用默認導出：
// math.js export default function multiply(a, b) { return a * b; }
也可以導出一個類、對象或者值，比如 React 組件經常這樣寫：
// Button.js export default function Button() { return <button>Click me</button>; }
import 的基本寫法
導入的方式要根據導出的方式來決定，否則很容易報錯。
- 導入命名導出的內容
// main.js import { add, PI } from './utils.js'; console.log(add(2, 3)); // 輸出 5 console.log(PI); // 輸出 3.14
注意：這里的 {} 中的名字必須和導出時的名稱一致。
- 導入默認導出的內容
// main.js import multiply from './math.js'; console.log(multiply(2, 3)); // 輸出 6
默認導出可以隨便起名，比如也可以寫成：
import calc from './math.js';
- 同時導入多個類型導出的內容
如果你的模塊既有命名導出又有默認導出，可以這樣寫：
// module.js export default function () { /* ... */ } export const version = '1.0';
然后導入：
import myFunc, { version } from './module.js';
一些實用技巧和注意事項
-
路徑別名和擴展名 在實際項目中，特別是使用構建工具（如 webpack、Vite）時，可以省略 .js 擴展名：
import Button from './components/Button';
有些項目還會配置路徑別名，比如用 @ 表示 src/ 目錄：
import Header from '@/components/Header';
-
按需導入 vs 全部導入 可以一次性導入所有命名導出內容：
import * as Utils from './utils.js'; console.log(Utils.add(1, 2)); console.log(Utils.PI);
這樣雖然方便，但在大型項目中可能會影響性能，建議按需導入。
-
動態導入（Dynamic Import）
如果你想按需加載某個模塊（比如點擊按鈕才加載），可以用 import() 函數：button.addEventListener('click', async () => { const module = await import('./lazyModule.js'); module.doSomething(); });
基本上就這些。剛開始用的時候容易混淆命名導出和默認導出的區別，多練幾次就熟悉了。只要注意名字對齊、路徑正確、合理使用默認導出，問題就不大。
