Import as wird verwendet, um die von mehreren Exporten exportierten Inhalte in einem Objekt zusammenzufassen und zurückzugeben. Die Modularisierung von ES6 ist in zwei Module unterteilt: Export und Import. Diese Methode kann alle Exportinhalte in das angegebene Objekt einbinden. Die Syntax für „* als Objekt aus ... importieren“.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, ECMAScript Version 6.0, Dell G3-Computer.
ES6, Javascript unterstützt zum ersten Mal das Modul. Die Modularisierung von ES6 ist in zwei Module unterteilt: Export und Import. In Projekten wird häufig die Verwendung von „obj from“ verwendet.
import * as xxx from 'xxx': Kombiniert die durch mehrere Exporte exportierten Inhalte in einem Objekt und gibt es zurück.
import xxx from 'xxx': (Export-Standard-Din) exportiert nur dieses Standardobjekt als ein Objekt
Beispiel 1
// index.js export function fn1(data){ console.log(1) } export function fn2(data){ console.log(2) } import * as Fn from './index.js' Fn.fn1() // 1 Fn.fn2() // 2
Beispiel 2
let myName = "Jon"; let myAge = 18; let myfn = function(){ return "我是"+myName+"!今年"+myAge+"岁了" } export { myName as name, myAge as age, myfn as fn }
Der Code wurde
import {fn,age,name} from "./test.js"; console.log(fn()); //我是Jon!今年19岁了 console.log(age); //19 console.log(name); //Jon
oder als
import * as info from "./test.js"; //通过*来批量接收,as 来指定接收的名字 console.log(info.fn()); //我是Jon!今年18岁了 console.log(info.age); //18 console.log(info.name); //Jon
geschrieben Namen in mehreren importierten Dateien sind gleich, Das heißt, es wird ein Namenskonfliktproblem auftreten. Um dieses Problem zu lösen, bietet ES6 eine Methode zum Umbenennen.
/*************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-Video-Tutorial
,Web-Frontend】
Das obige ist der detaillierte Inhalt vonWas ist die Verwendung von Import wie in es6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!