ホームページ > ウェブフロントエンド > jsチュートリアル > エクスポート const とエクスポート デフォルト: どの ES6 モジュール エクスポートをいつ使用するか?

エクスポート const とエクスポート デフォルト: どの ES6 モジュール エクスポートをいつ使用するか?

Patricia Arquette
リリース: 2024-11-26 09:48:09
オリジナル
845 人が閲覧しました

Export const vs. export default: When to Use Which ES6 Module Export?

ES6 のエクスポート const とエクスポート デフォルトを使用したエクスポート

JavaScript ES6 モジュールでは、値をエクスポートする主な方法が 2 つあります。 const とエクスポートのデフォルト。これらのエクスポート メカニズムは、独特の機能と使用例を提供します。

名前付きエクスポート (export const)

export const は、名前付き定数をエクスポートするために使用されます。これにより、それぞれが独自の一意の識別子を持つ複数の特定の値をモジュールからエクスポートできます。このようなエクスポートをインポートするには、中括弧内に目的の変数名を指定します。

// Exporting
export const myItem = 'Exported value';

// Importing
import { myItem } from 'myItem';
ログイン後にコピー

デフォルト エクスポート (エクスポート デフォルト)

エクスポート デフォルトは、デフォルトのエクスポートに使用されます。価値。これはモジュールごとに 1 回のみ実行できます。デフォルトのエクスポートをインポートするときは、任意のエイリアスを付けることができます。

// Exporting
export default { name: 'John Doe', age: 30 };

// Importing
import MyDefaultExport from 'myItem';
ログイン後にコピー

ユースケース

次のリストは、エクスポート const を選択するための一般的なガイドラインを示しています。エクスポートのデフォルト:

  • Namedエクスポート:

    • モジュールから複数の特定の値をエクスポートする必要がある場合は、export const を使用します。
  • デフォルトのエクスポート:

    • エクスポートする場合は、エクスポートのデフォルトを使用します。モジュールからの単一のプライマリ値。
    • 特定のインポートを予期するレガシー コードをサポートする必要がある場合は、エクスポート デフォルトを使用します (例: デフォルト エクスポートとして React-dom をインポートする)。

追加機能

コア機能に加えて、エクスポートconst とエクスポートのデフォルトは、いくつかの追加機能を提供します。

  • 名前空間のインポート: import * as を使用して、モジュールからすべてのエクスポートをオブジェクトとしてインポートできます。
  • 部分インポート: 同じ名前付きインポートとデフォルトのインポートを組み合わせて使用​​できます。ステートメント。
  • インポートの名前変更: as キーワードを使用して、インポートされた値の名前を変更できます。

エクスポートのデフォルトは、次の名前を持つ名前付きエクスポートの特殊なケースであることに注意してください。 "デフォルト。"これにより、デフォルト値をインポートする方法をある程度柔軟に行うことができます。

以上がエクスポート const とエクスポート デフォルト: どの ES6 モジュール エクスポートをいつ使用するか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート