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 中国語 Web サイトの他の関連記事を参照してください。