JavaScript ES6のエクスポートインポートとエクスポートデフォルトの使い方と違いを詳しく解説

この記事では主に JavaScript の ES6 のエクスポート、インポート、およびエクスポートのデフォルトの使用法と違いについて説明します。この記事の紹介は、ES6 を学習する際に役立つと思います。以下を参照してください。一緒に見てみましょう。

はじめに

エクスポート、エクスポートデフォルト、インポートを使ったことがある人は多いと思いますが、それらの違いは何ですか？ それらの違いを説明する前に、まず使用方法を見てみましょう。

ES6 のインポートとエクスポートの使用法

ES6 よりも前から js モジュール読み込みソリューションがありましたが、最も重要なものは CommonJS と AMD 仕様です。 commonjs は主に、nodejs などの同期読み込みを実現するためにサーバーで使用されます。 AMD 仕様は、requirejs などの非同期読み込み用のブラウザーに適用されます。 seaJS などの同期読み込みソリューション用の CMD 仕様もあります。

ES6 は言語仕様のレベルでモジュール機能を実装しており、その実装は非常に簡単で、既存の CommonJS および AMD 仕様を完全に置き換えることができ、ブラウザーとサーバー用のユニバーサル モジュール ソリューションになります。

ES6モジュールには主にexportとimportの2つの機能があります

• exportはこのモジュールの変数のインターフェースを出力するために使用されます(ファイルはモジュールとして理解できます)

• importは読み込みに使用されますa module エクスポート インターフェイスを含む別のモジュール。

つまり、export コマンドを使用してモジュールの外部インターフェイスを定義した後、他の JS ファイルは import コマンドを通じてこのモジュール (ファイル) を読み込むことができます。以下のように (ファイル a と b が同じディレクトリにあると仮定します)

// a.js

var sex="boy";
var echo=function(value){
　　console.log(value)
}
export {sex,echo} 
//通过向大括号中添加sex，echo变量并且export输出，就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
//不能写成export sex这样的方式，如果这样就相当于export "boy",外部文件就获取不到该文件的内部变量sex的值，因为没有对外输出变量接口,只是输出的字符串。

// b.js
通过import获取a.js文件的内部变量，{}括号内的变量来自于a.js文件export出的变量标识符。
import {sex,echo} from "./a.js" 
console.log(sex) // boy
echo(sex) // boy

a.js ファイルは、次のエクスポート構文に従って記述することもできますが、上記ほど直感的ではないため、お勧めできません。

// a.js
export var sex="boy";
export var echo=function(value){
　　console.log(value)
}

//因为function echo(){}等价于 var echo=function(){}所以也可以写成
export function echo(value){
　　　console.log(value)
}

上記は、export と module の基本的な使用法であり、その後、研究を拡張します

前の例から、b.js が import コマンドを使用するとき、ユーザーは変数を知る必要があることがわかります.js 文字によって公開される識別子。それ以外の場合はロードできません。 importdefault コマンドを使用してモジュールのデフォルト出力を指定できるため、ロードするモジュールの変数名を知っている必要はありません。

//a.js
var sex="boy";
export default sex（sex不能加大括号）
//原本直接export sex外部是无法识别的，加上default就可以了.但是一个文件内最多只能有一个export default。
其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default，自然default只能有一个值，所以一个文件内不能有多个export default。

// b.js
本质上，a.js文件的export default输出一个叫做default的变量，然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名，且不需要用大括号包含
import any from "./a.js"
import any12 from "./a.js" 
console.log(any,any12) // boy,boy

ES6 のエクスポート、インポート、およびエクスポートのデフォルトの違い

JavaScript ES6 では、エクスポートとエクスポートのデフォルトの両方を使用して、定数、関数、ファイル、モジュールなどをエクスポートできます。 その他 にエクスポートします。 import + (constant | function | file | module) という名前でファイルまたはモジュールにインポートして使用できるようにします。 ただし、1 つのファイルまたはモジュール内で複数のエクスポートとインポートを行うことができます。 、エクスポートのデフォルトは 1 つだけです。

具体的な用途:

1、

//demo1.js
export const str = 'hello world'

export function f(a){
 return a+1
}

の対応するインポートメソッド:

//demo2.js
import { str, f } from 'demo1' //也可以分开写两次，导入的时候带花括号

2、

//demo1.js
export default const str = 'hello world'

の対応するインポートメソッド:

//demo2.js
import str from 'demo1' //导入的时候没有花括号

概要

以上がJavaScript ES6のエクスポートインポートとエクスポートデフォルトの使い方と違いを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。