JavaScript 匯出類

1. JavaScript 中 export 語句的型別
2. JavaScript 中 Default 匯出的示例
3. JavaScript 中 Named 匯出的示例

JavaScript 匯出/匯入語句適用於 JavaScript 模組的內容在另一個模組中重用的情況。

可以有許多方法來執行任務，從單個模組到模組的細節傳輸以及從子模組到父模組的聚合。

JavaScript 中 export 語句的型別

JavaScript 中的 export/import 語句有兩種型別。一種是命名匯出，另一種是預設匯出。

通常，在 Default 類別中匯出時，我們不使用花括號來包裝基元或物件。但是在 Named 匯出的情況下，我們使用花括號來包裝多個物件或原語。

Default 僅處理從模組匯出的一項，而 Named 可以取零或多於一。

我們將需要一個檔案或模組來跟進示例。我們將它們命名為 test.js 和 New.js。

但是為了與 ES6 相容，我們需要將模組重新命名為 test.mjs 和 New.mjs。有多種方法可以執行此轉換，但這很容易。

在這裡，我們將看到一個具有 Default 類別的例項和另一個具有 Named 類別的例項。讓我們跳到下一節。

JavaScript 中 Default 匯出的示例

在此示例中，我們將在 test.mjs 中啟動一個類 User，我們將匯出該類。User 類只有最喜歡的水果的名稱。

接下來，在宣告類的建構函式之後，讓我們進入 New.mjs 模組並匯入該類。我們還將通過設定一些值來觸發匯出的模組工作。

讓我們檢查一下這個例子。

// test.mjs
export default class User {
  constructor(fruit) {
    this.fruit = fruit;
  }
}

// New.mjs
import User from './test.mjs';
var x = new User('Mango');
console.log(x);

輸出：

JavaScript 中 Named 匯出的示例

我們將為此例項採用一個帶有虛擬數學的函式和一個變數。因此，我們將在要匯出的每個資料之前宣告 export 語句。

稍後，在我們的父模組 New.mjs 中，我們將根據選擇匯入和修改值。此執行緒中提供了正式的宣告性解釋。

程式碼片段：

// test.mjs
export function square(x) {
  return x * x;
}
export var y = Math.PI * 5;

// New.mjs
import {square, y} from './test.mjs';
var x = 2;
console.log(square(x));
console.log(y);

輸出：