JavaScript 匯出類

Anika Tabassum Era 2024年2月15日
  1. JavaScript 中 export 語句的型別
  2. JavaScript 中 Default 匯出的示例
  3. JavaScript 中 Named 匯出的示例
JavaScript 匯出類

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

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

JavaScript 中 export 語句的型別

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

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

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

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

但是為了與 ES6 相容,我們需要將模組重新命名為 test.mjsNew.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);

輸出:

命名匯出示例

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

相關文章 - JavaScript Class