JavaScript 中「匯出預設值」的目的和用法是什麼？

理解JavaScript 中的「預設匯出」

ES6 的出現引入了新的模組系統，引入了「預設匯出」等概念。本文深入探討了此語法的目的和用法。

了解匯出預設值

「匯出預設值」可以為模組建立預設匯出。這意味著在匯入模組時，開發人員無需明確指定變數名稱即可存取此預設導出。

例如，在提供的 SafeString.js 範例中：

<code class="javascript">// Build out our basic SafeString type
function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

export default SafeString;</code>

此程式碼定義一個 SafeString 類，並使用「export default SafeString」將其匯出為預設匯出。

預設導出的替代語法

而「export default」是首選語法預設導出，有其他方法可以實現相同的結果：

• 命名默認導出：

  <code class="javascript">export default {
  name: "John",
  age: 30
  };</code>

• 類默認導出：

  <code class="javascript">export default class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  }</code>

• 函數默認導出：

  <code class="javascript">export default function sayHello() {
  console.log("Hello World!");
  }</code>

導入默認導出

導入具有默認導出的模組時，使用import 語句時可以省略大括號：

<code class="javascript">import SafeString from "SafeString.js";

// ... use SafeString</code>

結論

「匯出預設值」是ES6 模組系統的一個強大功能，它簡化了從模組導出和導入預設值的過程。了解其用法對於有效利用 JavaScript 模組至關重要。

以上是JavaScript 中「匯出預設值」的目的和用法是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！