es6 での import の使用法は何ですか?-フロントエンドQ&A-php.cn

es6 での import の使用法は何ですか?

WBOY

リリース： 2022-04-25 17:19:54

オリジナル

4518 人が閲覧しました

es6 では、複数のエクスポートでエクスポートされた内容を 1 つのオブジェクトに結合して返すために import as を使用します。ES6 のモジュール化は、エクスポートとインポートの 2 つのモジュールに分かれています。このメソッドは、すべてのエクスポートの内容をにラップすることができます。指定されたオブジェクトの場合、構文は「import * as object from ...」です。

es6 での import の使用法は何ですか?

このチュートリアルの動作環境: Windows 10 システム、ECMAScript バージョン 6.0、Dell G3 コンピューター。

es6

ES6 での import の使用法は何ですか。JavaScript が初めてモジュールをサポートしました。 ES6 のモジュール化は、export (エクスポート) と import (インポート) の 2 つのモジュールに分かれています。プロジェクトでは、import * as obj from という使い方がよく見られます。この書き方は、すべての出力を obj オブジェクトにラップします。内部にあります。

import * as xxx from 'xxx': 複数のエクスポートによってエクスポートされたコンテンツを 1 つのオブジェクトに結合して返します;

import xxx from 'xxx': (デフォルトの DIN をエクスポート) のみこれをエクスポートします。デフォルトのオブジェクトがオブジェクトとして使用されます。

例 1

// index.js
export function fn1(data){
  console.log(1)
}
export function fn2(data){
  console.log(2)
}
import * as Fn from &#39;./index.js&#39;
Fn.fn1()  // 1
Fn.fn2()  // 2

ログイン後にコピー

例 2

let myName = "Jon";
let myAge = 18;
let myfn = function(){
    return "我是"+myName+"！今年"+myAge+"岁了"
}
export {
    myName as name,
    myAge as age,
    myfn as fn
}

ログイン後にコピー

受信したコード

import {fn,age,name} from "./test.js";
console.log(fn()); //我是Jon！今年19岁了
console.log(age); //19
console.log(name); //Jon

ログイン後にコピー

または、

import * as info from "./test.js"; //通过*来批量接收，as 来指定接收的名字
console.log(info.fn()); //我是Jon！今年18岁了
console.log(info.age); //18
console.log(info.name); //Jon

ログイン後にコピー

例 3

エクスポートとインポートの名前を変更します。複数のインポートされたファイルの変数名が同じである場合、名前の競合が発生します。この問題を解決するために、ES6 には名前をインポートするときに実行できる名前変更方法が用意されています。

/*************test1.js*****************/
export let myName = "我来自test1.js";
/*************test2.js*****************/
export let myName = "我来自test2.js";
 
/*************index.js****************/
import {myName as name1} from "./test1.js";
import {myName as name2} from "./test2.js";
console.log(name1); //我来自test1.js
console.log(name2); //我来自test2.js

ログイン後にコピー

【関連する推奨事項: JavaScript ビデオチュートリアル、Web フロントエンド ]

以上がes6 での import の使用法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。