[Level up]データ練習(1)-インポートとエクスポート

01.インポート&エクスポート

js拡張子で終わるJavaScriptファイルは、外部のJavaScriptファイルをインポート(import)したり、エクスポート(export)したりすることができます.

02.インポート

importは、外部JavaScriptファイルをインポートするチャネルを開いていると考えられます.

importコードの例

import random from "./getRandom"; // getRandom.js
import {random, user as heropy } from "./getRandom"; // getRandom.js
console.log(random());

03.エクスポート

内部コンテンツは、

2exportキーワードを使用してエクスポートできます.

を通る2つの通路は、それぞれDefault exportとNamed exportである.

3-1.Default export

データに名前を付ける必要のないデフォルトチャネル

プライマリ・チャネルの場合、1つのモジュールから1つのプライマリ・チャネルしかエクスポートできません.

3-2.Named export

データの名前を付けなければならないチャネル

名を指定したチャネルは、複数のデータを同時にエクスポートできます.

04.コードのインポート&エクスポートの例

Default exportコード例

export default function () {
	return Math.floor(Math.random() * 10);
}

import random from "./getRandom"; // getRandom.js
console.log(random());

データは

メインチャネルを介して流出することができる.

プライマリ・チャネルの場合、1つのファイルから1つのデータ・ボックスしかエクスポートできません.

は、メインチャネルから流出したデータに名前を付ける必要がないため、export defaultキーワードを使用する.

Name exportコード例

export default function random () {
	return Math.floor(Math.random() * 10);
}
export const user = {
	name: "HEROPY",
	age: 85
}

import {random, user as heropy } from "./getRandom"; // getRandom.js
// Named export를 사용하는 경우 { random, user } 처럼 사용할 이름에 { } 표시를 해줘야 한다. 
// as뒤에는 내가 바꾸고 싶은 이름을 적는다.

指定された名前チャネルを介して出力される

データについては、import {random, user as heropy }のような括弧{ }にデータを囲む必要があります.

はまた、上記のコードのように複数のデータを同時に出力することもできる.

現在のファイルで異なる名前の

を使用する場合は、user as heropy(asなど)を使用します.

import * as R from ""./getRandom""; // 와일드카드(*)로 내보내기 되는 여러 내용들을 한꺼번에 사용한다.
console.log(random());
console.log(user);
console.log(R);

ワイルドカード(

2*)は、複数のコンテンツを同時に指定するためのワイルドカード(Wildcard Character)とも呼ばれる.

指定したチャネルで

名のデータを一度に取得する場合は、上記のコードに示すようにワイルドカードを使用します.