資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究JavaScript 中的預設匯出與命名匯出
在本文中，我們將學習 JavaScript 中預設匯出和命名匯出的區別，以及如何使用它們來有效地組織程式碼結構。
在 JavaScript 中，我們可以使用預設匯出和命名匯出，以便為不同的程式碼片段建立單獨的檔案或模組。這有助於在很大程度上提高程式碼的可讀性和樹狀抖動。
預設匯出 |
命名匯出 |
|---|---|
預設匯出允許我們將單個值或函式匯出為模組的預設匯出。 |
命名匯出允許我們從模組中匯出多個值或函式。 |
使用預設匯出的檔案中，只有一個值可用。 |
我們可以使用使用命名匯出的檔案中一個或多個值。 |
讓我們看一些示例和方法來更好地理解這個概念 -
示例 1 - 使用預設匯出
在這個例子中，我們將 -
建立一個名為 module.js 的模組，該模組匯出一個預設值（message）。
在 script.js 中，我們將使用 import 語句匯入預設匯出並將其分配給變數 message。然後將該值記錄到控制檯。
檔名 - index.html
<html> <head> <title>Default Export Example</title> <script type="module" src="module.js"></script> <script type="module" src="main.js"></script> </head> <body> <h1>Default Export Example</h1> </body> </html>
檔名 - module.js
// module.js const message = 'Hello, World!'; export default message;
檔名 - main.js
// main.js import message from './module.js'; console.log(message); // Output: Hello, World!
輸出
結果將類似於下圖。
示例 2 - 使用命名匯出
在這個例子中，我們將 -
建立一個名為 module.js 的模組，該模組匯出兩個命名函式（add 和 subtract）。
在 script.js 中，我們將使用花括號 {} 匯入這些命名匯出，並相應地呼叫這些函式。
檔名 - index.html
<html> <head> <title>Named Export Example</title> <script type="module" src="module.js"></script> <script type="module" src="main.js"></script> </head> <body> <h1>Named Export Example</h1> </body> </html>
檔名 - module.js
// module.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
檔名 - main.js
// main.js
import { add, subtract } from './module.js';
console.log(add(2, 3)); // Output: 5
console.log(subtract(5, 2)); // Output: 3
輸出
結果將類似於下圖。
結論
預設匯出和命名匯出為在 JavaScript 模組中匯出和匯入值提供了不同的方法。預設匯出對於提供單個主要匯出很有用，而命名匯出允許我們從 JavaScript 模組中匯出多個值。這些特性使我們能夠在程式碼中引入模組化程式設計，並在很大程度上提高程式碼的可讀性和樹狀抖動。我們學習了 JavaScript 中預設匯出和命名匯出的區別，使用了不同的方法，並透過一些示例進行了說明。
824 次瀏覽
