ES6模塊的import和export用法總結(jié)

export:

用于對(duì)外輸出本模塊(一個(gè)文件可以理解為一個(gè)模塊)變量的接口斯撮。

import:

用于在一個(gè)模塊中加載另一個(gè)含有export接口的模塊。
export命令定義了模塊的對(duì)外接口以后其他js文件就可以通過import+(常量|函數(shù)|文件|模塊)命令加載這個(gè)模塊(文件)

基本用法

例如:

//a.js
var name="LXN";
var echo=function(value){
console.log(value)
export {name, echo}
//通過向大括號(hào)中添加name和echo 變量鼓黔,將它們export輸出

注:以上的export {name}不能寫成export name

//b.js
//通過import獲取a.js文件的內(nèi)部變量
import {name, echo} from "./a.js"
console.log(sex)  //LXN
echo(name) //LXN
export default用法

使用export default命令,微模塊制定默認(rèn)輸出携御,不需要知道所要加載模塊的變量名

//a.js
 var name="LXN";
export default name  //name不能加大括號(hào)纳本,注意與基本用法區(qū)分
//一個(gè)文件只能用一個(gè)export default,此處相當(dāng)于為name變量值“LXN”起了一個(gè)系統(tǒng)默認(rèn)的變量名default
}
//b.js
//其實(shí),a.js文件的export default輸出一個(gè)叫做default的變量土思,然后系統(tǒng)允許為他取任意名字务热,所以可以為import的模塊起任何變量名忆嗜,且不需要用大括號(hào)包含
import any from "./a.js"
import anyname from "./a.js"
console.log(any,anyname) //LXN,LXN

export default命令實(shí)際上只是輸出一個(gè)叫做default的變量,所以它后面不能跟變量聲明語(yǔ)句崎岂,而export需要跟變量聲明或者大括號(hào)最為輸出捆毫。

正確用法:
                  export var a = 1;
                  var a = 1;
                  export default a;
                  export {a}
錯(cuò)誤用法:
                  export default var a = 1;
導(dǎo)出一組對(duì)象

在模塊的末尾單獨(dú)進(jìn)行導(dǎo)出聲明,以導(dǎo)出該模塊的全部對(duì)象冲甘。

class Employee{
      constructor(id, name){
      this.id=id;
      this.name=name;
}
function getEmployee(id, name){
      return new Empolyee(id, name);
}
export {Employee,getEmployee};

在導(dǎo)出時(shí)绩卤,重命名對(duì)象也可以,用as江醇,如下:

export {
      A as Employee,
      B as getEmployee
};

導(dǎo)入模塊

無對(duì)象導(dǎo)入

如果谋舯铮考包含一些邏輯要執(zhí)行且不會(huì)導(dǎo)出任何對(duì)象,此類對(duì)象也可以被導(dǎo)入到另一模塊中

  import './a.js';
導(dǎo)入默認(rèn)對(duì)象

采用Default導(dǎo)出方式導(dǎo)出對(duì)象陶夜,該對(duì)象在import聲明中將直接被分配給某個(gè)引用凛驮,如下例中的“d”

import d from './a.js';
導(dǎo)入命名的對(duì)象
import {Employee, getEmployee} form './a.js'
導(dǎo)入所有對(duì)象
import * as allFormModule from './a.js'
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市条辟,隨后出現(xiàn)的幾起案子黔夭,更是在濱河造成了極大的恐慌,老刑警劉巖羽嫡,帶你破解...
    沈念sama閱讀 222,865評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件本姥,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡杭棵,警方通過查閱死者的電腦和手機(jī)扣草,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來颜屠,“玉大人辰妙,你說我怎么就攤上這事「撸” “怎么了密浑?”我有些...
    開封第一講書人閱讀 169,631評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)粗井。 經(jīng)常有香客問我尔破,道長(zhǎng),這世上最難降的妖魔是什么浇衬? 我笑而不...
    開封第一講書人閱讀 60,199評(píng)論 1 300
  • 正文 為了忘掉前任懒构,我火速辦了婚禮,結(jié)果婚禮上耘擂,老公的妹妹穿的比我還像新娘胆剧。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,196評(píng)論 6 398
  • 文/花漫 我一把揭開白布秩霍。 她就那樣靜靜地躺著篙悯,像睡著了一般。 火紅的嫁衣襯著肌膚如雪铃绒。 梳的紋絲不亂的頭發(fā)上鸽照,一...
    開封第一講書人閱讀 52,793評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音颠悬,去河邊找鬼矮燎。 笑死,一個(gè)胖子當(dāng)著我的面吹牛赔癌,可吹牛的內(nèi)容都是我干的漏峰。 我是一名探鬼主播,決...
    沈念sama閱讀 41,221評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼届榄,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼浅乔!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起铝条,我...
    開封第一講書人閱讀 40,174評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤靖苇,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后班缰,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體贤壁,經(jīng)...
    沈念sama閱讀 46,699評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,770評(píng)論 3 343
  • 正文 我和宋清朗相戀三年埠忘,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了脾拆。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,918評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡莹妒,死狀恐怖名船,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情旨怠,我是刑警寧澤渠驼,帶...
    沈念sama閱讀 36,573評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站鉴腻,受9級(jí)特大地震影響迷扇,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜爽哎,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,255評(píng)論 3 336
  • 文/蒙蒙 一蜓席、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧课锌,春花似錦厨内、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至癣亚,卻和暖如春丑掺,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背述雾。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工街州, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人玻孟。 一個(gè)月前我還...
    沈念sama閱讀 49,364評(píng)論 3 379
  • 正文 我出身青樓唆缴,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親黍翎。 傳聞我的和親對(duì)象是個(gè)殘疾皇子面徽,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,926評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)匣掸,斷路器趟紊,智...
    卡卡羅2017閱讀 134,719評(píng)論 18 139
  • 1. export與模塊導(dǎo)出 export語(yǔ)法聲明用于導(dǎo)出函數(shù)、對(duì)象碰酝、指定文件(或模塊)的原始值霎匈。export有兩...
    楊慧莉閱讀 3,550評(píng)論 1 5
  • 以下內(nèi)容是我在學(xué)習(xí)和研究ES6時(shí),對(duì)ES6的特性送爸、重點(diǎn)和注意事項(xiàng)的提取铛嘱、精練和總結(jié),可以做為ES6特性的字典袭厂;在本...
    科研者閱讀 3,133評(píng)論 2 9
  • { "Unterminated string literal.": "未終止的字符串文本墨吓。", "Identifi...
    一粒沙隨風(fēng)飄搖閱讀 10,603評(píng)論 0 3
  • { "Unterminated string literal.": "未終止的字符串文本。", "Identifi...
    栗子雨閱讀 7,897評(píng)論 0 3