目次
ES6 のエクスポート const とエクスポート デフォルトの比較
export const (名前付きエクスポート)
export default (デフォルト エクスポート)
使用法と相違点
Namespace Import
Notes
ホームページ ウェブフロントエンド jsチュートリアル ES6 でのエクスポート const とエクスポート デフォルト: いつどちらを使用するか?

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

Nov 30, 2024 am 01:15 AM

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

ES6 のエクスポート const とエクスポート デフォルトの比較

ES6 では、モジュールのエクスポートとインポートにより、コードの編成と再利用が可能になります。 2 つの一般的なエクスポート構文は、export const とexportdefault です。どちらも値をエクスポートするという目的を果たしますが、異なる特徴と使用例があります。

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

export const は名前付き変数または定数をエクスポートし、複数の名前付きエクスポートを許可します。単一のファイル。名前付きエクスポートをインポートするには、中括弧で囲まれた特定の名前を指定する必要があります。

// export named variables
export const myItem1 = "item1";
export const myItem2 = "item2";
ログイン後にコピー
// import named exports
import { myItem1, myItem2 } from "myModule";
ログイン後にコピー

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

export default は、ファイルから 1 つのデフォルト値をエクスポートします。デフォルトのエクスポートをインポートする場合、カスタム名を割り当てることができます。

// export default value
export default "Default Value";
ログイン後にコピー
// import default export as custom name
import CustomDefaultName from "myModule";
ログイン後にコピー

使用法と相違点

エクスポート const とエクスポート デフォルトの主な違いは、使用シナリオにあります。

  • export const を使用する場合: 複数の名前付き値をエクスポートする場合定数、クラス、関数などのファイルから。
  • エクスポート デフォルトを使用する場合: 単一のデフォルト値、またはコンポーネントやモジュールなどのモジュールの主要な機能をエクスポートする場合

Namespace Import

名前付きインポートとデフォルトのインポートに加えて、次からすべてのエクスポートをインポートできます。名前空間インポート構文を使用したファイル:

import * as myModule from "myModule";
ログイン後にコピー

これにより、エクスポートされたすべての値が myModule オブジェクトにインポートされ、ドット表記を使用して名前付きエクスポートにアクセスできるようになります。

Notes

  • デフォルトのエクスポートには、中かっこを使用してインポート中に名前を付けることができます: { デフォルトとして myDefault }.
  • 「デフォルト」という名前にもかかわらず、デフォルトのエクスポートは依然としてエクスポートという名前であり、特定の名前でインポートできます。
  • デフォルトのエクスポートは構文が若干簡潔ですが、常に適切であるとは限りません。あらゆるユースケース。

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

例JSONファイルの例 例JSONファイルの例 Mar 03, 2025 am 12:35 AM

例JSONファイルの例

8見事なjQueryページレイアウトプラグイン 8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

8見事なjQueryページレイアウトプラグイン

10 jQuery構文蛍光物 10 jQuery構文蛍光物 Mar 02, 2025 am 12:32 AM

10 jQuery構文蛍光物

独自のAjax Webアプリケーションを構築します 独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

独自のAjax Webアプリケーションを構築します

' this' JavaScriptで? ' this' JavaScriptで? Mar 04, 2025 am 01:15 AM

' this' JavaScriptで?

10 JavaScript&JQuery MVCチュートリアル 10 JavaScript&JQuery MVCチュートリアル Mar 02, 2025 am 01:16 AM

10 JavaScript&JQuery MVCチュートリアル

See all articles