這三個(gè)名詞功能的出現(xiàn)是為了實(shí)現(xiàn) js 的模塊化的尖殃，屬于es6語法丈莺。
這仨沒出現(xiàn)之前，我們給 js 按功能分為不同的文件送丰，在 html 文件頁面里引用的時(shí)候要使用大量的 script 標(biāo)簽缔俄，如果都放在一個(gè)文件里呢，又可能出現(xiàn)只使用一兩個(gè)功能器躏，卻要引入相對大的一個(gè)文件俐载，還有運(yùn)行環(huán)境不同產(chǎn)生的等等問題。
接著 js 模塊化即可在js中按需導(dǎo)入模塊功能就出現(xiàn)了登失。
字面意思就可以看出 export遏佣、export default 負(fù)責(zé) 導(dǎo)出， import 則負(fù)責(zé) 導(dǎo)入揽浙。
export 在一個(gè) js 文件中可以有多個(gè)状婶，export default 最多只能有一個(gè)。
1馅巷、export
方式1：先聲明后導(dǎo)出膛虫，假設(shè) test1.js
const a1 = 'a1' //var 、let
function fn1() {
console.log('我是fn1');
}
export { a1, fn1 }
方式2：導(dǎo)出與聲明一起令杈，假設(shè) test2.js
export的函數(shù)必須命名
export const a2 = 'a2' //var 走敌、let
export function fn2() {
console.log('我是fn2');
}
混用：不限個(gè)數(shù)當(dāng)然是可以混用的碴倾，假設(shè) test3.js
const a3 = 'a3'
export function fn3() {
console.log('我是fn3');
}
export {a3}
不管上面哪種形式都可以用下面兩種方式使用逗噩。
使用1：用哪個(gè)取哪個(gè)，還可以命名別名
import {fn1} from './test1.js'
import {a2 as ha,fn2} from './test2.js'
import {a3} from './test3.js'
fn1()
console.log(ha)
fn2()
console.log(a3)
使用2：全部取出跌榔，對象方式使用
import * as test1 from './test1.js'
import * as test3 from './test3.js'
test1.fn1()
test3.fn3()
console.log(test3.a3)
2异雁、export default
方式1：先聲明后導(dǎo)出，假設(shè) test4.js
function fn4() {
console.log('我是fn4');
}
export default fn4
方式2：導(dǎo)出與聲明一起僧须，假設(shè)test5.js
export default function fn5() {
console.log('我是fn5');
}
方式2這里 fn5 可以是匿名函數(shù)如下纲刀，這與 export 必須命名函數(shù)是一個(gè)區(qū)別。為什么這里可以是匿名呢担平？原來 export default 導(dǎo)出的函數(shù)在 import 導(dǎo)出的時(shí)候都會(huì)重新命名示绊，具體意思看下面的示例。
export default function() {
console.log('我是fn5');
}
使用：export default 只有一種使用方式
import test5 from './test5.js'
test5()
這個(gè) test5 就是我們給 export default function fn5() 或者 export default function() 重新定義的名字暂论。
有心的小伙伴可能注意到這里并沒有給出 export default 導(dǎo)出 const | let | var 這種變量的示例面褐，那是因?yàn)檫@種變量是不可以直接像 export 一樣直接出現(xiàn)在后面的，多值則需要以對象的形式導(dǎo)出取胎，如下（test6.js）：
const a7='a7' // let,var
export default {
a6:'a6',
a7:a7,
fn6(){
console.log('我是fn6');
}
}
使用還是跟使用 test5.js 一樣的
import moreEle from './test6.js'
console.log(moreEle.a6)
moreEle.fn6()
3展哭、export 和 export default 混用湃窍，test7.js
const a1 = 'a1' //var 、let
function fn1() {
console.log('我是fn1');
}
export { a1, fn1 }
export const a2 = 'a2' //var 匪傍、let
export function fn2() {
console.log('我是fn2');
}
const a3 = 'a3'
export function fn3() {
console.log('我是fn3');
}
export { a3 }
export default function fn5() {
console.log('我是fn5');
}
以上 test7.js 使用的時(shí)候您市，要使用 export default 定義的就只能是 import [name] from './test7.js' 形式，export 也是用自己的那兩種方式 import {[name],[name] as [alias]} from './test7.js'(即必須有花括號(hào)) 或者 import * as [alias] from './test7.js'役衡，注意后一種 * 盡管是導(dǎo)出全部的意思茵休，但這并不包括 export default 導(dǎo)出的。
感謝閱讀映挂，喜歡的話點(diǎn)個(gè)贊吧：）
更多內(nèi)容請關(guān)注后續(xù)文章泽篮。。柑船。
